Galerie mit gemeinsamer Ausgabe von Lightbox und Verlinkung
von Bernhard Renner
Die Aufgabenstellung:
Die Bilder in einer Galerie sollen sowohl eine Verlinkung bereitstellen, als auch die Ansicht in der Lightbox.
Im Frontend sollen diese beiden Möglichkeiten via CSS als Icon über dem Bild eingeblendet sein.
Das Icon soll das Bild in der Lightbox öffnen.
Das Icon soll das Bild auf den Ziellink weiterleiten.
Die Verlinkung soll in der Dateiverwaltung (INHALTE » Dateien) in den Metadaten gepflegt werden können.
Hinweis!
Es empfiehlt sich, die zu verwendeten Bilder nicht andersweitig einzusetzen » im Standard verlinkt nämlich Contao die Bilder immer, wenn in den Metadaten eine Verlinkung eingetragen ist und wenn das Häkchen in der Galerie für "Vergrössern/neues Fenster" gesetzt ist, wird immer in neuem Tab geöffnet.
Sprich, die Lightbox würde hier dann nicht mehr greifen, wenn selbige Bilder z.B. in einem Inhaltselement Text eingefügt wird.
So wird besagtes Ziel am Ende aussehen.
Bei :hover wird ein overlay eingeblendet, welches beide Icons beinhaltet.
Es wird ein angepasstes Template benötigt. Dazu erstellst du, sofern noch nicht vorhanden - anhand dieser Anleitung - ein Variantentemplate.
In meinem Fall habe ich die Datei galerie-teaserbild.html.twig benannt.
Abgelegt wird die Datei in /templates/content_element/gallery/galerie-teaserbild.html.twig.
Der Inhalt des Templates sieht wie folgt aus:
{% extends "@Contao/content_element/gallery.html.twig" %}
{% block list_attributes %}
{# add class to <ul> #}
{{ parent() }} class="masonry-thumbs grid-container row row-cols-{{ data.perRow }}" data-big="{{ data.perRow }}"
{% endblock %}
{% block list_item_attributes %}
{# add class to <li> #}
{{ parent() }} class="grid-item"
{% endblock %}
{% block figure_component %}
{% set figure_attributes = attrs()
.mergeWith(figure.options.attr|default)
.mergeWith(figure_attributes|default)
%}
{% set img_src = figure.image.img.src %}
<figure{{ figure_attributes }}>
{# Media Block #}
<div class="figure-media">
{{ block('picture_component') }}
</div>
{# Icons Block: Colorbox und Link #}
<div class="figure-icons">
{# Lightbox Icon #}
<a href="{{ img_src }}"
data-lightbox="lb{{ data.pid }}"
title="{{ figure.metadata.title|default }}"
class="figure-icon-lightbox"
target="_self">
<i class="bi bi-plus-lg" aria-hidden="true"></i>
</a>
{# Verlinkungs-Icon #}
{% if figure.metadata.get('link') %}
<a href="{{ figure.metadata.get('link') }}"
title="{{ figure.metadata.title|default }}"
class="figure-icon-link"
target="_self">
<i class="bi bi-link-45deg" aria-hidden="true"></i>
</a>
{% endif %}
</div>
{# Caption Block #}
{% block caption %}
{{ parent() }}
{% endblock %}
</figure>
{% endblock %}
Die beiden ersten Blöcke {% block list_attributes %} und {% block list_item_attributes %} dienen bei mir zur Vergabe von Klassen, damit ich Masonry mit umsetzen kann.
Interessant wird es ab dem Block {% block figure_component %}.
Hier greife ich auf besagten Block im Template /component/_figure.html.twig aus dem Core zu und passe ihn an.
Mit {% set img_src = figure.image.img.src %} hole ich mir den Pfad des Bildes um diesen dann für die Lightbox zu verwenden.{{ block('picture_component') }} wird nicht überschrieben und wird wie im Core-Template auch, verwendet.
Ab <div class="figure-icons"> erstelle ich die beiden Icons.
Das Lightbox-Icon wird immer generiert. Das Verlinkungs-Icon jedoch nur, wenn in den Metadaten des Bildes ein Link eingetragen ist.{% block caption %} wird mit {{ parent() }} unbearbeitet übernommen.
Als Ergebnis bekomme ich im Frontend nun folgendes HTML bereit gestellt:
<li class="grid-item" class="grid-item">
<figure>
<div class="figure-media">
<picture>
<source srcset="/assets/images/2/DSC9511-b2f3r5bspjdgkm1.webp" type="image/webp" width="800"
height="600">
<img src="/assets/images/w/DSC9511-5p4saj64g2n9ffz.jpg" alt="Löschfahrzeug der Feuerwehr Horn TLFA 3000"
title="Feuerwehr Horn Löschfahrzeuge" width="800" height="600" loading="lazy">
</picture>
</div>
<div class="figure-icons">
<a href="/assets/images/w/DSC9511-5p4saj64g2n9ffz.jpg" data-lightbox="lb40"
title="Feuerwehr Horn Löschfahrzeuge" class="figure-icon-lightbox" target="_self">
<i class="bi bi-plus-lg" aria-hidden="true"></i>
</a>
<a href="/fahrzeuge#handorgel1-fold2-header" title="Feuerwehr Horn Löschfahrzeuge" class="figure-icon-link"
target="_self">
<i class="bi bi-link-45deg" aria-hidden="true"></i>
</a>
</div>
</figure>
</li>
Der Rest - um obiges Beispiel zu erhalten - sind Stil-Anpassungen via (S)CSS.
Kommentare
Einen Kommentar schreiben