blazy.html.twig in Blazy 8.2

Default theme implementation to display a formatted blazy image/media field.

The Blazy supports core image, responsive image and media entity. If iframe switcher is enabled, audio/video iframe will be hidden below image overlay, and only visible when toggled. Otherwise iframe only, and image is emptied.

Important! If you are adding additional contents to any content-related variable here, e.g.: content, overlay, preface, postscript, etc., including icon, be sure to add your own key, normally unique like UUID or module name, to not conflict against, or nullify, other providers, e.g.: Good: postscript.cta, or postscript.widget (This extends postscript) Bad: postscript = cta (This overrides/ nullifies other postscripts with cta)

Available variables:

• captions: An optional renderable array of inline or lightbox captions.
• image: A collection of image data.
• attributes: An array of attributes applied to .media container.
• iframe: A renderable array of iframe with its attributes and SRC.
• settings: An array containing the given settings.
• url: An optional URL the image can be linked to, can be any of audio/video, or entity URLs, when using Colorbox/Photobox, or Link to content options.
• url_attributes: An array of URL attributes, lightbox or content links.
• noscript: The fallback image for non-js users.
• preface: any extra content prefacing the image/ video goes here.
• overlay: any extra content overlaying the image/ video goes here. Both preface and overlay useful to work with layering, z-index. This opens up possibility for blazy-related modules -- Slick, GridStack, etc. to use blazy.html.twig for their slide or item contents, perhaps at 3+.
• postscript: Any extra content to put into blazy goes here.
• content: Various Media entities like Facebook, Instagram, local Video, etc. Basically content is the replacement for (Responsive) image and oEmbed video. This makes it possible to have a mix of Media entities, image and videos on a Blazy Grid, Slick, GridStack, etc. Regular Blazy features are still disabled by default at \Drupal\blazy\BlazyDefault::richSettings() to avoid complication. However you can override them accordingly as needed, such as lightbox for local Video with/o a pre-configured poster image. The #settings are provided under content variables for more work. Originally content is a theme_field() output, trimmed down to bare minimum.

@todo remove media--loading for is-b-loading post sub-module updates.

See also

template_preprocess_blazy()

2 theme calls to blazy.html.twig

BlazyManager::getBlazy in src/BlazyManager.php

Returns the enforced rich media content, or media using theme_blazy().

BlazyManagerUnitTest::testGetBlazy in tests/src/Unit/BlazyManagerUnitTest.php

Tests for \Drupal\blazy\BlazyManager::getBlazy().

File

templates/blazy.html.twig

{#
/**
 * @file
 * Default theme implementation to display a formatted blazy image/media field.
 *
 * The Blazy supports core image, responsive image and media entity.
 * If iframe switcher is enabled, audio/video iframe will be hidden below image
 * overlay, and only visible when toggled. Otherwise iframe only, and image is
 * emptied.
 *
 * Important!
 * If you are adding additional contents to any content-related variable here,
 * e.g.: content, overlay, preface, postscript, etc., including icon, be sure to
 * add your own key, normally unique like UUID or module name, to not conflict
 * against, or nullify, other providers, e.g.:
 * Good: postscript.cta, or postscript.widget (This extends postscript)
 * Bad: postscript = cta (This overrides/ nullifies other postscripts with cta)
 *
 * Available variables:
 *   - captions: An optional renderable array of inline or lightbox captions.
 *   - image: A collection of image data.
 *   - attributes: An array of attributes applied to .media container.
 *   - iframe: A renderable array of iframe with its attributes and SRC.
 *   - settings: An array containing the given settings.
 *   - url: An optional URL the image can be linked to, can be any of
 *       audio/video, or entity URLs, when using Colorbox/Photobox, or Link to
 *       content options.
 *   - url_attributes: An array of URL attributes, lightbox or content links.
 *   - noscript: The fallback image for non-js users.
 *   - preface: any extra content prefacing the image/ video goes here.
 *   - overlay: any extra content overlaying the image/ video goes here. Both
 *       preface and overlay useful to work with layering, z-index. This opens
 *       up possibility for blazy-related modules -- Slick, GridStack, etc. to
 *       use blazy.html.twig for their slide or item contents, perhaps at 3+.
 *   - postscript: Any extra content to put into blazy goes here.
 *   - content: Various Media entities like Facebook, Instagram, local Video,
 *       etc. Basically content is the replacement for (Responsive) image
 *       and oEmbed video. This makes it possible to have a mix of Media
 *       entities, image and videos on a Blazy Grid, Slick, GridStack, etc.
 *       Regular Blazy features are still disabled by default at
 *       \Drupal\blazy\BlazyDefault::richSettings() to avoid complication.
 *       However you can override them accordingly as needed, such as lightbox
 *       for local Video with/o a pre-configured poster image. The #settings
 *       are provided under content variables for more work. Originally
 *       content is a theme_field() output, trimmed down to bare minimum.
 *
 * @see template_preprocess_blazy()
 *
 * @ingroup themeable
 *
 * @todo remove media--loading for is-b-loading post sub-module updates.
 */
#}
{%
  set classes = [
    content ? 'media--rendered',
    settings.bundle ? 'media--bundle--' ~ settings.bundle|clean_class,
    settings.namespace ? 'media--' ~ settings.namespace,
    settings.lazy and settings.use_loading ? 'media--loading is-b-loading',
    settings.media_switch ? 'media--switch media--switch--' ~ settings.media_switch|clean_class,
    settings.player ? 'media--player',
    settings.ratio ? 'media--ratio media--ratio--' ~ settings.ratio,
    settings.responsive_image_style_id ? 'media--responsive',
    settings.type ? 'media--' ~ settings.type,
    settings.classes ? settings.classes|join(' ')|clean_class,
  ]
%}

{% set player %}
  {% block blazy_player %}
    {% if settings.player %}
      <span class="media__icon media__icon--close"></span>
      <span class="media__icon media__icon--play" data-url="{{ settings.embed_url }}"></span>
    {% else %}
      {{- iframe -}}
    {% endif %}
  {% endblock %}
{% endset %}

{% set media %}
  {% block blazy_media %}
    <div{{ attributes.addClass(classes) }}>
      {{- preface -}}
      {{- noscript -}}
      {{- content -}}
      {{- image -}}
      {{- overlay -}}
      {{- player -}}

      {# @todo settings.icon is deprecated in 2.0 and is removed from 3.0. Use icon instead. #}
      {{- settings.icon -}}
      {{- icon -}}
    </div>
  {% endblock %}
{% endset %}

{% set blazy %}
  {% block blazy_content %}
    {% if media_attributes %}<div{{ media_attributes }}>{% endif %}
      {% if url and not settings.player %}
        <a href="{{ url }}"{{ url_attributes }}>{{- media -}}</a>

        {# Allows fieldable captions with A tag, such as social share. #}
        {% if captions and captions.lightbox is not empty %}
          <div class="litebox-caption visually-hidden">
            {{- captions.lightbox -}}
          </div>
        {% endif %}

      {% else %}
        {{- media -}}
      {% endif %}
    {% if media_attributes %}</div>{% endif %}
  {% endblock %}

  {% if captions and captions.inline is defined %}
    {% block blazy_caption %}
      <div{{ caption_attributes }}>
        {% for caption in captions.inline %}
          {% if caption.content %}
            <{{ caption.tag }} {{ caption.attributes }}>{{- caption.content -}}</{{ caption.tag }}>
          {% endif %}
        {% endfor %}
      </div>
    {% endblock %}
  {% endif %}

  {{- postscript -}}

{% endset %}

{% if wrapper_attributes %}
  <div{{ wrapper_attributes }}>
    {{- blazy -}}
  </div>
{% else %}
  {{- blazy }}
{% endif %}