D.School Component Library

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>
 
{% set base_class = picture.base_class|default('o-picture') %}
{% if image.src %}
  <picture class="{{ bem(base_class, picture.element, picture.modifiers, picture.extra) }}" {{ attributes(picture.attributes) }}>
    {% if image.sources %}
      {% for attributes in image.sources %}
        <source {{ attributes(attributes) }}>
      {% endfor %}
    {% endif %}
    {% include "@image" with image %}
  </picture>
{% endif %}
 
{
  "image": {
    "sources": [
      {
        "media": "(min-width: 768px)",
        "srcset": "https://picsum.photos/960/720"
      },
      {
        "media": "(min-width: 480px)",
        "srcset": "https://picsum.photos/768/675"
      }
    ],
    "src": "https://picsum.photos/480/480",
    "alt": "Alt text"
  }
}

No notes defined.