responsive-image.html.twig

{#
/**
 * @file
 * 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.
 *
 * @see template_preprocess()
 * @see template_preprocess_responsive_image()
 */
#}

 {#
   - modifier-class: will generate a class name with the name of responsive image being used.
     This will be needed to create styles which will accurately define required placeholders sizes.
     See responsive-media.scss
  #}
 {% set modifier_class = ('responsive-media--' ~ responsive_image_style_id|replace({'__' : '-'}))|clean_class %}
 {% if output_image_tag %}
     {{ img_element }}
 {% else %}
     <div class="responsive-media {{ modifier_class }}">
         <!-- Show lqip until real image loads -->
         <!-- Object used because it can show a label in case something goes wrong. -->
         <object class="responsive-media__lqip" data="{{ lqip }}" type="image/jpeg">{{ img_element['#alt'] }}</object>
         <picture class="responsive-media__picture">
             {% if sources %}
                 {#
                 Internet Explorer 9 doesn't recognise source elements that are wrapped in
                 picture tags. See http://scottjehl.github.io/picturefill/#ie9
                 #}
                 <!--[if IE 9]><video style="display: none;"><![endif]-->
                 {% for source_attributes in sources %}
                     <source{{ source_attributes }}/>
                 {% endfor %}
                 <!--[if IE 9]></video><![endif]-->
             {% endif %}
             {# The controlling image, with the fallback image in srcset. #}
             {{ img_element }}
         </picture>
     </div>
 {% endif %}