You are here

responsive-image.html.twig in Zircon Profile 8

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. {#
  24. Internet Explorer 9 doesn't recognise source elements that are wrapped in
  25. picture tags. See http://scottjehl.github.io/picturefill/#ie9
  26. #}
  27. <!--[if IE 9]><video style="display: none;"><![endif]-->
  28. {% for source_attributes in sources %}
  29. <source{{ source_attributes }}/>
  30. {% endfor %}
  31. <!--[if IE 9]></video><![endif]-->
  32. {% endif %}
  33. {# The controlling image, with the fallback image in srcset. #}
  34. {{ img_element }}
  35. </picture>
  36. {% endif %}

Related topics