refactor: image optimisation pipeline

HEIGE-PCloud · May 23, 2024 · 121b561 · 121b561
1 parent cbfbce2
commit 121b561
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 36 deletions.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,13 +1,13 @@
 {{- $lightgallery := .Page.Params.lightgallery | default site.Params.Page.lightgallery | default false -}}
 {{- if .Title -}}
     <figure>
-        {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}}
+        {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" $lightgallery "Resources" .Page.Resources | partial "plugin/image.html" -}}
         <figcaption class="image-caption">
             {{- .Title | safeHTML -}}
         </figcaption>
     </figure>
 {{- else -}}
     <figure>
-        {{- dict "Src" .Destination "Title" .Text "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}}
+        {{- dict "Src" .Destination "Title" .Text "Linked" $lightgallery "Resources" .Page.Resources | partial "plugin/image.html" -}}
     </figure>
 {{- end -}}
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
@@ -6,7 +6,12 @@
     {{- with $image -}}
         <div class="featured-image-preview">
             <a href="{{ $.RelPermalink }}" aria-label={{ $.Title }}>
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
+                {{ $optim := slice 
+                    (dict "Process" "fill 800x240 Center webp q75" "descriptor" "800w")
+                    (dict "Process" "fill 1200x360 Center webp q75" "descriptor" "1200w")
+                    (dict "Process" "fill 1600x480 Center webp q75" "descriptor" "1600w") 
+                }}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" $optim | partial "plugin/image.html" -}}
             </a>
         </div>
     {{- end -}}

diff --git a/layouts/partials/function/imageHandler.html b/layouts/partials/function/imageHandler.html
diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html
@@ -13,7 +13,12 @@
 {{- $resource := (.Resources.Get .Src) | default (resources.Get .Src) | default nil -}}
 
 {{- $cacheRemote := true -}}
-
+{{/*  {{- $optim := slice 
+    (dict "Process" "fill 800x240 Center webp q75" "descriptor" "800w")
+    (dict "Process" "fill 1200x360 Center webp q75" "descriptor" "1200w")
+    (dict "Process" "fill 1600x480 Center webp q75" "descriptor" "1600w")
+-}}  */}}
+{{- $optim := .Optim -}}
 {{- if not $resource | and (partial "function/isUrlRemote.html" (urls.Parse .Src)) | and $cacheRemote -}}
     {{- with $remoteResource := resources.GetRemote .Src -}}
         {{- with .Err -}}
@@ -26,7 +31,27 @@
     {{- end -}}
 {{- end -}}
 
-{{- with $resource -}}
+{{- $srcset := "" -}}
+{{- if $optim | and $resource -}}
+    {{ $srcsetSlice := slice -}}
+    {{- range $optim -}}
+        {{- if .Process -}}
+            {{- $processed := $resource.Process .Process -}}
+            {{- $srcsetSlice = $srcsetSlice | append (printf "%s %s" $processed.RelPermalink .descriptor) -}}
+        {{- end -}}
+    {{- end -}}
+    {{- $srcset = delimit $srcsetSlice ", " -}}
+{{- end -}}
+
+{{- $src := $resource.RelPermalink | default .Src -}}
+{{- $alt := .Alt | default .Title | default "alt text" -}}
+{{- $height := .Height | default $resource.Height | default "" -}}
+{{- $width := .Width | default $resource.Width | default "" -}}
+
+<img {{ with .Class }}class="{{ . }}"{{ end }} {{ with .Loading }}loading="{{ . }}"{{ end }} src="{{ $src }}" {{ with $srcset }}srcset="{{ . }}"{{ end }} {{ with .Sizes }}sizes="{{ . }}"{{ end }} {{ with $alt }}alt=""{{ end }} {{ with $height }}height="{{ . }}"{{ end }} {{ with $width }}width="{{ . }}"{{ end }}>
+
+
+{{/*  {{- with $resource -}}
 <h1>
     <p>
         {{- $resource -}}
@@ -44,17 +69,10 @@ <h1>
     <p>This resource is not a page resource nor a global resources</p>
     {{- .Src -}}
 </h1>
-{{- end -}}
-
-{{- $optim := slice 
-    (dict "Resize" "800x webp Lanczos q75" "descriptor" "")
-    (dict "Resize" "1200x webp Lanczos q75" "descriptor" "1.5x")
-    (dict "Resize" "1600x webp Lanczos q75" "descriptor" "2x")
--}}
-
-
+{{- end -}}  */}}
 
-{{/*  {{- $remote := .Remote | default false -}}
+{{/* 
+{{- $remote := .Remote | default false -}}
 {{- $optimize := .Optim | default false -}}
 {{- $optimized := false -}}
 

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -151,7 +151,12 @@ <h2 class="single-subtitle">{{ . }}</h2>
         {{- $image := $params.featuredimage -}}
         {{- with $image -}}
             <div class="featured-image">
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
+                {{- $optim := slice 
+                    (dict "Process" "resize 800x webp q75" "descriptor" "800w")
+                    (dict "Process" "resize 1200x webp q75" "descriptor" "1200w")
+                    (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") 
+                -}}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" $optim | partial "plugin/image.html" -}}
             </div>
         {{- end -}}      
         {{- /* Series list */ -}}

diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
@@ -11,8 +11,6 @@
     {{- $options = dict "Width" (.Get "width") | merge $options -}}
     {{- $options = .Get "linked" | ne false | dict "Linked" | merge $options -}}
     {{- $options = dict "Rel" (.Get "rel") | merge $options -}}
-    {{- $options = dict "Optim" true | merge $options -}}
-    {{- $options = dict "Remote" true | merge $options -}}
 {{- else -}}
     {{- $options = cond $caption true false | dict "Linked" | merge $options -}}
 {{- end -}}