lory-8.x-1.x-dev/templates/lory.html.twig

templates/lory.html.twig
{#
/**
 * @file
 * Default theme implementation for the Lory carousel template.
 *
 * This template holds 3 displays: main, thumbnail and overlay lorys in one.
 * Arrows are enforced, but toggled by JS accordingly. This allows responsive
 * object to enable and disable it as needed without losing context.
 *
 * To understand what this template does, open `@blazy/blazy.html.twig`.
 * The blazy.html.twig (_BLAZY_) contains image, lightbox, caption and video.
 * All image/video-related functionality is done by _BLAZY_.
 *
 * The lory.html.twig makes use of what _BLAZY_ offers, and put them all
 * into `item.slide` variable including image captions.
 * In this case, `item.caption` section below is _NOT_ in use.
 *
 * On the other hand, if it is a Lory Views, or fieldable entity like Lory Media
 * with various field details, in which case we can not simply put captions into
 * _BLAZY_, then `item.caption` section here are in use.
 *
 * If it contains Vanilla, or Lory Text, only `item.slide` is respected.
 *
 * Available variables:
 * - items: The array of items containing main image/video/audio, optional
 *     image/video/audio overlay and captions, and optional thumbnail
 *     texts/images.
 *     Each item contains:
 *     - slide: Used by all, including vanilla formatters without field details
 *         also nav (thumbnails).
 *         If you need to override Lory Image caption, do it at blazy.html.twig,
 *         not here.
 *     - caption: Used by Lory Views, Lory Media, those with field details.
 *         If you need to override caption, do that here, not _BLAZY_.
 *         E.g.: Lory Image which uses _BLAZY_ does't use this caption.
 * - settings: A cherry-picked settings that mostly defines the slide HTML or
 *     layout, or layout-related JS settings/options.
 * - attributes: The array of attributes to hold the main container classes, id,
 *     and [data-lory] containing JSON object aka JS settings the Lory expects
 *     to override default options. We don't store these JS settings in the
 *     normal <head>, but inline within data-lory attribute instead.
 * - content_attributes: The array of attributes to hold UL container.
 *
 * Debug:
 * @see https://www.drupal.org/node/1906780
 * @see https://www.drupal.org/node/1903374
 * Use Kint: {{ kint(variable) }}
 * Dump all available variables and their contents: {{ dump() }}
 * Dump only the available variable keys: {{ dump(_context|keys) }}
 */
#}
{%
  set classes = [
    'lory',
    settings.count == 1 ? 'delory',
    settings.attributes.class ? settings.attributes.class|join(' '),
    settings.optionset ? 'lory--optionset--' ~ settings.optionset|clean_class,
    settings.skin ? 'lory--skin--' ~ settings.skin|clean_class,
    'boxed-' in settings.skin ? 'lory--skin--boxed',
    'split-' in settings.skin ? 'lory--skin--split',
    settings._layout ? 'lory--' ~ settings._layout,
    settings.asNavFor ? 'lory--' ~ settings.display,
    settings.arrowDown ? 'is-arrow-down',
    settings.adaptiveHeight ? 'is-adaptive-height',
    settings.autoplay ? 'is-autoplay',
    settings.centerMode is empty ? 'is-left',
    settings.dots ? 'is-dots',
    settings.enableMouseEvents ? 'is-draggable',
    settings.focusOnSelect ? 'is-selectable',
    settings.vertical ? 'is-vertical',
    settings.animation ? 'is-animation',
    settings.transition ? 'is-transition',
  ]
%}
{%
  set content_classes = [
    'lory__track',
    settings._layout == 'grid' and settings.infinite > 1 ? 'is-grid is-grid--' ~ settings.infinite,
  ]
%}
{% set controls %}
  <nav class="lory__arrows visually-hidden">
    <button class="lory__prev">{{ 'Prev'|t }}</button>
    {% if settings.arrowDown and settings.display == 'main' %}
      <button class="lory__down jumper" data-target="{{ settings.arrowDown }}">{{ 'Scroll Down'|t }}</button>
    {% endif %}
    <button class="lory__next">{{ 'Next'|t }}</button>
  </nav>
  <ul class="lory__dots visually-hidden"></ul>
{% endset %}
{%
  set item_classes = [
    'lory__slide',
    'slide',
  ]
%}
{% spaceless %}
<div{{ attributes.addClass(classes) }}>
  <div class="lory__frame">
    <ul{{ content_attributes.addClass(content_classes) }}>
      {% for delta, item in items %}
        <li{{ item.attributes.addClass(item_classes) }}>
          <div class="slide__content">

            {# Used by all formatters, and Views. #}
            {{ item.slide }}

            {# Used by Lory Views, Lory Media, those with field details. #}
            {% if item.caption %}
              <div class="slide__caption">
                {% if item.caption.overlay %}
                  <div class="slide__overlay">{{ item.caption.overlay }}</div>
                {% endif %}

                {% if item.caption.title %}
                  <h2 class="slide__title">{{ item.caption.title }}</h2>
                {% endif %}

                {% if item.caption.data %}
                  <div class="slide__data">{{ item.caption.data }}</div>
                {% endif %}

                {% if item.caption.link %}
                  <div class="slide__link">{{ item.caption.link }}</div>
                {% endif %}
              </div>
            {% endif %}

          </div>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% if control %} {{ controls }} {% endif %}
</div>
{% endspaceless %}
Главная | Обратная связь
You are here

lory-8.x-1.x-dev/templates/lory.html.twig
