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/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..892e60b7 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,64 +1,4 @@ -{{ $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 }} +
+ {{ 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..98a10a47 --- /dev/null +++ b/layouts/partials/picture.html @@ -0,0 +1,100 @@ +{{ $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 }} + {{ $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}} + {{ $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 }}