One or Multiple: a Bootstrap Carousel from a multiple-value Drupal field

Building on last week’s Paragraphs carousel, here’s how to drive a Bootstrap Carousel from a multiple-value Drupal field, a useful pattern when a single field (like a Featured Image field) needs to do double duty as the page hero and an Open Graph image.

The problem

You have a field that allows multiple values. Sometimes there’s one value, sometimes there are several. When there’s one, you want a static image. When there are several, you want a carousel. The challenge: a single Twig template to handle both cases.

The Twig approach

The key is checking the item count in the field array before deciding which markup to output:

{% set items = field_images %}
{% if items|length > 1 %}
  {# Carousel markup #}
  <div id="carousel-{{ entity.id }}" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      {% for key, item in items %}
        <li data-target="#carousel-{{ entity.id }}" data-slide-to="{{ key }}"
            class="{{ key == 0 ? 'active' : '' }}"></li>
      {% endfor %}
    </ol>
    <div class="carousel-inner">
      {% for key, item in items %}
        <div class="item {{ key == 0 ? 'active' : '' }}">
          {{ item }}
        </div>
      {% endfor %}
    </div>
  </div>
{% else %}
  {# Single image #}
  {{ items[0] }}
{% endif %}

Why this matters for Open Graph

If your Featured Image field is also the OG image source, you only want the first image to be the OG tag, regardless of how many are in the field. Handle this in your html.html.twig by grabbing field_images[0] directly, bypassing the carousel template entirely.

This keeps your structured metadata clean while still giving editors a flexible carousel on the page.