Site building: update Carousel and Carousel item patterns

Created on 20 January 2023, over 1 year ago
Updated 24 January 2023, over 1 year 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.69.0 2024