vitrine/layouts/partials/components/image.html

<!--
type: string - default empty
img: image
url: string
alt: string
caption: string
-->
{{ $img := .img }}
{{ if not $img }}
{{ $img = resources.Get .url }}
{{ if not $img }}
{{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
{{ end }}
{{ end }}

{{ if $img }}
{{ $url := $img.RelPermalink }}
{{ $width := $img.Width }}
{{ $height := $img.Height }}
{{ $sizes := slice "320" "640" "960" "1280" }}
{{ $ext := path.Ext $url }}
{{ $name := path.Base (replace $url $ext "") }}
{{ $dir := path.Dir $url }}
{{ $mediaWidthControl := "(min-width: 1240px) 50vw, 70vw" }}

<a href="{{ $url }}">
  <picture>
    {{- if eq hugo.Environment "development" }}
    <img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" src="{{ $url }}" alt="{{ .alt }}"
      loading="lazy" decoding="async">
    {{ else }}
    <source type="image/avif" srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
      {{ end }}
      {{ $url }}.avif {{ $width }}w
    " sizes="{{ $mediaWidthControl }}" />
    <source type="image/webp" srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
      {{ end }}
      {{ $url }}.webp {{ $width }}w
    " sizes="{{ $mediaWidthControl }}" />
    <img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w, 
      {{ end }}
      {{ $url }} {{ $width }}w
    " src="{{ $url }}" alt="{{ .alt }}" loading="lazy" decoding="async">
    {{ end }}
  </picture>
</a>
{{ if .caption }}
<p class="caption">{{ .caption }}</p>
{{ end }}
{{ end }}

{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}