Mehrere Bildergalerien in einer Lightbox öffnen
- 4.9
- 4.13
- 5.3
- 5.7
1. Templates kopieren und umbenennen
Zuerst erstellst du von den folgenden Templates eine Kopie und benennst diese um.
- gallery_default.html5 kopieren nach gallery_lightbox.html5
- image.html5 kopieren nach image_lightbox.html5
(Du kannst statt lightbox natürlich jeden beliebigen Namen verwenden)
2. gallery_lightbox.html5 anpassen
In diesem Template musst du nur den neuen Namen das angepasste Image-Template eintragen.
3. image_lightbox.html5 anpassen
In diesem Template musst du folgende Änderung durchführen:
- ALT: <?= $this->attributes ?>
- NEU: data-lightbox="lbcommon"
Für lbcommon kannst du auch jeden beliebigen eigenen Namen verwenden.
4. Template zuordnen
Nun ordnest du bei allen Galerien, die auf einer Seite zusammen geöffnet werden sollen, das neue Template gallery_lightbox zu.
1. Neues Template erstellen
Zuerst benötigen wir eine Kopie des Original-Templates gallery.html.twig. Das lässt sich mit wenigen Klicks über den Menüpunkt Templates erledigen.
2. Zum Variantentemplate umbenennen
Um nicht alle Galerien zu überschreiben, legen wir ein Variantentemplate an. Dazu erstellen wir zunächst unter content_element einen neuen Unterordner gallery. Anschließend benennst du das Template gallery.html.twig in onelightbox.html.twig um. Der Name kann von dir frei gewählt werden.
Jetzt musst du das umbenannte Template noch in den Ordner gallery verschieben. Das Ergebnis sollte so wie in folgendem Screenshot aussehen.
3. onelightbox.html.twig anpassen
Nun musst du im Template noch den entsprechenden Block media_link überschreiben. Damit alle Bilder in einer Lightbox vereint werden, muss der LightboxGroupIdentifier auf denselben Wert festgelegt werden. Um das zu erreichen, sollte das Template wie folgt aussehen.
{% extends "@Contao/content_element/gallery.html.twig" %}
{% block media_link %}
{% set link_attributes = attrs(figure.linkAttributes(true)|default)
.setIfExists('title', figure.hasLightbox and figure.hasMetadata ? figure.metadata.title : null)
.mergeWith(figure.options.link_attr|default)
.set('data-lightbox', 'allinonegallery')
.mergeWith(link_attributes|default) %}
<a{{ link_attributes }}>{{ block('media') }}</a>
{% endblock %}4. Anwendungscache leeren
Damit die Templates erkannt werden, musst du nun einmal den Anwendungscache über den Contao Manager leeren.
5. Template bei Galerie zuordnen
Nun sollte das Template onelightbox in Contao bekannt sein und du kannst es bei deiner Galerie zuordnen. Ordne es allen Galerien auf der Seite zu, die zusammengefasst werden sollen.
Möchtest du über neue Artikel informiert werden?
Dann trage hier deine E-Mailadresse ein und klicke auf „Abonnieren". Du erhältst regelmäßig aktuelle Infos über Contao und die Contao-Academy.
Über den Autor
Christian Feneberg ist der Initiator und Dozent der Contao Academy. Er bringt über 15 Jahre Praxiswissen in der professionellen Umsetzung von Contao-Websites mit. Zudem ist er Teil des Teams von trakked.io. Er liebt es, sich neues Wissen anzueignen und es weiterzugeben. Abseits des Bildschirms verbringt er am liebsten Zeit mit seiner Familie und in der Natur.
Folge Christian jetzt bei LinkedIn.
Einen Kommentar schreiben