BBCode(s) for Attachments in horizontal Line using flexbox

Discussion forum for Extension Writers regarding Extension Development.
Post Reply
User avatar
donsenilo
Registered User
Posts: 303
Joined: Wed Oct 08, 2014 6:23 pm
Name: Markus
Contact:

BBCode(s) for Attachments in horizontal Line using flexbox

Post by donsenilo » Wed Apr 06, 2016 9:19 pm

I have tried various methods to get attachments in a horizontal line.
2 attachments are easy (with float), but I wanted more ...

So I've tested flexbox and it works (the "wrap"-value works only with IE) ... and maybe these BBCodes would work also with Image-Links (but at this time I have not tested it).
flex-start, flex-inhalt and flex-ende are only the terms I've given to these BBCodes (of course you can use your own terms).

You have to create 3 BBCodes:
  1. BBCode:
    [flex-start][/flex-start]
    HTML:
    <div style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%;">
  2. BBCode:
    [flex-inhalt]{NUMBER},{TEXT}[/flex-inhalt]
    HTML:
    <div style="text-align: center; width: calc(100% / {NUMBER}); margin: auto;">{TEXT}</div>
  3. BBCode:
    [flex-ende][/flex-ende]
    HTML:
    </div>
How to use it in an article:
  1. flex-start (you don't have to add anything !)
  2. flex-inhalt (add the number of attachments you want in one row followed by a comma followed by the attachment-link)
  3. flex-ende (you don't have to add anything !)
How does 2 exactly work:
You only have to set the number of attachments that you would like to have in one row (the calc-function does the rest). You can use as many attachments in a row as you like ...

Here is an example from my Website where I use 3 attachments in a row followed by another row of 3 attachments:

Code: Select all

[flex-start][/flex-start]
[flex-inhalt]3,[attachment=6]Aokigahara-forest-of-suicides-016.jpg[/attachment][/flex-inhalt]
[flex-inhalt]3,[attachment=5]Aokigahara-forest-of-suicides-010.jpg[/attachment][/flex-inhalt]
[flex-inhalt]3,[attachment=4]Aokigahara-forest-of-suicides-019.jpg[/attachment][/flex-inhalt]
[flex-ende][/flex-ende]
[flex-start][/flex-start]
[flex-inhalt]3,[attachment=2]Aokigahara-forest-of-suicides-015.jpg[/attachment][/flex-inhalt]
[flex-inhalt]3,[attachment=0]Aokigahara-forest-of-suicides-011.jpg[/attachment][/flex-inhalt]
[flex-inhalt]3,[attachment=1]Aokigahara-forest-of-suicides-017.jpg[/attachment][/flex-inhalt]
[flex-ende][/flex-ende]
---------------------------------------------
Ok ... I've tested it now with different contents inside the "flex-inhalt".

Here as example: https://www.paranormal.wien/viewtopic.php?f=68&t=464

In this article you see ...
  • 2 contents (an attachment and an image) is the first row followed by an attachment and a BBCode I've created for Google Maps):

    Code: Select all

    [flex-start][/flex-start]
    [flex-inhalt]2,[attachment=0]kotter_intro.jpg[/attachment][/flex-inhalt]
    [flex-inhalt]2,[img]https://www.paranormal.wien/gallery/image/5849/source[/img][/flex-inhalt]
    [flex-ende][/flex-ende]
    [flex-start][/flex-start]
    [flex-inhalt]2,[attachment=1]Gr.Enzdf Kotter (7).JPG[/attachment][/flex-inhalt]
    [flex-inhalt]2,[map]Kaiser Franz Josef-Straße 2, Groß-Enzersdorf[/map][/flex-inhalt]
    [flex-ende][/flex-ende]
  • 9 Images from our gallery (3 images each in a row):

    Code: Select all

    [flex-start][/flex-start]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5860/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5857/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5886/source[/img][/flex-inhalt]
    [flex-ende][/flex-ende]
    [flex-start][/flex-start]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5884/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5883/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5901/source[/img][/flex-inhalt]
    [flex-ende][/flex-ende]
    [flex-start][/flex-start]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5881/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5854/source[/img][/flex-inhalt]
    [flex-inhalt]3,[img]https://www.paranormal.wien/gallery/image/5863/source[/img][/flex-inhalt]
    [flex-ende][/flex-ende]
Please let me know what you think and how it works (if you use it).

Post Reply

Return to “Extension Writers Discussion”