You are here

responsive-image.html.twig in Drupal 10

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.

File

core/modules/responsive_image/templates/responsive-image.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation 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. * @ingroup themeable
  16. */
  17. #}
  18. {% if output_image_tag %}
  19. {{ img_element }}
  20. {% else %}
  21. <picture>
  22. {% if sources %}
  23. {% for source_attributes in sources %}
  24. <source{{ source_attributes }}/>
  25. {% endfor %}
  26. {% endif %}
  27. {# The controlling image, with the fallback image in srcset. #}
  28. {{ img_element }}
  29. </picture>
  30. {% endif %}

Related topics