responsive-image.html.twig in Zircon Profile 8

Default theme implementation 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()

1 theme call to responsive-image.html.twig

ResponsiveImage::getInfo in core/modules/responsive_image/src/Element/ResponsiveImage.php

Returns the element properties for this element.

File

core/modules/responsive_image/templates/responsive-image.html.twig

{#
/**
 * @file
 * Default theme implementation 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()
 *
 * @ingroup themeable
 */
#}
{% if output_image_tag %}
  {{ img_element }}
{% else %}
  <picture>
    {% 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. #}
    {{ img_element }}
  </picture>
{% endif %}

Related topics

Theme system overview

Functions and templates for the user interface that themes can override.