responsive-image.html.twig in Image Lazy Loader 8

Theme override of a responsive image.

Available variables:

• sources: The attributes of the <source> tags for this <picture> tag.
• img_element: The controlling image, with the fallback image in srcset.
• output_image_tag: Whether or not to output an <img> tag instead of a <picture> tag.

See also

template_preprocess()

template_preprocess_responsive_image()

File

templates/responsive-image.html.twig

{#
/**
 * @file
 * Theme override of a responsive image.
 *
 * Available variables:
 * - sources: The attributes of the <source> tags for this <picture> tag.
 * - img_element: The controlling image, with the fallback image in srcset.
 * - output_image_tag: Whether or not to output an <img> tag instead of a
 *   <picture> tag.
 *
 * @see template_preprocess()
 * @see template_preprocess_responsive_image()
 */
#}
{% if output_image_tag %}
  {{ img_element }}
{% else %}
  <picture {{ attributes }} data-alt="{{ img_element['#alt'] }}">
  {% if sources %}
      {#
      Internet Explorer 9 doesn't recognise source elements that are wrapped in
      picture tags. See http://scottjehl.github.io/picturefill/#ie9
      #}
      <!--[if IE 9]><video style="display: none;"><![endif]-->
      {% for source_attributes in sources %}
        <source{{ source_attributes }}/>
      {% endfor %}
      <!--[if IE 9]></video><![endif]-->
    {% endif %}
    {# The controlling image, with the fallback image in srcset. #}
    {# Lozad specifies you shouldn't add the <img> element in order for the plugin to work,
       see: https://apoorv.pro/lozad.js/#example-with-picture-tag
     #}
    {% if not is_lazy %}
      {{ img_element }}
    {% endif %}
  </picture>
{% endif %}