responsive-image.html.twig

Same filename in this branch
  1. 8.9.x core/themes/stable/templates/field/responsive-image.html.twig
Same filename in other branches
  1. 9 core/themes/stable9/templates/field/responsive-image.html.twig
  2. 9 core/themes/stable/templates/field/responsive-image.html.twig
  3. 9 core/modules/responsive_image/templates/responsive-image.html.twig
  4. 10 core/themes/stable9/templates/field/responsive-image.html.twig
  5. 10 core/modules/responsive_image/templates/responsive-image.html.twig
  6. 11.x core/themes/stable9/templates/field/responsive-image.html.twig
  7. 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()

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


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