Crear Bootstrap Slideshow en Twig con Paragraphs

Instrucciones
  1. Instalamos el módulo ImageWidgetCrop que nos permitirá crear varios estilos para una misma imagen
     
  2. Creamos un campo imagen que permita añadir múltiples elementos
     
  3. Creamos los estilos y los Crop Styles para cada caso y los configuramos.
     
  4. Asignamos en el formulario del tipo de contenido, en el campo de las imágenes los estilos para que estén disponibles
     
  5. Ya tendremos bootstrap theme instalado y nuestro subtema creado
     
  6. En la plantilla correspondiente a nuestro tipo de contenido añadimos el código que está debajo
Código
{# Slider#}
<div class="contenedor-slider">
        {% if content.field_slideshow_de_fondo|render %}
             <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                  <ol class="carousel-indicators">
                         {% for key, item in content.field_slideshow_de_fondo if key|first != '#' %}
                             <li class="{% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#myCarousel"></li> //Agrega el ACTIVE al primer elemento
                         {% endfor %}
                    </ol>
                   <!-- Wrapper for slides -->
                     <div class="carousel-inner">
                        {% for key, item in content.field_slideshow_de_fondo['#items'] if key|first != '#' %}
                             <div id="{{ key + 1 }}" class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %} active{% endif %}">
                                   <picture>
                                       <source media="(max-width: 414px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_movil')) }}"> // Nos permite acceder a la url de la imagen con el estilo aplicado
                                       <source media="(max-width: 768px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_tablet')) }}">
                                       <source media="(max-width: 1023px)" srcset="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}">
                                       <source srcset="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}">
                                       <img src="{{ file_url(item.entity.uri.value|image_style('estilo_escritorio')) }}" alt=""> //Selecciona la imagen correcta según el dispositivo
                                  </picture>
                                </div>
                           {% endfor %}
                        </div>
               </div>
          {% endif %}
</div>
Copiar

Snippet relacionados