Site building: update Carousel and Carousel item patterns

Created on 20 January 2023, almost 2 years ago
Updated 24 January 2023, almost 2 years ago

Problem/Motivation

Currently Carousel and Carousel item patterns are not site buidable because for example when using a paragraph field to handle the carousel items. in the carousel pattern:

<div class="carousel-inner">
    {% for slide in slides %}
      {% if loop.first and slide is iterable %}
        {#
        There is currently no recursive merge in Twig or Drupal core Twig.
        So it may breaks if the slide already have #attributes.
        #}
        {% set slide = slide|merge({'#attributes': {'class': ['active']}}) %}
      {% endif %}

      {{ slide }}
    {% endfor %}
  </div>

This will add the "active" class on the entity wrapper. Whereas the carousel-item class will be inside this entity wrapper. And the Bootstrap component needs the active class to be on the same element as the carousel-item one.

Proposed resolution

In pattern-carousel.html.twig:

<div class="carousel-inner">
    {% for slide in slides %}
      {% if loop.first and slide is iterable %}
        {#
        There is currently no recursive merge in Twig or Drupal core Twig.
        So it may breaks if the slide already have #attributes.
        #}
        {% set slide = slide|merge({'#attributes': {'class': ['carousel-item', 'active']}}) %}
      {% elseif slide is iterable %}
        {% set slide = slide|merge({'#attributes': {'class': ['carousel-item']}}) %}
      {% endif %}

      {{ slide }}
    {% endfor %}
  </div>

In pattern-carousel-item.html.twig:

<div{{ attributes }}>
  {{ image }}
  {% if caption %}
    <div class="carousel-caption">
      {{ caption }}
    </div>
  {% endif %}
</div>
🐛 Bug report
Status

Fixed

Version

5.0

Component

User interface

Created by

🇫🇷France Grimreaper France 🇫🇷

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024