From c237e04744eb32bc29136ec801d06ff925908c23 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Tue, 31 Oct 2023 17:53:15 +0100 Subject: [PATCH 1/8] Example of integration of picture partial --- config/_default/params.toml | 1 + exampleSite/config/_default/params.toml | 1 + layouts/_default/_markup/render-image.html | 78 +++++--------------- layouts/partials/picture.html | 85 ++++++++++++++++++++++ layouts/partials/pictureDefaults.html | 7 ++ layouts/shortcodes/figure.html | 52 ++++--------- 6 files changed, 126 insertions(+), 98 deletions(-) create mode 100644 layouts/partials/picture.html create mode 100644 layouts/partials/pictureDefaults.html diff --git a/config/_default/params.toml b/config/_default/params.toml index f2d3fcfba..6e6b46dc6 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -12,6 +12,7 @@ autoSwitchAppearance = true enableSearch = false enableCodeCopy = false enableImageLazyLoading = true +enableImageWebp = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 2b3fa1533..3317d6676 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -12,6 +12,7 @@ autoSwitchAppearance = true enableSearch = true enableCodeCopy = true enableImageLazyLoading = true +enableImageWebp = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index ac82a6aa1..2e7a5b537 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,64 +1,20 @@ {{ $url := urls.Parse .Destination }} {{ $altText := .Text }} {{ $caption := .Title }} -{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }} -{{ if findRE "^https?" $url.Scheme }} -
- {{ $altText }} - {{ with $caption }}
{{ . | markdownify }}
{{ end }} -
-{{ else }} - {{ $resource := "" }} - {{ if $.Page.Resources.GetMatch ($url.String) }} - {{ $resource = $.Page.Resources.GetMatch ($url.String) }} - {{ else if resources.GetMatch ($url.String) }} - {{ $resource = resources.Get ($url.String) }} - {{ end }} - {{ with $resource }} -
- {{ $altText }} - {{ with $caption }}
{{ . | markdownify }}
{{ end }} -
- {{ else }} -
- {{ $altText }} - {{ with $caption }}
{{ . | markdownify }}
{{ end }} -
- {{ end }} -{{ end }} \ No newline at end of file +{{ $class := "mx-auto my-0 rounded-md" }} + +{{ $file := $url.Path }} +{{ $img := .Page.Resources.GetMatch $file }} +{{- if and (not $img) .Page.File }} + {{ $path := path.Join .Page.File.Dir $file }} + {{ $img = resources.Get $path }} +{{ end -}} + +
+ {{- with $img -}} + {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} + {{- else -}} + {{ $altText }} + {{- end -}} + {{ with $caption }}
{{ . | markdownify }}
{{ end }} +
diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html new file mode 100644 index 000000000..4d5aa7e30 --- /dev/null +++ b/layouts/partials/picture.html @@ -0,0 +1,85 @@ +{{ $img := .img }} +{{ $alt := .alt }} +{{ $class := .class }} +{{ $lazy := .lazy }} +{{ $webp := .webp }} +{{ $lqip := .lqip }} + +{{ with $img }} + {{ if (eq .MediaType.SubType "svg") }} + {{ $width := ""}} + {{ $height := ""}} + {{ $svgContent := .Content }} + {{ range (findRESubmatch `]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }} + {{ $width = index . 1 }} + {{ end }} + {{ range (findRESubmatch `]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }} + {{ $height = index . 1 }} + {{ end }} + {{ if (eq "" $width $height) }} + {{ range (findRESubmatch `]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }} + {{ $width = index . 3 }} + {{ $height = index . 4 }} + {{ end }} + {{ end }} + {{ if (eq "" $width $height) }} + {{ warnf "Can't detect width and height for SVG %s" .RelPermalink }} + {{/* do not use lazy without dimensions */}} + {{ $lazy = false }} + {{ end }} + + {{ . }} + + {{ else }} + + {{ if $webp }} + + {{ end }} + {{ . }} + + {{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/pictureDefaults.html b/layouts/partials/pictureDefaults.html new file mode 100644 index 000000000..1e31be6cb --- /dev/null +++ b/layouts/partials/pictureDefaults.html @@ -0,0 +1,7 @@ +{{ $img := .img }} +{{ $alt := .alt }} +{{ $class := .class }} +{{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }} +{{ $webp := $.Page.Site.Params.enableImageWebp | default true }} +{{ $lqip := false }} +{{ partial "picture.html" (dict "img" $img "alt" $alt "class" $class "lazy" $lazy "webp" $webp "lqip" $lqip) }} \ No newline at end of file diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 7028c6c18..f0d49dfe8 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -6,45 +6,23 @@ {{ $caption := .Get "caption" }} {{ $href := .Get "href" }} {{ $class := .Get "class" }} + + {{ $file := $url.Path }} + {{ $img := .Page.Resources.GetMatch $file }} + {{- if and (not $img) .Page.File }} + {{ $path := path.Join .Page.File.Dir $file }} + {{ $img = resources.Get $path }} + {{ end -}} + {{ with $href }}{{ end }} - {{ $altText }} + + {{- with $img -}} + {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} + {{- else -}} + {{ $altText }} + {{- end -}} + {{ with $href }}{{ end }} {{ with $caption }}
{{ . | markdownify }}
{{ end }} From 978791808f9d28377164ed7602d1003a9b7dc68e Mon Sep 17 00:00:00 2001 From: stereobooster Date: Tue, 31 Oct 2023 18:14:03 +0100 Subject: [PATCH 2/8] integrate in single.html --- layouts/_default/single.html | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 340e95a13..90e41daaf 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -15,25 +15,9 @@

{{ with $feature }}
- {{ $.Params.featureAlt | default $.Params.coverAlt | default + {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }} + {{ $class := "mb-6 -mt-4 rounded-md" }} + {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} {{ with $.Params.coverCaption }}
{{ . | markdownify }}
{{ end }} From 3ffe2b1002b4c4cae0b3b61ca6c63f263c7762ba Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 01:21:36 +0100 Subject: [PATCH 3/8] do not upscale images in picture shortcode --- layouts/partials/picture.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 4d5aa7e30..47ffe1038 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -54,9 +54,13 @@ {{ else }} srcset=" {{- (.Resize "330x webp").RelPermalink }} 330w, - {{- (.Resize "660x webp").RelPermalink }} 660w, - {{- (.Resize "1024x webp").RelPermalink }} 1024w, - {{- (.Resize "1320x webp").RelPermalink }} 2x" + {{- (.Resize "660x webp").RelPermalink }} 660w + {{ if gt .Width 1024 }} + ,{{ (.Resize "1024x webp").RelPermalink }} 1024w + {{ end }} + {{ if gt .Width 1320 }} + ,{{ (.Resize "1320x webp").RelPermalink }} 2x + {{ end }}" src="{{ (.Resize "660x webp").RelPermalink }}" {{ end }} type="image/webp" @@ -74,9 +78,13 @@ {{ else }} srcset=" {{- (.Resize "330x").RelPermalink }} 330w, - {{- (.Resize "660x").RelPermalink }} 660w, - {{- (.Resize "1024x").RelPermalink }} 1024w, - {{- (.Resize "1320x").RelPermalink }} 2x" + {{- (.Resize "660x").RelPermalink }} 660w + {{ if gt .Width 1024 }} + ,{{ (.Resize "1024x").RelPermalink }} 1024w + {{ end }} + {{ if gt .Width 1320 }} + ,{{ (.Resize "1320x").RelPermalink }} 2x + {{ end }}" src="{{ (.Resize "660x").RelPermalink }}" {{ end }} > From 8cfe33965bee26cab2190bd6e6fc7706c77945b5 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 02:02:09 +0100 Subject: [PATCH 4/8] use original image as backup for srcset --- layouts/partials/picture.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 47ffe1038..9056f2246 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -57,9 +57,17 @@ {{- (.Resize "660x webp").RelPermalink }} 660w {{ if gt .Width 1024 }} ,{{ (.Resize "1024x webp").RelPermalink }} 1024w + {{ else }} + {{ with .Resize (printf "%dx%d webp" .Width .Height) }} + ,{{ .RelPermalink }} {{ .Width }}w + {{ end }} {{ end }} {{ if gt .Width 1320 }} ,{{ (.Resize "1320x webp").RelPermalink }} 2x + {{ else }} + {{ with .Resize (printf "%dx%d webp" .Width .Height) }} + ,{{ .RelPermalink }} {{ .Width }}w + {{ end }} {{ end }}" src="{{ (.Resize "660x webp").RelPermalink }}" {{ end }} @@ -81,9 +89,13 @@ {{- (.Resize "660x").RelPermalink }} 660w {{ if gt .Width 1024 }} ,{{ (.Resize "1024x").RelPermalink }} 1024w + {{ else }} + ,{{ .RelPermalink }} {{ .Width }}w {{ end }} {{ if gt .Width 1320 }} ,{{ (.Resize "1320x").RelPermalink }} 2x + {{ else }} + ,{{ .RelPermalink }} {{ .Width }}w {{ end }}" src="{{ (.Resize "660x").RelPermalink }}" {{ end }} From 11fd48f5d09596e68705169d3faa343c752b6d62 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 02:23:34 +0100 Subject: [PATCH 5/8] potential solution to screenshot --- layouts/_default/_markup/render-image.html | 10 +++++++++- layouts/partials/picture.html | 11 +++++++++-- layouts/partials/pictureDefaults.html | 3 ++- layouts/shortcodes/screenshot.html | 21 ++++++++++----------- 4 files changed, 30 insertions(+), 15 deletions(-) diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 2e7a5b537..7a7e18a5d 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -10,9 +10,17 @@ {{ $img = resources.Get $path }} {{ end -}} +{{/* https://github.com/gohugoio/hugo/pull/10666/files */}} +{{- $params := $url.Query -}} +{{- $x2Param := $params.Get "x2" -}} +{{- $x2 := false -}} +{{- if eq $x2Param "true" -}} + {{- $x2 = true -}} +{{- end -}} +
{{- with $img -}} - {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} + {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }} {{- else -}} {{ $altText }} {{- end -}} diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 9056f2246..335536673 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -4,6 +4,7 @@ {{ $lazy := .lazy }} {{ $webp := .webp }} {{ $lqip := .lqip }} +{{ $x2 := .x2 | default false }} {{ with $img }} {{ if (eq .MediaType.SubType "svg") }} @@ -45,6 +46,12 @@ style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover" {{ end }} > + {{ $width := .Width }} + {{ $height := .Height }} + {{ if $x2 }} + {{ $width = div .Width 2 }} + {{ $height = div .Height 2 }} + {{ end }} {{ if $webp }} {{- end -}} - {{ with .Get + + {{ $altText := "" }} + {{ with .Get "alt" }} + {{ $altText = . }} + {{ else }} + {{ $altText = (.Get "caption") | markdownify | plainify }} + {{ end }} + + {{ partial "pictureDefaults.html" (dict "img" $image "alt" $altText "x2" true) }} + {{- if .Get "href" }}{{ end -}} {{- if .Get "caption" -}}
From 6eb34e7124d6eea6262fffb1ba233d38b6a2647d Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 14:23:42 +0100 Subject: [PATCH 6/8] use 2x instead of x2 in query params --- layouts/_default/_markup/render-image.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 7a7e18a5d..6c80f3433 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -12,7 +12,7 @@ {{/* https://github.com/gohugoio/hugo/pull/10666/files */}} {{- $params := $url.Query -}} -{{- $x2Param := $params.Get "x2" -}} +{{- $x2Param := $params.Get "2x" -}} {{- $x2 := false -}} {{- if eq $x2Param "true" -}} {{- $x2 = true -}} From 0c6c30fec166f18310264433929ff69a442637ca Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 14:38:27 +0100 Subject: [PATCH 7/8] do not lazy load the feature image --- layouts/_default/_markup/render-image.html | 2 +- layouts/_default/single.html | 2 +- layouts/partials/picture.html | 2 +- layouts/partials/pictureDefaults.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 6c80f3433..d8a5136df 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -10,7 +10,7 @@ {{ $img = resources.Get $path }} {{ end -}} -{{/* https://github.com/gohugoio/hugo/pull/10666/files */}} +{{/* https://github.com/gohugoio/hugo/pull/10666 */}} {{- $params := $url.Query -}} {{- $x2Param := $params.Get "2x" -}} {{- $x2 := false -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 90e41daaf..199a3235a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -17,7 +17,7 @@

{{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }} {{ $class := "mb-6 -mt-4 rounded-md" }} - {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} + {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }} {{ with $.Params.coverCaption }}
{{ . | markdownify }}
{{ end }} diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 335536673..f0bc2f49d 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -4,7 +4,7 @@ {{ $lazy := .lazy }} {{ $webp := .webp }} {{ $lqip := .lqip }} -{{ $x2 := .x2 | default false }} +{{ $x2 := .x2 }} {{ with $img }} {{ if (eq .MediaType.SubType "svg") }} diff --git a/layouts/partials/pictureDefaults.html b/layouts/partials/pictureDefaults.html index 01eb0986b..9ce430841 100644 --- a/layouts/partials/pictureDefaults.html +++ b/layouts/partials/pictureDefaults.html @@ -1,7 +1,7 @@ {{ $img := .img }} {{ $alt := .alt }} {{ $class := .class }} -{{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }} +{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }} {{ $webp := $.Page.Site.Params.enableImageWebp | default true }} {{ $lqip := false }} {{ $x2 := .x2 }} From c8b33ae51ec3b011c9a2364ef06c525febc09aa2 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 26 Nov 2023 14:47:26 +0100 Subject: [PATCH 8/8] refactoring --- layouts/_default/_markup/render-image.html | 2 +- layouts/_default/single.html | 2 +- layouts/partials/picture.html | 8 ++++---- layouts/partials/pictureDefaults.html | 8 -------- layouts/shortcodes/figure.html | 2 +- layouts/shortcodes/screenshot.html | 2 +- 6 files changed, 8 insertions(+), 16 deletions(-) delete mode 100644 layouts/partials/pictureDefaults.html diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index d8a5136df..593279b64 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -20,7 +20,7 @@
{{- with $img -}} - {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }} + {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }} {{- else -}} {{ $altText }} {{- end -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 199a3235a..726dac87e 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -17,7 +17,7 @@

{{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }} {{ $class := "mb-6 -mt-4 rounded-md" }} - {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }} + {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }} {{ with $.Params.coverCaption }}
{{ . | markdownify }}
{{ end }} diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index f0bc2f49d..752f84a88 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -1,10 +1,10 @@ {{ $img := .img }} {{ $alt := .alt }} {{ $class := .class }} -{{ $lazy := .lazy }} -{{ $webp := .webp }} -{{ $lqip := .lqip }} -{{ $x2 := .x2 }} +{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }} +{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }} +{{ $lqip := .lqip | default false }} +{{ $x2 := .x2 | default false }} {{ with $img }} {{ if (eq .MediaType.SubType "svg") }} diff --git a/layouts/partials/pictureDefaults.html b/layouts/partials/pictureDefaults.html deleted file mode 100644 index 9ce430841..000000000 --- a/layouts/partials/pictureDefaults.html +++ /dev/null @@ -1,8 +0,0 @@ -{{ $img := .img }} -{{ $alt := .alt }} -{{ $class := .class }} -{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }} -{{ $webp := $.Page.Site.Params.enableImageWebp | default true }} -{{ $lqip := false }} -{{ $x2 := .x2 }} -{{ partial "picture.html" (dict "img" $img "alt" $alt "class" $class "lazy" $lazy "webp" $webp "lqip" $lqip "x2" $x2) }} \ No newline at end of file diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index f0d49dfe8..118b7a055 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -18,7 +18,7 @@ {{ with $href }}{{ end }} {{- with $img -}} - {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }} + {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }} {{- else -}} {{ $altText }} {{- end -}} diff --git a/layouts/shortcodes/screenshot.html b/layouts/shortcodes/screenshot.html index 280257484..e08243ce9 100644 --- a/layouts/shortcodes/screenshot.html +++ b/layouts/shortcodes/screenshot.html @@ -12,7 +12,7 @@ {{ $altText = (.Get "caption") | markdownify | plainify }} {{ end }} - {{ partial "pictureDefaults.html" (dict "img" $image "alt" $altText "x2" true) }} + {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }} {{- if .Get "href" }}{{ end -}} {{- if .Get "caption" -}}