You are here

responsive-image.html.twig in Drupal 10

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.

File

core/themes/stable9/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 %}