Die Erweiterung [fritzmg/contao-swiper] bietet die Möglichkeit, über die Eingabe einer Klasse im Feld Wrapper CSS Klasse, Listen in den Slider einzufügen.
Ich nutzte diese Möglichkeit auch gerne für Bilderslider - und damit nicht einzelne Inhaltselemente des Types Bild zwischen Umschlag Anfang und Umschlag Ende eingefügt werden müssen, nehme ich diese Möglichkeit über das Inhaltselement Galerie wahr.
swiper-gallery_02.png
Mit Contao 5.x haben sich jedoch die Klassen und die HTML-Konstrukte selbst ein wenig geändert.
Eine Galerie erzeugt nun ein HTML
Code:
<div class="content-gallery--cols-1 content-gallery">
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
</div>
also ohne, dass die <ul> eine Klasse mitbekommt.
Damit man anfangs beschriebene Möglichkeit jedoch weiterhin nutzen kann, muss das Twig-Template angepasst werden.
Du legst dir dazu im Backend ein neues Template 'gallery.html.twig' an. Contao verschiebt dir dieses automatisch in den Ordner 'content_element', und falls der Ordner noch nicht exsistiert, wird er automatisch für dich angelegt.
/templates/content_element/gallery.html.twig
Nun erstellst du dir einen neuen Ordner 'gallery' im Ordner 'content_element' und kopierst dir dort die Datei gallery.html.twig hinein.
Den Dateinamen änderst du dir dann - beachte dabei die Namenskonventionen.
/templates/content_element/gallery/gallery.html.twig
ändern auf (zum Beispiel):
/templates/content_element/gallery/swipergallery.html.twig
swiper-gallery_03.png
Der Inhalt der Datei swipergallery.html.twig besteht nur aus einer zusätzlich eingefügten Zeile:
Code:
{% extends "@Contao/content_element/gallery.html.twig" %}
{#
** Add changes to the base template here. **
Hint: Try adjusting blocks and attributes instead of
overwriting the whole template. This way your version
can remain compatible with future changes to the base
template as well as adjustments made by extensions.
Currently available blocks:
"list_component", "list", "list_attributes",
"list_item_attributes", "list_item", "pagination",
"list_script", "pagination_script_show_element",
"pagination_script_activate_selector",
"picture_component", "image", "sources", "source",
"schema_org", "figure_component", "media",
"media_link", "caption", "caption_inner",
"content", "headline_component",
"headline_attributes", "headline_inner",
"wrapper", "wrapper_tag", "attributes", "inner"
Example:
{% block list_component %}
{{ parent() }}
My additional content for 'list_component'…
{% endblock %}
#}
{# start changes #}
{% set list_attributes = attrs(list_attributes|default).addClass('swiperlist') %}
Ausschlaggebend ist nur die letzte Zeile die eingefügt wurde.
Hier wird der <ul> eine Klasse 'swiperlist' hinzugefügt, sodass im Frontend nun wie folgt ausgegeben wird:
Code:
<div class="content-gallery--cols-1 content-gallery">
<ul class="swiperlist">
<li></li>
<li></li>
<li></li>
...
</ul>
</div>
Im Backend musst du nun noch folgende Anpassungen vornehmen:
im Inhaltselement 'Galerie' änderst du das Template. Hierzu wählst du unter Inhaltselement-Template dein erstelltes Template aus:
content_element/gallery/swipergallery [Global]
im Inhaltselement 'Content Slider - Umschlag Anfang' fügst du im Feld 'Wrapper CSS Klasse' deine Klasse swiperlist ein.
swiper-gallery_01.png
Das war's ... im Frontend sollte nun wieder die Galerie als Bilderslider dargestellt sein.
Bilderslider mit CE Galerie und [fritzmg/contao-swiper] unter Contao 5.x mit Twig
Zitieren
Lesezeichen