responsive-image.html.twig
Same filename in this branch
Same filename in other branches
- 8.9.x core/themes/stable/templates/field/responsive-image.html.twig
- 8.9.x core/modules/responsive_image/templates/responsive-image.html.twig
- 10 core/themes/stable9/templates/field/responsive-image.html.twig
- 10 core/modules/responsive_image/templates/responsive-image.html.twig
- 11.x core/themes/stable9/templates/field/responsive-image.html.twig
- 11.x core/modules/responsive_image/templates/responsive-image.html.twig
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_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
View source
- {#
- /**
- * @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 %}
- {% for source_attributes in sources %}
- <source{{ source_attributes }}/>
- {% endfor %}
- {% endif %}
- {# The controlling image, with the fallback image in srcset. #}
- {{ img_element }}
- </picture>
- {% endif %}
Related topics
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.