From d8150fd68a08d3d6f1590b1ff98abd5733ac051f Mon Sep 17 00:00:00 2001
From: Christian Engel <christian.Engel@wheregroup.com>
Date: Thu, 25 Aug 2022 18:11:14 +0200
Subject: [PATCH] Add responsive image rendering

---
 layouts/_default/_markup/render-image.html | 63 ++++++++++++++++++----
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index c8ade30..b471515 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,14 +1,57 @@
-{{ if .Title }}
+{{ $image := .Page.Resources.GetMatch .Destination }}
+{{ $alt := .Title | default .Text }}
+
+{{ $tinyw := default "500x webp" }}
+{{ $smallw := default "800x webp" }}
+{{ $mediumw := default "1200x webp" }}
+{{ $largew := default "1500x webp" }}
+
+{{ $data := newScratch }}
+{{ $data.Set "tiny" ($image.Resize $tinyw) }}
+{{ $data.Set "small" ($image.Resize $smallw) }}
+{{ $data.Set "medium" ($image.Resize $mediumw) }}
+{{ $data.Set "large" ($image.Resize $largew) }}
+
+{{ $tiny := $data.Get "tiny" }}
+{{ $small := $data.Get "small" }}
+{{ $medium := $data.Get "medium" }}
+{{ $large := $data.Get "large" }}
+
+
+<a href="{{ $image.RelPermalink }}">
   <figure>
-    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
+    <picture>
+      <source
+        media="(max-width: 376px)"
+        srcset="{{ with $tiny.RelPermalink }}{{ . }}{{ end }}"
+      />
+
+      <source
+        media="(max-width: 992px)"
+        srcset="{{ with $small.RelPermalink }}{{ . }}{{ end }}"
+      />
+
+      <source
+        media="(max-width: 1400px)"
+        srcset="{{ with $medium.RelPermalink }}{{ . }}{{ end }}"
+      />
+
+      <source
+        media="(min-width: 1600px)"
+        srcset="{{ with $large.RelPermalink }}{{ . }}{{ end }}"
+      />
+
+      <img
+        alt="{{ $alt }}"
+        title="{{ $alt }}"
+        src="{{ $image }}"
+        height="{{ $image.Height }}"
+        width="{{ $image.Width }}"
+        loading="lazy"
+      />
+    </picture>
     <figcaption class="text-sm italic">
-      {{ if .Title }}
-        {{ .Title | $.Page.RenderString }}
-      {{ else }}
-        {{ .Text | $.Page.RenderString }}
-      {{ end }}
+      {{ $alt | $.Page.RenderString }}
     </figcaption>
   </figure>
-{{ else }}
-  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
-{{ end }}
+</a>