Gallery Template für Swiper Slider anpassen und DIV content-gallery entnehmen

[mschindler]

Hallo zusammen,

ich würde gerne die native Gallery in Verbindung mit dem SwiperSlider verwenden und habe dazu schon die Twig Templates für die Gallery vorbereitet, um das DIV swiper-slide um das IMG zu legen.
Leider habe ich noch nicht rausgefunden, wo ich das DIV content-gallery entnehmen kann, das die Gallery umschließt.

Vom content_element/gallery.html.twig habe ich eine Kopie gallery_default_slider.html.twig angelegt in dem die IMGs in der Schleife das DIV swiper-slide bekommen.

Ist das DIV content-gallery in Twig Template gallery oder gallery_list zu entnehmen und wie kann es entnommen werden ?

Viele Grüße
Markus

[Spooky]

Du darfst nicht von _base bzw. von gallery vererben lassen und dann nur den content Block überschreiben. Weil so hast du ja dann den Wrapper geerbt.

Btw. anstatt nochmal ein <div class="swiper-slide"> anzulegen könntest du stattdessen auch dem <figure> die Klasse hinzufügen.

[mschindler]

Hast du dazu ein gallery.html.twig Template um uns das mal zu zeigen ?

[derRenner]

lege dir zwei neue Templates an:

/templates/content_element/gallery/slider-gallery.html.twig
/templates/content_element/swiper/gallery-slider.html.twig

Inhalt /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.



Inhalt /gallery-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,

Mag sein, dass es elegantere Lösungen gibt. Und ich hoffe, dass ich die korrekten Passagen herausgenommen habe . Denn ich habe das in einem etwas stärker angepassten Twig Template am Laufen.

[mschindler]

Danke Bernhard !

Läuft perfekt für den Anwendungsfall.

[mschindler]

Im Backend werden mir die Bilder aus der Gallery noch in der Größe vom BildSet angezeigt.

Hast du für die Backend-Ansicht ein eigenes be_ Template angelegt, damit die Bilder kleiner angezeigt werden ?

Für RockSolid Elemente hatte ich dazu folgenden Abschnitt verwendet.

<?php if ($image = $this->arrData['getImageObject']($this->image, array(180, ''))): ?>
<img src="<?php echo $image->src ?>" style="margin-top: 5px;padding: 0;">
<?php endif ?>

Bernhard hast du dazu auch eine Lösung erarbeitet ?

[mschindler]

Zur Ergänzung von dem Template gallery-slider.html.twig für die Pfeile und Pagination kann vor dem letzten DIV der HTML Teil eingefügt werden.

<button type="button" class="swiper-button-prev"></button>
<button type="button" class="swiper-button-next"></button>
<div class="swiper-pagination"></div> 

Damit stehen die NavPfeile und die Pagination zur Verfügung.