Twig - Galerie in Verbindung mit Content-Slider
von Bernhard Renner
Die Bilder einer Galerie sollen als Slider-Element innerhalb des Inhaltselementes Content-Slider dargestellt werden. Mit ein paar Anpassungen in den Twig-Templates ist auch das möglich.
Hierzu legen wir uns zwei neue Templates an:
/templates/content_element/gallery/slider-gallery.html.twig
/templates/content_element/swiper/gallery-slider.html.twig
Wie ihr Varianten-Templates anlegt, könnt ihr z.B. hier in den Folien erfahren.
{# slider-gallery.html.twig #}
{% extends "@Contao/content_element/gallery.html.twig" %}
{% set attributes = attrs()
.addClass("swiper-wrapper content-#{type}--cols-#{items_per_row|default(4)}")
.mergeWith(attributes|default)
%}
{% block list %}
{% for item in list.items %}
<li class="swiper-slide"{% block list_item_attributes %}{{ attrs(list.item_attributes|default) }}{% endblock %}>
{% block list_item %}
{% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
{% endblock %}
</li>
{% endfor %}
{% endblock %}
hier füge ich die Klasse .swiper-wrapper hinzu.content-#{type}--cols-#{items_per_row|default(4)} hat keine weitere Auswirkungen auf den Slider.
Ich habe festgestellt, dass wenn ich das rauslösche, die Klasse im Frontend trotzdem noch eingefügt wird ... die wird wohl an anderer Stelle auch erzeugt.
Dem <li> wird hier die Klasse .swiper-slide hinzugefügt.
{# galley-slider.html.twig #}
{% extends "@Contao/content_element/swiper.html.twig" %}
{% block content %}
{% set slider_attributes = attrs()
.addClass('swiper ')
.set('data-delay', delay)
.set('data-speed', speed)
.set('data-offset', offset)
.set('data-loop', loop)
.mergeWith(slider_attributes|default)
%}
<div{{ slider_attributes }}>
{# entfeRne .addClass('swiper-wrapper') #}
{% set slider_wrapper_attributes = attrs()
.mergeWith(slider_wrapper_attributes|default)
%}
{% block slides %}
{% for element in nested_fragments %}
{% block slide %}
{{ content_element(element) }}
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
Hier wird der {% block slides %} angepasst und .addClass('swiper-wrapper') entfernt, da dieses nun im Galerie-Template gesetzt wird.
Weitere Anpassungen sind im {% block slides %} gemacht.
Um die Anzahl der angezeigten Slides musst du dich nun ebenfalls im Template des swipers (/gallery-slider.html.twig) kümmern, denn das wird nun nicht mehr via CSS geregelt, sondern über das swiperJS.
Stichwort: slidesPerView: 3,
... dazu wird es später noch einen eigenen Eintrag geben.
Beispiel
Hier wurde obiges Beispiel, ohne weitere Anpassung im Backend dargestellt.
Weitere Variationen sind durch eigene Anpassungen möglich.
Kommentare
Einen Kommentar schreiben