TYPO3 Bildergalerie, einfach und mit schön („cool“) angeordneten Bildern

„Schön angeordnete Bilder“ heißt, dass sich die unterschiedlichen Formate den vorhandenen Platz teilen und ihn ausfüllen, „einfach“ bedeutet, dass die Bilder aus einem Verzeichnis geladen werden können.

Zunächst die nötige TYPO3 Bildergalerie: Simple Image Gallery bzw. von hier: https://github.com/bitmotion/typo3-image-gallery. Letztere ist aktueller und das Auslagern der Templates war zum Zeitpunkt der Erstellung dieses Blogeintrags nur mit der Github-Version möglich.
Mit dieser Extension können Bildersammlungen („Dateisammlungen“) angelegt werden, indem lediglich das entsprechende Verzeichnis angegeben werden muss.

In diesem – einfachen – Beispiel benötigt man die Datei typo3conf/ext/bm_image_gallery/Resources/Private/Templates/List/List.html und lagert sie wie üblich nach fileadmin oder in eine eigene Extension aus:

# in die Constants
plugin.tx_bmimagegallery {
    view {
	templateRootPath = fileadmin/templates/gallery/Templates/
    }
}

Folgt man der Extension-Anleitung auf Github müssten Bilder zu sehen sein. Die Angaben zur Bildgröße kann man entfernen, da wir eine „coole“ Darstellung möchten, die die unterschiedlichen Formate auf den zur Verfügung stehenden Platz verteilt.

Hierfür gibt es zwei Optionen: Javascript oder CSS.
Javascript Lösung: https://masonry.desandro.com/
CSS Lösung: https://css-tricks.com/seamless-responsive-photo-grid/

Wir entscheiden uns für letztere. Das HTML Template (List.html) wird nun wie folgt modifiziert:

<f:layout name="Default"/>
<f:section name="main">
    <section id="photos">
    <f:for each="{items}" as="item">
	<a class="lightbox" rel="article-gallery" title="{item.title}" href="{item.publicUrl}"
            data-url="{item.publicUrl}" data-title="{item.properties.title}"
	    data-description="{item.properties.description}"
	    data-copyright="{item.properties.assets_copyright}"
	    data-size="{item.properties.size -> f:format.bytes(decimals: '1', decimalSeparator: '{f:translate(key:\'decimalSeparator\')}')}">
	    <f:image image="{item}" maxWidth="300" />
	  </a>
	</f:for>
    </section>
</f:section>

Wie gesagt, hier wurde einiges, was die Extension bietet, entfernt.
Achtung: hier wird für die Anzeige in der Lightbox das Bild in der Originalgröße verwendet – wer das nicht möchte, kann das href Attribut im Link modifizieren (und damit vermeiden, dass zu große Bilder geladen werden):

...
    href="<f:uri.image image='{item}' maxWidth='1200' />"
...

Nun muss lediglich das CSS von https://css-tricks.com/seamless-responsive-photo-grid/ hinzugefügt werden:

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
 
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}
 
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

Schön und simple.