From 759982fd4ac39c16319fc976d2df10fe1e0d6ab5 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Mon, 11 Sep 2023 15:11:55 +0200 Subject: [PATCH 1/4] 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/4] 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/4] 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 35e36b7a89d10d6a39ebbd28c4c89827d9de283c Mon Sep 17 00:00:00 2001 From: stereobooster Date: Wed, 4 Oct 2023 02:50:08 +0200 Subject: [PATCH 4/4] add sizes to SVG --- layouts/partials/picture.html | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html index 207f5d07..98a10a47 100644 --- a/layouts/partials/picture.html +++ b/layouts/partials/picture.html @@ -40,13 +40,33 @@ type="image/webp" /> {{ end }} + {{ $width := ""}} + {{ $height := ""}} + {{ if eq .MediaType.SubType "svg" }} + {{ $svgContent := $resource.Content }} + {{ range (findRESubmatch `width=["']?(\d*)` $svgContent 1) }} + {{ $width = index . 1 }} + {{ end }} + {{ range (findRESubmatch `height=["']?(\d*)` $svgContent 1) }} + {{ $height = index . 1 }} + {{ end }} + {{ if (eq "" $width $height) }} + {{ range (findRESubmatch `viewBox=["']?(\d*) (\d*) (\d*) (\d*)` $svgContent 1) }} + {{ $width = index . 3 }} + {{ $height = index . 4 }} + {{ end }} + {{ end }} + {{ else }} + {{ $width = .Width }} + {{ $height = .Height }} + {{ end}}