feat: look up modern formats for thumbnails and featured images

razonyang · Mar 28, 2022 · 7af2df3 · 7af2df3
1 parent dcb756c
commit 7af2df3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/layouts/partials/post/featured-image.html b/layouts/partials/post/featured-image.html
@@ -1,6 +1,17 @@
 {{- if default false .Site.Params.post.featuredImage -}}
   {{- if .Params.images -}}
-    <img class="post-featured-img w-100 mb-3" alt="{{ .Title }}" src="{{ index .Params.images 0 | absURL  }}" loading="lazy"/>
+    {{- $formats := slice "avif" "webp" "jxl" -}}
+    <picture>
+      {{- $img := index .Params.images 0 -}}
+      {{- $ext := $img | path.Ext }}
+      {{- range $formats -}}
+        {{- $filename := replace $img $ext (printf ".%s" .) -}}
+        {{- if and (not (strings.HasSuffix $ext .)) (fileExists (path.Join "static" $filename)) -}}
+          <source srcset="{{ $filename | absURL }}" type="image/{{ . }}" />
+        {{- end -}}
+      {{- end -}}
+      <img class="post-featured-img w-100 mb-3" alt="{{ .Title }}" src="{{ $img | absURL  }}" loading="lazy"/>
+    </picture>
   {{- else -}}
     {{- $images := .Resources.ByType "image" -}}
     {{- $featured := $images.GetMatch "*feature*" -}}

diff --git a/layouts/partials/post/thumbnail.html b/layouts/partials/post/thumbnail.html
@@ -1,5 +1,16 @@
 {{ if .Params.images }}
-  <img class="img-fluid" alt="{{ .Title }}" src="{{ index .Params.images 0 | absURL  }}" loading="lazy"/>
+  {{- $formats := slice "avif" "webp" "jxl" -}}
+  <picture>
+  {{- $img := index .Params.images 0 -}}
+  {{- $ext := $img | path.Ext }}
+  {{- range $formats -}}
+    {{- $filename := replace $img $ext (printf ".%s" .) -}}
+    {{- if and (not (strings.HasSuffix $ext .)) (fileExists (path.Join "static" $filename)) -}}
+      <source srcset="{{ $filename | absURL }}" type="image/{{ . }}" />
+    {{- end -}}
+  {{- end -}}
+    <img class="img-fluid" alt="{{ .Title }}" src="{{ $img | absURL  }}" loading="lazy"/>
+  </picture>
 {{- else -}}
   {{- $images := .Resources.ByType "image" -}}
   {{- $featured := $images.GetMatch "*feature*" -}}