Image

id: w-c-8
figma

Mostly set props

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
    native_lazyload: true,
    srcset: [
      "https://placehold.co/640x480 1x",
      "https://placehold.co/1280x960 2x",
    ],
    sources: [
      {
        srcset: "https://placehold.co/375x375",
        media: "(max-width: 375px)",
        type: "image/webp"
      },
      {
        srcset: "https://placehold.co/400x400",
        media: "(min-width: 480px) and (max-width: 999px)",
      }
    ]
  }
} %}

          <div class="img u-posr overflow-hidden">
  <picture>
          <source srcset="https://placehold.co/375x375" type="image/webp" media="(max-width: 375px)"><source srcset="https://placehold.co/400x400" media="(min-width: 480px) and (max-width: 999px)">    
    <img src="https://placehold.co/640x480" alt="alt of image" width="640" height="480" loading="lazy" draggable="false" srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

Native lazyloading

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    native_lazyload: true,
  }
} %}

          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="https://placehold.co/640x480" alt="" loading="lazy" draggable="false">
  </picture>
</div>

Srcset

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    srcset: [
      "https://placehold.co/640x480 1x",
      "https://placehold.co/1280x960 2x",
    ]
  }
} %}

          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

set With and height

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
  }
} %}

          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="alt of image" width="640" height="480" draggable="false">
  </picture>
</div>

With extra class for JS or specific component

        {% include "@Components/img/img.twig" with {props: {
    extra_class: "i-post__image",
    src: "https://placehold.co/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
    srcset: [
      "https://placehold.co/640x480 1x",
      "https://placehold.co/1280x960 2x",
    ]
  }
} %}

          <div class="img u-posr overflow-hidden    i-post__image">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="alt of image" width="640" height="480" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

Ratio 3:2

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    ratio: "3-2",
  }
} %}

          <div class="img u-posr overflow-hidden   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" draggable="false">
  </picture>
</div>

Ratio 4:3

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    ratio: "4-3",
  }
} %}

          <div class="img u-posr overflow-hidden   --ratio-4-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" draggable="false">
  </picture>
</div>

Ratio 16:9

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x480",
    ratio: "16-9",
  }
} %}

          <div class="img u-posr overflow-hidden   --ratio-16-9">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" draggable="false">
  </picture>
</div>

Ratio 1:1

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x640",
    ratio: "1-1",
  }
} %}

          <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x640" alt="" draggable="false">
  </picture>
</div>

Contain

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x320",
    ratio: "1-1",
    objectfit: "contain",
    is_placeholder: true,
  }
} %}

          <div class="img u-posr overflow-hidden --contain --placeholder --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x320" alt="" draggable="false">
  </picture>
</div>

Cover

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x320",
    ratio: "1-1",
    objectfit: "cover",
    is_placeholder: true,
  }
} %}

          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x320" alt="" draggable="false">
  </picture>
</div>

With placeholder

        {% include "@Components/img/img.twig" with {props: {
    src: "https://placehold.co/640x320",
    ratio: "1-1",
    objectfit: "cover",
    is_placeholder: true,
  }
} %}

          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x320" alt="" draggable="false">
  </picture>
</div>