Galery Template for Contao 5.x

gal_col4_bs.html.twig

{# Speichere dieses Template unter contao/templates/twig/content_element/gallery/gal_col4_bs.html.twig #}
{# Das Template wird dann im Inhaltselement Galerie verfügbar sein unter dem Namen "content_element/gallery/gal_col4_bs.html.twig #}
{# Vergiss nicht die .twig-root dotfile in contao/templates/twig/ abzulegen und den Contao cache neu aufzubauen #}

{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_list.html.twig" %}
{% use "@Contao/component/_figure.html.twig" %}

{# Ein weiteres Galerie Template für Contao 5. Als Vorlage dient das Galerie Core Template vendor/contao/core-bundle/contao/templates/twig/content_element/gallery.html.twig #}

{# Hier bekommt das Wrapper Element der Galerie weitere Klassen und ein Attribut #}
{# Die erste Klasse "content-#{type}--cols-#{items_per_row|default(4)}" übernehmen wir von unserer Vorlage vendor/contao/core-bundle/contao/templates/twig/content_element/gallery.html.twig #}
{% set attributes = attrs(attributes|default)
    .addClass("content-#{type}--cols-#{items_per_row|default(4)}")
    .addClass("content-gallery-col-4")
    .addClass("auch mehrere klassen gehen")
    .set('data.foo', 'bar') %}

{# Das übernehmen wir von unserer Vorlage vendor/contao/core-bundle/contao/templates/twig/content_element/gallery.html.twig #}
{% block content %}
    {% if images|default %}
        {% with {items: images} %}{{ block('list_component') }}{% endwith %}
    {% endif %}
{% endblock %}

{# Das übernehmen wir von unserer Vorlage vendor/contao/core-bundle/contao/templates/twig/content_element/gallery.html.twig #}
{% block list_item %}
    {% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
{% endblock %}

{# Wir geben dem Link, welcher das Bild umschliesst, ein zusätzliches Attribut mit, damit die glightbox captions anzeigen kann. #}
{# Zusätzlich bekommt der link eine weitere Klasse "my-super-class" #}
{% block media_link %}
    {# Füge die Bildbeschribung für glightbox hinzu <a href="link_zu_bild.jpg" data-glightbox="title: bla bla"></a> #}
    {% if figure.metadata.caption|default %}
        {% set caption = 'title:' ~ figure.metadata.caption %}
        {% set link_attributes = attrs(figure.linkAttributes(true)|default)
            .set('data-glightbox', caption)
            .addClass('my-super-class') %}
    {% endif %}

    {{ parent() }}
{% endblock %}

{% block list %}
    {# Zusätzlich bekommt das ul Element die für Bootstrap nötige Klasse "row" #}
    {% set list = list|merge({'list_attributes': attrs(list.list_attributes|default)
        .addClass('row')
    }) %}

    {# Zusätzlich bekommt jedes li Element für Bootstrap nötigen Klassen "col-xs-12 col-sm-4 col-md-3" #}
    {% set list = list|merge({'item_attributes': attrs(list.item_attributes|default)
        .addClass('col-xs-12 col-sm-4 col-md-3')
    }) %}
    {{ parent() }}
{% endblock %}