Galerie mit gemeinsamer Ausgabe von Lightbox und Verlinkung

Die Aufgabenstellung war Folgende:
Die Bilder in einer Galerie sollen sowohl eine Verlinkung bereitstellen, als auch eine Ansicht in der Lightbox.
Im Frontend sollen diese beiden Möglichkeiten via CSS als Icon über dem Bild eingeblendet werden.

Linktipp: contaokurs.at

Angepasst bzw. angelegt habe ich ein Variantentemplate zum gallery.html.twig.
/content_element/gallery/galerie-teaserbild.html.twig

Code:

---

{% 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 %}

---

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.

[edit | 23.02.2025:]
hier geht es zur Projektwebseite