Raster-Galerie für Bilder
Extension key: gridgallery
Extension-Entwickler: Philipp Mueller
Diese Extension stellt eine beliebige Anzahl Bilder in einem Grid-System dar.
Die Anordnung der Bilder wird dabei automatisch per JavaScript entsprechend der Formate der Bilder und des verfügbaren Platzes optimiert (ähnelt dem bekannten Masonry-Effekt).
Den Link zur Dokumentation der Extension und weitere Infos finden Sie im TYPO3 Extension Repository (TER).
Installation
Die Extension kann auf den üblichen Wegen installiert werden, entweder aus dem Backend heraus über den Extension-Manager oder per composer.
Als Abhängigkeit wird dabei zusätzlich auch die Extension vhs automatisch mitinstalliert.
Anschließend muss im TypoScript-Template das statische Template der Extension dem eigenen Template hinzugefügt werden.
Im Konstanteneditor können anschließend ein paar Standardwerte vordefiniert werden.
Außerdem kann hier entschieden werden, ob das JavaScript-Framework jQuery durch die Extension geladen wird oder nicht.
Ob Sie diese Option nutzen, hängt davon ab, ob jQuery in Ihrer Website schon geladen wird oder nicht. Wenn Sie unser Musterprojekt verwenden, müssen Sie nichts weiter unternehmen, da hier jQuery schon mit dabei ist.
Andernfalls müssen Sie prüfen, ob Ihre Website jQuery schon lädt. Das lässt sich oft recht schnell durch einen Blick in den HTML-Quelltext des Frontends klären.
Auf jeden Fall sollten Sie eine mehrfache Einbindung von jQuery vermeiden, denn dies kann zu Problemen und Fehlern führen.
Galerie anlegen
Um eine Bildergalerie anzulegen, erzeugen Sie auf der gewünschten Seite ein neues Inhaltselement.
Im Assistenten finden Sie im Bereich "Typischer Seiteninhalt" das neue Inhaltselement "Raster-Galerie".
In den Eigenschaften des Inhaltselements können Sie dann die gewünschten Bilder über die entsprechenden Schaltflächen hinzufügen.
Zusätzlich können Sie über einen Schalter das "Klick-Vergrößern" aktivieren. Beim Klick auf ein Bild im Frontend wird dann eine größere Version des Bildes mit Hilfe eines sogenannten Lightbox-Effekts angezeigt.
Im Frontend könnte die Ausgabe dann zum Beispiel so aussehen:
Die Anordnung der Bilder passt sich dabei automatisch an, um den verfügbaren Platz optimal auszunutzen, wie im folgenden Video zu sehen ist.
