MVP

layouts/partials/components/image.html

@@ -0,0 +1,56 @@
+<!--
+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) 50px, 70vw" }}
+
+<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>
+{{ if .caption }}
+<p class="caption">{{ .caption }}</p>
+{{ end }}
+{{ end }}
+
+{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}