From 759982fd4ac39c16319fc976d2df10fe1e0d6ab5 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Mon, 11 Sep 2023 15:11:55 +0200 Subject: [PATCH 1/7] Picture + webp --- exampleSite/content/samples/markdown/index.md | 4 ++ layouts/_default/_markup/render-image.html | 60 ++++++++++++------- 2 files changed, 44 insertions(+), 20 deletions(-) diff --git a/exampleSite/content/samples/markdown/index.md b/exampleSite/content/samples/markdown/index.md index 601fae2a..d9f91110 100755 --- a/exampleSite/content/samples/markdown/index.md +++ b/exampleSite/content/samples/markdown/index.md @@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co +## Image + +![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg) + ## Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index c1fe3634..699b3f25 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -23,29 +23,49 @@ {{ end }} {{ with $resource }}
- + {{ if ne .MediaType.SubType "svg" }} + + {{ end }} + {{ $altText }} + alt="{{ $altText }}" + {{ if $lazyLoad }} + loading="lazy" + {{ end }} + /> + {{ with $caption }}
{{ . | markdownify }}
{{ end }}
{{ else }} From 86dd65776f24c5c5a1296ce91dd1975b77a73275 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Tue, 12 Sep 2023 21:19:27 +0200 Subject: [PATCH 2/7] Add configuration flag --- exampleSite/config/_default/params.toml | 1 + layouts/_default/_markup/render-image.html | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index d828f120..10baff41 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 +enableWebp = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 699b3f25..cbd84eba 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -2,6 +2,7 @@ {{ $altText := .Text }} {{ $caption := .Title }} {{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }} +{{ $webp := $.Page.Site.Params.enableWebp | default true }} {{ if findRE "^https?" $url.Scheme }}
- {{ if ne .MediaType.SubType "svg" }} + {{ if (and (ne .MediaType.SubType "svg") $webp) }} Date: Tue, 12 Sep 2023 22:16:14 +0200 Subject: [PATCH 3/7] Extracted picture partial --- layouts/_default/_markup/render-image.html | 89 +--------------------- layouts/_default/single.html | 26 ++----- layouts/partials/picture.html | 80 +++++++++++++++++++ layouts/shortcodes/figure.html | 42 +--------- 4 files changed, 92 insertions(+), 145 deletions(-) create mode 100644 layouts/partials/picture.html diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index cbd84eba..892e60b7 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,85 +1,4 @@ -{{ $url := urls.Parse .Destination }} -{{ $altText := .Text }} -{{ $caption := .Title }} -{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }} -{{ $webp := $.Page.Site.Params.enableWebp | 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 }} -
- - {{ if (and (ne .MediaType.SubType "svg") $webp) }} - - {{ end }} - {{ $altText }} - - {{ with $caption }}
{{ . | markdownify }}
{{ end }} -
- {{ else }} -
- {{ $altText }} - {{ with $caption }}
{{ . | markdownify }}
{{ end }} -
- {{ end }} -{{ end }} +
+ {{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }} + {{ with .Title }}
{{ . | markdownify }}
{{ end }} +
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 340e95a1..80225c0d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,7 +1,8 @@ {{ define "main" }} {{- $images := .Resources.ByType "image" }} {{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }} - {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }} + {{- $feature := (.Params.feature | default "*feature*") | default $cover }} + {{- $featureImg := $images.GetMatch $feature }}
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }} @@ -13,27 +14,10 @@
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
- {{ with $feature }} + {{ if $featureImg }}
- {{ $.Params.featureAlt | default $.Params.coverAlt | default + {{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }} + {{ partial "picture.html" (dict "context" . "src" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }} {{ with $.Params.coverCaption }}
{{ . | markdownify }}
{{ end }} diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html new file mode 100644 index 00000000..207f5d07 --- /dev/null +++ b/layouts/partials/picture.html @@ -0,0 +1,80 @@ +{{ $url := urls.Parse .src }} +{{ $altText := .alt }} +{{ $class := .class | default "mx-auto my-0 rounded-md" }} + +{{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }} +{{ $webp := .context.Page.Site.Params.enableWebp | default true }} + +{{ if findRE "^https?" $url.Scheme }} + {{ $altText }} +{{ else }} + {{ $resource := "" }} + {{ if .context.Page.Resources.GetMatch ($url.String) }} + {{ $resource = .context.Page.Resources.GetMatch ($url.String) }} + {{ else if resources.GetMatch ($url.String) }} + {{ $resource = resources.Get ($url.String) }} + {{ end }} + {{ with $resource }} + + {{ if (and (ne .MediaType.SubType "svg") $webp) }} + + {{ end }} + {{ $altText }} + + {{ else }} + {{ $altText }} + {{ end }} +{{ end }} + + diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 7028c6c1..d04617eb 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -1,50 +1,14 @@ {{ if .Get "default" }} {{ template "_internal/shortcodes/figure.html" . }} {{ else }} - {{ $url := urls.Parse (.Get "src") }} - {{ $altText := .Get "alt" }} + {{ $src := .Get "src" }} + {{ $alt := .Get "alt" }} {{ $caption := .Get "caption" }} {{ $href := .Get "href" }} {{ $class := .Get "class" }} {{ with $href }}{{ end }} - {{ $altText }} + {{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }} {{ with $href }}{{ end }} {{ with $caption }}
{{ . | markdownify }}
{{ end }}
From 8989f5186ad2a00656d06822854a101be46e5f5d Mon Sep 17 00:00:00 2001 From: stereobooster Date: Wed, 13 Sep 2023 08:48:48 +0200 Subject: [PATCH 4/7] added lqip to picture --- layouts/partials/picture.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 207f5d07..a8a26819 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -22,7 +22,15 @@ {{ $resource = resources.Get ($url.String) }} {{ end }} {{ with $resource }} - + {{ if ne .MediaType.SubType "svg" }} + {{ $lqip := (.Resize "20x webp").Content | base64Encode }} + + {{ else }} + + {{ end }} {{ if (and (ne .MediaType.SubType "svg") $webp) }} Date: Wed, 13 Sep 2023 09:40:46 +0200 Subject: [PATCH 5/7] add blur filter --- assets/css/compiled/main.css | 7 +++++++ assets/css/main.css | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index b5aaffbd..55802a3e 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1159,6 +1159,13 @@ body:has(#menu-controller:checked) { margin-right: 0px; } +/* LQIP */ + +picture > img { + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); +} + /* Code Copy */ .highlight-wrapper { diff --git a/assets/css/main.css b/assets/css/main.css index 42970fe0..90346eb2 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -73,6 +73,11 @@ body:has(#menu-controller:checked) { @apply rtl:mr-0; } +/* LQIP */ +picture > img { + backdrop-filter: blur(10px); +} + /* Code Copy */ .highlight-wrapper { @apply block; From afa25640c336939cb77a4cf7f140db1f3025177d Mon Sep 17 00:00:00 2001 From: stereobooster Date: Wed, 13 Sep 2023 09:46:11 +0200 Subject: [PATCH 6/7] add configuration option --- exampleSite/config/_default/params.toml | 1 + layouts/partials/picture.html | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 10baff41..07d60bc9 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -13,6 +13,7 @@ enableSearch = true enableCodeCopy = true enableImageLazyLoading = true enableWebp = true +enableLqip = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index a8a26819..6e50973b 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -4,6 +4,7 @@ {{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }} {{ $webp := .context.Page.Site.Params.enableWebp | default true }} +{{ $lqip := .context.Page.Site.Params.enableLqip | default true }} {{ if findRE "^https?" $url.Scheme }} Date: Wed, 4 Oct 2023 01:42:18 +0200 Subject: [PATCH 7/7] q20 is enough --- layouts/partials/picture.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 6e50973b..8764a800 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -24,7 +24,7 @@ {{ end }} {{ with $resource }} {{ if (and (ne .MediaType.SubType "svg") $lqip) }} - {{ $lqip := (.Resize "20x webp").Content | base64Encode }} + {{ $lqip := (.Resize "20x webp q20").Content | base64Encode }}