feat: update figure + picture partials for lazysizes support

thuliteio · Jan 29, 2024 · f1a2302 · f1a2302
1 parent fa55453
commit f1a2302
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/layouts/partials/figure.html b/layouts/partials/figure.html
@@ -127,6 +127,7 @@
 {{- $fetchPriority := or .fetchpriority site.Params.hyas_images.defaults.fetchpriority }}
 {{- $loading := or .loading site.Params.hyas_images.defaults.loading }}
 {{- $process := or .process site.Params.hyas_images.defaults.process }}
+{{- $lqip := or .lqip site.Params.hyas_images.defaults.lqip }}
 {{- $src := or .src "" }}
 {{- $title := or .title "" }}
 {{- $caption := or .caption "" }}
@@ -164,17 +165,17 @@
   {{- $r = . }}
 {{- end }}
 
-{{/* Convert to webp. */}}
-{{- $f := site.Params.hyas_images.defaults.format }}
-{{- if eq $f "webp" }}
-  {{- $r = $r.Resize (printf "%dx%d webp" $r.Width $r.Height) }}
-{{- end }}
-
 {{- /* Process image. */}}
 {{- with $process }}
   {{- $r = $r.Process $process }}
 {{- end }}
 
+{{- /* Process LQIP. */}}
+{{- $l := "" }}
+{{- with $lqip }}
+  {{- $l = $r.Resize . }}
+{{- end }}
+
 {{- /* Determine widths for srcset generation. */}}
 {{- $widths := slice }}
 {{- if $width }}
@@ -216,29 +217,30 @@
 {{- /* Render. */}}
 <figure>
   <img
+    srcset="data:{{ $l.MediaType }};base64,{{ $l.Content | base64Encode }}"
     {{- range $formats }}
       {{- with index $im . }}
         {{- $sizes := $stdSizes }}
         {{- with $width }}
           {{- $sizes = printf "%dpx" . }}
         {{- end }}
-        srcset="
+        data-srcset="
           {{- range $k, $_ := . }}
             {{- if $k }},{{- end }}
             {{- printf `%s %dw` .RelPermalink .Width }}
           {{- end }}"
-        sizes="{{ $stdSizes }}"
+        data-sizes="{{ $stdSizes }}"
       {{- end }}
     {{- end }}
     src="{{ $fi.RelPermalink }}"
     width="{{ string $r.Width }}"
     height="{{ string $r.Height }}"
     decoding="{{ $decoding }}"
-    fetchpriority="{{ site.Params.hyas_images.defaults.fetchpriority }}"
+    fetchpriority="{{ $fetchPriority }}"
     loading="{{ $loading }}"
     alt="{{ $alt }}"
-    {{- with .title -}}title="{{ $title }}"{{- end -}}
-    {{- with .class -}}class="{{ $class }}"{{- end -}}
+    {{- with .title }}title="{{ $title }}"{{- end }}
+    class="lazyload blur-up{{- with .class }} {{ . }}{{- end }}"
   />
   {{- with $caption }}<figcaption>{{ . }}</figcaption>{{- end }}
 </figure>

diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html
@@ -125,6 +125,7 @@
 {{- $fetchPriority := or .fetchpriority site.Params.hyas_images.defaults.fetchpriority }}
 {{- $loading := or .loading site.Params.hyas_images.defaults.loading }}
 {{- $process := or .process site.Params.hyas_images.defaults.process }}
+{{- $lqip := or .lqip site.Params.hyas_images.defaults.lqip }}
 {{- $src := or .src "" }}
 {{- $title := or .title "" }}
 {{- $width := or (int .width) 0 }}
@@ -161,17 +162,17 @@
   {{- $r = . }}
 {{- end }}
 
-{{/* Convert to webp. */}}
-{{- $f := site.Params.hyas_images.defaults.format }}
-{{- if eq $f "webp" }}
-  {{- $r = $r.Resize (printf "%dx%d webp" $r.Width $r.Height) }}
-{{- end }}
-
 {{- /* Process image. */}}
 {{- with $process }}
   {{- $r = $r.Process $process }}
 {{- end }}
 
+{{- /* Process LQIP. */}}
+{{- $l := "" }}
+{{- with $lqip }}
+  {{- $l = $r.Resize . }}
+{{- end }}
+
 {{- /* Determine widths for srcset generation. */}}
 {{- $widths := slice }}
 {{- if $width }}
@@ -218,24 +219,25 @@
       {{- with $width }}
         {{- $sizes = printf "%dpx" . }}
       {{- end }}
-      <source type="{{ (index . 0).MediaType.Type }}" srcset="
+      <source type="{{ (index . 0).MediaType.Type }}" data-srcset="
         {{- range $k, $_ := . }}
           {{- if $k }},{{- end }}
           {{- printf `%s %dw` .RelPermalink .Width }}
         {{- end }}"
-        sizes="{{ $stdSizes }}">
+        data-sizes="{{ $stdSizes }}">
     {{- end }}
   {{- end }}
   <img
-    src="{{ $fi.RelPermalink }}"
+    src="data:{{ $l.MediaType }};base64,{{ $l.Content | base64Encode }}"
+    data-src="{{ $fi.RelPermalink }}"
     width="{{ string $r.Width }}"
     height="{{ string $r.Height }}"
     decoding="{{ $decoding }}"
-    fetchpriority="{{ site.Params.hyas_images.defaults.fetchpriority }}"
+    fetchpriority="{{ $fetchPriority }}"
     loading="{{ $loading }}"
     alt="{{ $alt }}"
-    {{- with .title -}}title="{{ $title }}"{{- end -}}
-    {{- with .class -}}class="{{ $class }}"{{- end -}}
+    {{- with .title }}title="{{ $title }}"{{- end }}
+    class="lazyload blur-up{{- with .class }} {{ . }}{{- end }}"
   />
 </picture>