aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/templates/field/responsive-image.html.twig

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