responsive-image.html.twig

Same filename in this branch
  1. 9 core/themes/stable9/templates/field/responsive-image.html.twig
  2. 9 core/modules/responsive_image/templates/responsive-image.html.twig
Same filename in other branches
  1. 8.9.x core/themes/stable/templates/field/responsive-image.html.twig
  2. 8.9.x core/modules/responsive_image/templates/responsive-image.html.twig
  3. 10 core/themes/stable9/templates/field/responsive-image.html.twig
  4. 10 core/modules/responsive_image/templates/responsive-image.html.twig
  5. 11.x core/themes/stable9/templates/field/responsive-image.html.twig
  6. 11.x core/modules/responsive_image/templates/responsive-image.html.twig

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()

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/themes/stable/templates/field/responsive-image.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override of a responsive image.
  5. *
  6. * Available variables:
  7. * - sources: The attributes of the <source> tags for this <picture> tag.
  8. * - img_element: The controlling image, with the fallback image in srcset.
  9. * - output_image_tag: Whether or not to output an <img> tag instead of a
  10. * <picture> tag.
  11. *
  12. * @see template_preprocess()
  13. * @see template_preprocess_responsive_image()
  14. */
  15. #}
  16. {% if output_image_tag %}
  17. {{ img_element }}
  18. {% else %}
  19. <picture>
  20. {% if sources %}
  21. {% for source_attributes in sources %}
  22. <source{{ source_attributes }}/>
  23. {% endfor %}
  24. {% endif %}
  25. {# The controlling image, with the fallback image in srcset. #}
  26. {{ img_element }}
  27. </picture>
  28. {% endif %}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.