bootstrap-basic-image-gallery.html.twig in Bootstrap Basic Image Gallery 8

Default implementation for bootstrap basic image gallery.

Available variables:

• main: main image.
• thumbnails: thumbnail images.
• lazyload: the class for lazyloading.
• modal: array containing variables for rendering the modal
• carousel: array containing variables for rendering the carousel

1 theme call to bootstrap-basic-image-gallery.html.twig

BootstrapBasicImageGalleryFormatter::viewElements in src/Plugin/Field/FieldFormatter/BootstrapBasicImageGalleryFormatter.php

Builds a renderable array for a field value.

File

templates/bootstrap-basic-image-gallery.html.twig

{#
/**
 * @file
 * Default implementation for bootstrap basic image gallery.
 *
 * Available variables:
 * - main: main image.
 * - thumbnails: thumbnail images.
 * - lazyload: the class for lazyloading.
 * - modal: array containing variables for rendering the modal
 * - carousel: array containing variables for rendering the carousel
 *
 * @ingroup themeable
 */
#}

<div class="bootstrap-basic-image-gallery">

  <div class="main-image" data-toggle="modal" data-slide-to="0" data-target="#{{ modal.id }}">{{ main }}</div>

  {% if thumbnails.images|length > 1 %}
    <div class="thumbnails">
      {% for key,image in thumbnails.images %}
        <div class="thumb {{ thumbnails.class }}" style="width:{{ thumbnails.width }}%;" data-toggle="modal" data-slide-to="{{ key }}" data-target="#{{ modal.id }}">
          {{ image }}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="modal fade carousel slide {{ lazyload }}" id="{{ modal.id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal.id }}-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="{{ modal.id }}-title">{{ modal.label }}</h5>
          <button class="close btn btn-default" data-dismiss="modal" value="&times;"><span aria-hidden="true">×</span></button>
        </div>

        <div class="modal-body">
          <div id="{{ carousel.id }}" class="carousel slide {{ lazyload }}" data-interval="{{ carousel.interval }}" data-ride="{{ carousel.autoplay }}">

            <div class="carousel-inner" role="listbox">
              {% for key,carousel_image in carousel.images %}
                <div class="carousel-item item slide-{{key}} {% if loop.first %}active{% endif %}">
                  {{ carousel_image }}
                  <div class="carousel-caption">{{ attribute(carousel_image, '#caption') }}</div>
                </div>
              {% endfor %}

              {% if thumbnails.images|length > 1 %}
              <a class="carousel-control-prev left carousel-control" href="#{{ carousel.id }}" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon icon-prev"></span>
                <span class="sr-only">{% trans %}Previous{% endtrans %}</span>
              </a>
              <a class="carousel-control-next right carousel-control" href="#{{ carousel.id }}" role="button" data-slide="next">
                <span class="carousel-control-next-icon icon-next"></span>
                <span class="sr-only">{% trans %}Next{% endtrans %}</span>
              </a>
              {% endif %}
            </div>

            {% if thumbnails.images|length > 1 %}
            <ol class="carousel-indicators">
              {% for index in 0..(carousel.images|length -1) %}
                <li data-target="#{{ carousel.id }}" data-slide-to="{{ index }}" class="{% if loop.first %}active{% endif %}"></li>
              {% endfor %}
            </ol>
            {% endif %}

          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal" value="Close">{% trans %}Close{% endtrans %}</button>
        </div>
      </div>
    </div>
  </div>

</div>