responsive images in Blogpost

themes/bluewater/layouts/_default/_markup/render-image.html

@@ -1,13 +1,33 @@
 {{- $image := .Page.Resources.GetMatch .Destination -}}
 {{- if $image -}}
-{{ $image_resize := $image.Resize "1024x webp q80" }}
+{{ $tiny := $image.Resize "500x webp q80" }}
+{{ $small := $image.Resize "800x webp q80" }}
+{{ $medium := $image.Resize "1200x webp q80" }}
+{{ $large := $image.Resize "1500x webp q80" }}
 
-<div class="flex justify-center">
+{{ $classes := ""}}
+{{ if gt $image.Height $image.Width }}
+ {{ $classes = "mx-12 md:mx-32"}}
+{{ else }}
+ {{ $classes = "mx-4 md:mx-12"}}
+{{ end }}
+
+<div class="flex justify-center {{ print $classes }}">
   <a href="{{- $image.RelPermalink -}}">
-    <img loading="lazy" src="{{ $image_resize.RelPermalink }}" alt="{{ .Text }}" class="max-h-96">
+
+    <picture>
+      <source media="(max-width: 376px)" 
+          srcset="{{ $tiny.RelPermalink }}">
+      <source media="(max-width: 992px)" 
+          srcset="{{ $small.RelPermalink }}">
+      <source media="(max-width: 1400px)" 
+          srcset="{{ $medium.RelPermalink }}">
+      <source media="(min-width: 1401px)" 
+          srcset="{{ $large.RelPermalink }}">
+      <img 
+        alt="{{ .Text }}" src="{{ $image.RelPermalink }}" 
+        height="{{ $image.Height}}" width="{{ $image.Width }}">
+    </picture>
   </a>
 </div>
-{{- else -}}
-  <img loading="lazy" class="img-fluid" src="{{ .Destination | safeURL }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }} />
-  <p>Fallback</p>
 {{- end -}}