D.School Component Library

Responsive Image: Picture 

<picture class="o-picture">
    <source media="(min-width: 768px)" srcset="https://picsum.photos/960/720">
    <source media="(min-width: 480px)" srcset="https://picsum.photos/768/675">
    <img class="o-image" loading="lazy" src="https://picsum.photos/480/480" alt="Alt text" />
</picture>
 
{#
 # 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": false,
    "src": "https://picsum.photos/480/480",
    "alt": "Alt text",
    "caption": "Caption",
    "sources": [
      {
        "media": "(min-width: 768px)",
        "srcset": "https://picsum.photos/960/720"
      },
      {
        "media": "(min-width: 480px)",
        "srcset": "https://picsum.photos/768/675"
      }
    ]
  }
}

No notes defined.