Den Contao Slider mit der Galerie und Twig Templates erstellen

Question

Den Contao Slider mit der Galerie und Twig Templates erstellen

Accepted Answer

Für den Wrapper benötigt ihr eine Kopie vom Swiper Slider swiper.html.twig das wird unter templates/content_element/swiper/gallery-slider.html.twig umbenannt angelegt.

Das Twig Galerie Template wird auch als Kopie unter templates/content_element/gallery/gallery_default_slider.html.twig umbenannt abgelegt.

Angepasste Contao Twig Templates für den Slider und die Galerie

Folgender Inhalt kommt in die Contao-Twig Templates für den Slider und die Galerie rein.

Das angepasste Twig Template für den Slider

{% 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 class="swiper-pagination"></div>
  </div>
    <button type="button" class="swiper-button-prev"></button>
    <button type="button" class="swiper-button-next"></button>



{% endblock %}

Das angepasste Twig Template für die Galerie

{% 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 %}
        <div class="swiper-slide"{% block list_item_attributes %}{{ attrs(list.item_attributes|default) }}{% endblock %}>
            {% block list_item %}
                {% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
            {% endblock %}
        </div>
    {% endfor %}

{% endblock %}

Dann legt ihr einen Contao Slider einer Seite an und nutzt das neue Inhaltselement-Template und auch für die Galerie.

Damit die neuen Twig Templates geladen werden ist das löschen vom Contao Symfony Cache nötig. Alternativ könnt ihr auch im Backend auf Debug-Modus schalten, um im gleichen Browser die Änderungen zu sehen.