responsive media template override for drupal

responsive.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()
 */
#}

{% 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 }}">
    {# Lazyload image #}
    <object data="{{ img_element['#uri'] }}" type="image/jpeg" class="responsive-media__placeholder js-img-placeholder">{{ 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 %}