D.School Component Library

Responsive Image 

<img class="o-image" loading="lazy" srcset="https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w" src="https://picsum.photos/480/360" alt="Alt text" />
 
{#
 # 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.
 #}

{% if image.sources %}
  {% include "@picture" %}
{% else %}
  {% include "@image" %}
{% endif %}
 
{
  "image": {
    "srcset": "https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w",
    "src": "https://picsum.photos/480/360",
    "alt": "Alt text",
    "caption": "Caption"
  }
}

No notes defined.