feat: make srcset actually useful

exampleSite/config/_default/params.toml

@@ -27,9 +27,17 @@ enablePWA = false
 license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
 # [Experimental] Bundle js
 bundle = false
-# [Experimental] cache remote images, more info: https://github.com/HEIGE-PCloud/DoIt/pull/860#issue-1574342372
+# [Experimental] cache remote images in markdown, more info: https://github.com/HEIGE-PCloud/DoIt/pull/860#issue-1574342372
 # [试验性功能] 缓存图床图片，详情请见：https://github.com/HEIGE-PCloud/DoIt/pull/860#issue-1574342372
 cacheRemoteImages = false
+# [Experimental] generate image srcset attribute with hugo image processing feature.
+# [试验性功能] 使用 hugo 图片处理功能生成 srcset 属性
+optimizeImages = false
+# [Experimental] resize method for srcset attribute in optimizeImages, more info: https://gohugo.io/content-management/image-processing/#image-processing-options
+# [实验性功能] optimizeImages 中 srcset 属性的缩放方法, 详情请见：https://gohugo.io/content-management/image-processing/#image-processing-options
+srcsetSmallResizeMethod = "700x webp Lanczos q75"
+srcsetDefaultResizeMethod = "1200x webp Lanczos q75"
+srcsetLargeResizeMethod = "2000x webp Lanczos q75"
 # Header config
 # 页面头部导航栏配置
 [header]

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 | partial "plugin/image.html" -}}
+        {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}}
         <figcaption class="image-caption">
             {{- .Title | safeHTML -}}
         </figcaption>
     </figure>
 {{- else -}}
     <figure>
-        {{- dict "Src" .Destination "Title" .Text "Linked" $lightgallery "Resources" .Page.Resources | partial "plugin/image.html" -}}
+        {{- dict "Src" .Destination "Title" .Text "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}}
     </figure>
 {{- end -}}

layouts/_default/summary.html

@@ -3,27 +3,10 @@
 <article class="single summary" itemscope itemtype="http://schema.org/Article">
     {{- /* Featured image */ -}}
     {{- $image := $params.featuredImagePreview | default $params.featuredImage -}}
-    {{- $height := "auto" -}}
-    {{- $width := "auto" -}}
-    {{- with .Resources.GetMatch (printf "%s" ($image)) -}}
-        {{- $image = .RelPermalink -}}
-        {{- $height = .Height -}}
-        {{- $width = .Width -}}
-    {{- end -}}
-    {{- with .Resources.GetMatch "featured-image" -}}
-        {{- $image = .RelPermalink -}}
-        {{- $height = .Height -}}
-        {{- $width = .Width -}}
-    {{- end -}}
-    {{- with .Resources.GetMatch "featured-image-preview" -}}
-        {{- $image = .RelPermalink -}}
-        {{- $height = .Height -}}
-        {{- $width = .Width -}}
-    {{- end -}}
     {{- with $image -}}
         <div class="featured-image-preview">
             <a href="{{ $.RelPermalink }}" aria-label={{ $.Title }}>
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Height" $height "Width" $width "Loading" "eager" | partial "plugin/image.html" -}}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
             </a>
         </div>
     {{- end -}}
@@ -103,4 +86,4 @@ <h1 class="single-title" itemprop="name headline">
             </div>
         {{- end -}}
     </div>
-</article>
+</article>

layouts/partials/function/getImage.html

@@ -0,0 +1,17 @@
+{{- $path:= .Path -}}
+{{- $imageResource := 0 -}}
+
+{{- with dict "Path" $path "Resources" .Resources | partial "function/resource.html" -}}
+    {{- $imageResource = . -}}
+{{- else -}}
+    {{- $url := urls.Parse .Path -}}
+    {{- if (eq site.Params.cacheRemoteImages true) | and (partial "function/isUrlRemote.html" $url) | and .Remote -}}
+        {{- $imageResource = partial "function/getRemoteImage.html" $path -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not (and (not (eq $imageResource 0)) (eq $imageResource.ResourceType "image")) -}}
+    {{- $imageResource = 0 -}}
+{{- end -}}
+
+{{- return $imageResource -}}

layouts/partials/function/imageHandler.html

@@ -0,0 +1,20 @@
+{{- $return := 0 -}}
+{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}}
+
+{{- if not (eq .Optim true) -}}
+    {{- warnf .Image.RelPermalink -}}
+    {{- $return = dict "S" .Image "M" .Image "L" .Image "Optimized" false -}}
+{{- else if or
+    (not (eq site.Params.optimizeImages true))
+    (not (dict "Path" .Image.RelPermalink "Suffixes" $suffixList | partial "function/suffixValidation.html"))
+    -}}
+    {{- $return = dict "S" .Image "M" .Image "L" .Image "Optimized" true -}}
+{{- else -}}
+    {{- $s := .Image.Resize (site.Params.srcsetSmallResizeMethod | default "700x webp Lanczos q60") -}}
+    {{- $m := .Image.Resize (site.Params.srcsetDefaultResizeMethod | default "1200x webp Lanczos q60") -}}
+    {{- $l := .Image.Resize (site.Params.srcsetLargeResizeMethod | default "2000x webp Lanczos q60") -}}
+    {{- $return = dict "S" $s "M" $m "L" $l "Optimized" true -}}
+    {{- warnf $m.RelPermalink -}}
+{{- end -}}
+
+{{- return $return -}}

layouts/partials/function/isUrlRemote.html

@@ -0,0 +1 @@
+{{- return .Host | and .Path | and (strings.HasSuffix .Path "/" | not) -}}

layouts/partials/function/resource.html

@@ -1,6 +1,6 @@
 {{- $resource := 0 -}}
 {{- $url := urls.Parse .Path -}}
-{{- if not $url.Host | and $url.Path | and (strings.HasSuffix $url.Path "/" | not) -}}
+{{- if not (partial "function/isUrlRemote.html" $url) -}}
     {{- if .Resources -}}
         {{- with .Resources.GetMatch $url.Path -}}
             {{- $resource = . -}}
@@ -11,10 +11,6 @@
             {{- $resource = . -}}
         {{- end -}}
     {{- end -}}
-{{- else -}}
-    {{- if eq site.Params.cacheRemoteImages true -}}
-        {{- $resource = partial "function/getRemoteImage.html" .Path -}}
-    {{- end -}}
 {{- end -}}
 
 {{- return $resource -}}

layouts/partials/plugin/image.html

@@ -1,30 +1,26 @@
 {{- /* lightgallery.js */ -}}
-{{- $src := .Src -}}
+{{- $default := dict "RelPermalink" .Src -}}
+{{- $remote := .Remote | default false -}}
+{{- $optimize := .Optim | default false -}}
+{{- $small := $default -}}
+{{- $large := $default -}}
 {{- $height := "" -}}
 {{- $width := "" -}}
-{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}}
-{{- with dict "Path" .Src "Resources" .Resources | partial "function/resource.html" -}}
-    {{- $src = .RelPermalink -}}
-    {{- if and
-        (eq .ResourceType "image")
-        (dict "Path" $src "Suffixes" $suffixList | partial "function/suffixValidation.html")
-        -}}
-        {{- $height = .Height -}}
-        {{- $width = .Width -}}
-    {{- end -}}
-{{- end -}}
+{{- $optimized := false -}}
 
-{{- $small := .SrcSmall | default $src -}}
-{{- with dict "Path" .SrcSmall "Resources" .Resources | partial "function/resource.html" -}}
-    {{- $small = .RelPermalink -}}
-{{- end -}}
+{{- warnf "%#v" .NoOptim -}}
 
-{{- $large := .SrcLarge | default $src -}}
-{{- with dict "Path" .SrcLarge "Resources" .Resources | partial "function/resource.html" -}}
-    {{- $large = .RelPermalink -}}
+{{- with dict "Path" .Src "Resources" .Resources "Remote" $remote | partial "function/getImage.html" -}}
+    {{- $output := dict "Optim" $optimize "Image" . | partial "function/imageHandler.html" -}}
+    {{- $small = $output.S -}}
+    {{- $default = $output.M -}}
+    {{- $large = $output.L -}}
+    {{- $optimized = $output.Optimized -}}
+    {{- $height = $default.Height -}}
+    {{- $width = $default.Width -}}
 {{- end -}}
 
-{{- $alt := .Alt | default .Title | default $src -}}
+{{- $alt := .Alt | default .Title | default .Src -}}
 {{- $loading := .Loading | default "lazy" -}}
 
 {{- with .Height -}}
@@ -36,21 +32,37 @@
 {{- end -}}
 
 {{- if .Linked -}}
-    <a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $small | safeURL }}"{{ with .Caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
+    <a class="lightgallery" href="{{ $large.RelPermalink | safeURL }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $small.RelPermalink | safeURL }}"{{ with .Caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
         <img
             {{ with .Class }}class="{{ . }}"{{ end }}
             loading="{{ $loading }}"
-            src="{{ $src | safeURL }}"
-            srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+            src="{{ $default.RelPermalink | safeURL }}"
+            {{- if eq $optimized false -}}
+            srcset="{{ $small.RelPermalink | safeURL }}, {{ $default.RelPermalink | safeURL }} 1.5x, {{ $large.RelPermalink | safeURL }} 2x"
+            {{- else -}}
+            srcset="
+                  {{ $small.RelPermalink | safeURL }} {{ $small.Width }}w,
+                  {{ $default.RelPermalink | safeURL }} {{ $default.Width }}w,
+                  {{ $large.RelPermalink | safeURL }} {{ $large.Width }}w
+            "
+            {{- end -}}
             {{/*  sizes="auto" https://github.com/HEIGE-PCloud/DoIt/issues/1165  */}}
             alt="{{ $alt }}"{{ with $height }} height="{{ . }}" {{ end }}{{ with $width }} width="{{ . }}" {{ end }}>
     </a>
 {{- else -}}
     <img
         {{ with .Class }}class="{{ . }}"{{ end }}
         loading="{{ $loading }}"
-        src="{{ $src | safeURL }}"
-        srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+        src="{{ $default.RelPermalink | safeURL }}"
+        {{- if eq $optimized false -}}
+        srcset="{{ $small.RelPermalink | safeURL }}, {{ $default.RelPermalink | safeURL }} 1.5x, {{ $large.RelPermalink | safeURL }} 2x"
+        {{- else -}}
+        srcset="
+              {{ $small.RelPermalink | safeURL }} {{ $small.Width }}w,
+              {{ $default.RelPermalink | safeURL }} {{ $default.Width }}w,
+              {{ $large.RelPermalink | safeURL }} {{ $large.Width }}w
+        "
+        {{- end -}}
         {{/*  sizes="auto" https://github.com/HEIGE-PCloud/DoIt/issues/1165  */}}
         alt="{{ $alt }}"
         title="{{ .Title | default $alt }}"{{ with $height }} height="{{ . }}" {{ end }} {{ with $width }} width="{{ . }}" {{ end }}>

layouts/posts/single.html

@@ -146,25 +146,9 @@ <h2 class="single-subtitle">{{ . }}</h2>
 
         {{- /* Featured image */ -}}
         {{- $image := $params.featuredimage -}}
-        {{- $width := "auto" -}}
-        {{- $height := "auto" -}}
-        {{- with .Resources.GetMatch (printf "**%s" $params.featuredimage) -}}
-            {{- if eq .ResourceType "image" -}}
-                {{- $image = .RelPermalink -}}
-                {{- $width = .Width -}}
-                {{- $height = .Height -}}
-            {{- else -}}
-                {{- warnf "invalid featured image detected!" -}}
-            {{- end -}}
-        {{- end -}}
-        {{- with .Resources.GetMatch "featured-image" -}}
-            {{- $image = .RelPermalink -}}
-            {{- $width = .Width -}}
-            {{- $height = .Height -}}
-        {{- end -}}
         {{- with $image -}}
             <div class="featured-image">
-                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Width" $width "Height" $height "Loading" "eager" | partial "plugin/image.html" -}}
+                {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}}
             </div>
         {{- end -}}      
         {{- /* Series list */ -}}

layouts/shortcodes/image.html

@@ -11,6 +11,8 @@
     {{- $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 -}}