ixm_blocks-1.0.x-dev/modules/ixm_blocks_carousel/templates/block--ixm-blocks-carousel.html.twig

{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{%
  set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
]
%}

{% set carousel_id = 'carousel-' ~ configuration['block_revision_id'] %}

<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>

  {{ title_prefix }}
  {% if label %}
    <h3{{ title_attributes.addClass('mb-5') }}>{{ label }}</h3>
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    <div id="{{ carousel_id }}" class="carousel slide" data-bs-ride="carousel">

      {# indicators #}
      {% if content.field_entity_reference_paragraph %}
      <div class="carousel-indicators">
        {% for key, item in content.field_entity_reference_paragraph|filter((value, key) => key|first != '#') %}
          <button type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="active" {% if loop.first %} aria-current="true" {% endif %} aria-label="Slide {{ loop.index }}"></button>
        {% endfor %}
      </div>
      {% endif %}

      {# carousel items #}
      <div class="carousel-inner">

        {% if content.field_entity_reference_paragraph %}
          {% for key, item in content.field_entity_reference_paragraph|filter((value, key) => key|first != '#') %}
            {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}

            {# Setup our image style. #}
            {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #}
            {% if item['#paragraph'].field_media_element.0.entity.image.entity.uri.value %}
              {# lightning_media_image 8.x-3x source_field: [image] #}
              {% set media_image = item['#paragraph'].field_media_element.0.entity.image.entity.uri.value %}
              {% set image_alt = item['#paragraph'].field_media_element.0.entity.image.0.alt %}
            {% elseif item['#paragraph'].field_media_element.0.entity.field_media_image.entity.uri.value %}
              {# lightning_media_image 8.x-4x source_field: [field_media_image] #}
              {% set media_image = item['#paragraph'].field_media_element.0.entity.field_media_image.entity.uri.value %}
              {% set image_alt = item['#paragraph'].field_media_element.0.entity.field_media_image.0.alt %}
            {% endif %}

            {% if media_image %}
              {% set image = file_url(media_image|image_style('large')) %}
            {% endif %}

            <div class="carousel-item {% if loop.first %} active{% endif %}">

            {% if image %}
              <img src="{{ image }}" class="d-block w-100" alt="{{ image_alt }}">
            {% else %}
              <svg class="carousel-placeholder-img d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Slide {{ loop.index }}" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>{{ 'Placeholder'|t }}</title>
                <rect width="100%" height="100%" fill="#555"></rect>
              </svg>
            {% endif %}

            <div class="carousel-caption d-none d-md-block">

              {% if item['#paragraph'].field_title %}
                <h5 id="heading-{{ safe_hash }}">
                  {{ item['#paragraph'].field_title.value }}
                </h5>
              {% endif %}

              {% if item['#paragraph'].field_body %}
                <p>{{ item['#paragraph'].field_body.value|raw }}</p>
              {% endif %}

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

      {# prev #}
      <button class="carousel-control-prev" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">{{ 'Previous'|t }}</span>
      </button>

      {# next #}
      <button class="carousel-control-next" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">{{ 'Next'|t }}</span>
      </button>

    </div>
  {% endblock %}

</div>