Ich baue mir grade ein kleines Gallery-Element, das genau 5 Bilder in einer Zeile haben soll und 150x150px große Bilder haben soll.
Ich möchte nun gerne das in einer Zeile max 5 Bilder mit einer Größe von 150x150pixel erscheinen
und dann soll ein automatischer Umbruch kommen, falls es mehr Bilder sind.
Da gleiche soll passieren bei 5, 10, 15, 20 Bildern.
Jetzt kommt der schwierige Part:
Ich möchte gerne das die einzelnen Elemente bzw die Elemente in einer Zeile steuerbar sind, also LINKS, MITTE oder RECHTS ausgerichtet werden.
Ich habe mir für das Back-End auch schon einen Schalter gebastelt, aber ich bekomme das nicht hin...
Wenn ich also 4 Elemente habe das sollen die zB Link, Rechts oder Mitte darstellbar sein uns zwar über den Schalten im Backend-Element.
Auch was ich im CSS einstellen/anlegen muss, ich blicke das nicht so ganz.
Könnte mir da einer mal helfen?
Danke.
<div class="small-12 medium-12 large-12 columns gallerylayout-{field.gallerylayout}" style="text-align: center;">
<ul>
<f:for each="{field.gallery}" as="gallery">
<li>
<div class="small-2 medium-2 large-2 columns">
<f:if condition="{gallery.image}">
<f:if condition="{gallery.link}">
<f:then>
<dce:typolink parameter="{gallery.link}">
<f:image src="uploads/pics/{gallery.image}" alt="{gallery.titlealt}" title="{gallery.titlealt}" class="galleryimgsize" />
</dce:typolink>
</f:then>
<f:else>
<f:image src="uploads/pics/{gallery.image}" alt="{gallery.titlealt}" title="{gallery.titlealt}" class="galleryimgsize" />
</f:else>
</f:if>
</f:if>
<f:if condition="{gallery.link}">
<f:then>
<f:link.page pageUid="{gallery.link}" title="{gallery.titlealt}">
<br>{gallery.bildunterschrift}
</f:link.page>
</f:then>
<f:else>
<f:if condition="{gallery.bildunterschrift}">
<f:then>
<br>{gallery.bildunterschrift}
</f:then>
<f:else>
<br><br>
</f:else>
</f:if>
</f:else>
</f:if>
</div>
</li>
</f:for>
</ul>
</div>