🐛 Fix: add a option "Responsive" for plugin image fixed #369

hugo-fixit · Nov 4, 2023 · 4fb9711 · 4fb9711
1 parent 6682d38
commit 4fb9711
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 41 deletions.
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -290,7 +290,7 @@
         height: auto;
       }
 
-      &:is([loading='lazy']):not([data-lazyloaded]) {
+      &[loading='lazy'][srcset]:not([data-lazyloaded]) {
         &:not(.suffix-invalid__small) {
           width: var(--width-small, var(--width));
           aspect-ratio: var(--aspect-ratio-small, var(--aspect-ratio));

diff --git a/docs b/docs
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,11 +1,11 @@
 {{- if .Title | and .Text -}}
   <figure>
-    {{- dict "Src" .Destination "Alt" .Text "Caption" .Text "Title" .Title "Linked" true "Resources" .Page.Resources "Params" .Page.Params | partial "plugin/image.html" -}}
+    {{- dict "Src" .Destination "Alt" .Text "Caption" .Text "Title" .Title "Linked" true "Resources" .Page.Resources "Params" .Page.Params "Responsive" true | partial "plugin/image.html" -}}
     <figcaption class="image-caption">
       {{- .Text | safeHTML -}}
     </figcaption>
   </figure>
 {{- else -}}
   {{- $linked := (eq .Page.Site.Params.page.lightgallery "force") | or (eq .Page.Params.lightgallery "force") | or (ne .Title "") -}}
-  {{- dict "Src" .Destination "Alt" .Text "Title" .Title "Linked" $linked "Resources" .Page.Resources "Params" .Page.Params | partial "plugin/image.html" -}}
+  {{- dict "Src" .Destination "Alt" .Text "Title" .Title "Linked" $linked "Resources" .Page.Resources "Params" .Page.Params "Responsive" true | partial "plugin/image.html" -}}
 {{- end -}}
diff --git a/layouts/friends/single.html b/layouts/friends/single.html
@@ -16,7 +16,7 @@ <h1 class="single-title animate__animated animate__pulse animate__faster">{{- .T
       {{ range $index, $friend := .Site.Data.friends }}
         <a class="friend-link" title="{{ $friend.description }}" href="{{ $friend.url | safeURL }}" rel="external noopener noreferrer" target="_blank">
           {{ if $friend.avatar }}
-            {{- dict "Src" $friend.avatar "Alt" $friend.nickname "Class" "friend-avatar" "Resources" $.Resources | partial "plugin/image.html" -}}
+            {{- dict "Src" $friend.avatar "Alt" $friend.nickname "Class" "friend-avatar" "Resources" $.Resources "Params" $.Params | partial "plugin/image.html" -}}
           {{ else }}
             <svg class="friend-avatar" aria-hidden="true">
               <use xlink:href="#icon-{{ add 1 $index }}"></use>

diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html
@@ -15,46 +15,57 @@
     {{- $src = .RelPermalink -}}
   {{- end -}}
   {{- /* only available for image resources that are raster images */ -}}
-  {{- if (eq .ResourceType "image") | and $suffixValid -}}
+  {{- if (eq .ResourceType "image") | and $suffixValid | and $.Responsive -}}
     {{- $style = printf "--width: %vpx;--aspect-ratio: %v / %v;" .Width .Width .Height | safeHTMLAttr -}}
   {{- end -}}
 {{- end -}}
 
-{{- /* handle for small size image */ -}}
 {{- $srcSmall := .SrcSmall | default $src -}}
-{{- $suffixValidSmall := dict "Path" $srcSmall "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
-{{- with dict "Path" .SrcSmall "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
-  {{- $url := urls.Parse $.SrcSmall -}}
-  {{- if not $url.Host | or $cacheRemoteImages.replace -}}
-    {{- $srcSmall = .RelPermalink -}}
+{{- $srcMedium := $src -}}
+{{- $srcLarge := .SrcLarge | default $src -}}
+
+{{- if .Responsive }}
+  {{- /* handle for small size image */ -}}
+  {{- $suffixValidSmall := dict "Path" $srcSmall "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
+  {{- with dict "Path" .SrcSmall "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
+    {{- $url := urls.Parse $.SrcSmall -}}
+    {{- if not $url.Host | or $cacheRemoteImages.replace -}}
+      {{- $srcSmall = .RelPermalink -}}
+    {{- end -}}
+    {{- if (eq .ResourceType "image") | and $suffixValidSmall -}}
+      {{- $style = printf "%v--width-small: %vpx;--aspect-ratio-small: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
+    {{- end -}}
   {{- end -}}
-  {{- if (eq .ResourceType "image") | and $suffixValidSmall -}}
-    {{- $style = printf "%v--width-small: %vpx;--aspect-ratio-small: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
+
+  {{- /* handle for large size image */ -}}
+  {{- $suffixValidLarge := dict "Path" $srcLarge "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
+  {{- with dict "Path" .SrcLarge "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
+    {{- $url := urls.Parse $.SrcLarge -}}
+    {{- if not $url.Host | or $cacheRemoteImages.replace -}}
+      {{- $srcLarge = .RelPermalink -}}
+    {{- end -}}
+    {{- if (eq .ResourceType "image") | and $suffixValidLarge -}}
+      {{- $style = printf "%v--width-large: %vpx;--aspect-ratio-large: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
+    {{- end -}}
   {{- end -}}
-{{- end -}}
 
-{{- /* handle for large size image */ -}}
-{{- $srcLarge := .SrcLarge | default $src -}}
-{{- $suffixValidLarge := dict "Path" $srcLarge "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
-{{- with dict "Path" .SrcLarge "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
-  {{- $url := urls.Parse $.SrcLarge -}}
-  {{- if not $url.Host | or $cacheRemoteImages.replace -}}
-    {{- $srcLarge = .RelPermalink -}}
+  {{- /* handle for invalid suffix */ -}}
+  {{- if not $suffixValid | and $src -}}
+    {{- $class = printf "%v suffix-invalid" $class -}}
   {{- end -}}
-  {{- if (eq .ResourceType "image") | and $suffixValidLarge -}}
-    {{- $style = printf "%v--width-large: %vpx;--aspect-ratio-large: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
+  {{- if not $suffixValidSmall | and $srcSmall -}}
+    {{- $class = printf "%v suffix-invalid__small" $class -}}
+  {{- end -}}
+  {{- if not $suffixValidLarge | and $srcLarge -}}
+    {{- $class = printf "%v suffix-invalid__large" $class -}}
   {{- end -}}
-{{- end -}}
 
-{{- /* handle for invalid suffix */ -}}
-{{- if not $suffixValid | and $src -}}
-  {{- $class = printf "%v suffix-invalid" $class -}}
-{{- end -}}
-{{- if not $suffixValidSmall | and $srcSmall -}}
-  {{- $class = printf "%v suffix-invalid__small" $class -}}
-{{- end -}}
-{{- if not $suffixValidLarge | and $srcLarge -}}
-  {{- $class = printf "%v suffix-invalid__large" $class -}}
+  {{- /* set image srcset */ -}}
+  {{- if (eq $src $srcSmall) | and (eq $src $srcLarge) -}}
+    {{- $srcSmall = printf (cond (strings.Contains $srcSmall "?") "%v&size=small" "%v?size=small") $srcSmall -}}
+    {{- $srcMedium = printf (cond (strings.Contains $srcMedium "?") "%v&size=medium" "%v?size=medium") $srcMedium -}}
+    {{- $srcLarge = printf (cond (strings.Contains $srcLarge "?") "%v&size=large" "%v?size=large") $srcLarge -}}
+  {{- end -}}
 {{- end -}}
 
 {{- /* set image alt and caption */ -}}
@@ -71,16 +82,12 @@
   {{- $style = printf " style=\"%vbackground: url(%v) no-repeat center;\"" $style (resources.Get "svg/loading.svg" | minify).RelPermalink | safeHTMLAttr -}}
 {{- end -}}
 
-{{- /* set image srcset */ -}}
-{{- $srcSmall = printf (cond (strings.Contains $srcSmall "?") "%v&size=small" "%v?size=small") $srcSmall -}}
-{{- $srcMedium := printf (cond (strings.Contains $src "?") "%v&size=medium" "%v?size=medium") $src -}}
-{{- $srcLarge = printf (cond (strings.Contains $srcLarge "?") "%v&size=large" "%v?size=large") $srcLarge -}}
-
 {{- /* structure of lightgallery or img */ -}}
 {{- if .Linked -}}
   <a class="lightgallery" href="{{ $srcLarge | safeURL }}" data-thumbnail="{{ $srcSmall | safeURL }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
 {{- end -}}
-<img loading="{{ $loading }}" src="{{ $src | safeURL }}" srcset="{{ $srcSmall | safeURL }}, {{ $srcMedium | safeURL }} 1.5x, {{ $srcLarge | safeURL }} 2x" sizes="auto"
+<img loading="{{ $loading }}" src="{{ $src | safeURL }}"
+  {{- if .Responsive }} srcset="{{ $srcSmall | safeURL }}, {{ $srcMedium | safeURL }} 1.5x, {{ $srcLarge | safeURL }} 2x" sizes="auto"{{- end -}}
   {{- if eq $loading "lazy" }} data-title="{{ .Title | default $alt }}" data-alt="{{ $alt }}"
   {{- else }} title="{{ .Title | default $alt }}" alt="{{ $alt }}"{{- end -}}
   {{- with .Width }} width="{{ . }}"{{- end -}}

diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
@@ -16,7 +16,7 @@
   {{- $options = cond $caption true false | dict "Linked" | merge $options -}}
 {{- end -}}
 
-{{- $options = dict "Resources" .Page.Resources "Params" .Page.Params | merge $options -}}
+{{- $options = dict "Resources" .Page.Resources "Params" .Page.Params "Responsive" true | merge $options -}}
 
 {{- with $caption -}}
   <figure{{ with cond $.IsNamedParams ($.Get "class") "" }} class="{{ . }}"{{ end }}>