Liste der Anhänge anzeigen (Anzahl: 3)
Bilderslider mit CE Galerie und [fritzmg/contao-swiper] unter Contao 5.x mit Twig
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.
https://community.contao.org/de/atta...8&d=1703103107
Anhang 26848
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
https://community.contao.org/de/atta...0&d=1703103391
Anhang 26850
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.
https://community.contao.org/de/atta...9&d=1703103180
Anhang 26849
Das war's ... im Frontend sollte nun wieder die Galerie als Bilderslider dargestellt sein.
Bilder werden untereinander angezeigt
Moin, gute Anleitung, klappt auch soweit. Nur werden bei mir alle Galeriebilder untereinander angezeigt. In der Galerie selbst hat "Vorschaubilder pro Reihe" dafür auch keine Auswirkung.
Muss ich noch etwas beachten?
Viele Grüße
JEns
Liste der Anhänge anzeigen (Anzahl: 1)
