From 90e553541eb9d3a4b14d8bfabea1501be0b90172 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Fri, 3 Oct 2025 22:40:45 +0800 Subject: [PATCH 1/3] fix: enable wrapStandAloneImageWithinParagraph by default This fixes invalid HTML where figure tag is inside p tag. However, this does not fix linked images, e.g., `[![alt](image)](url)`. The cleanest way to resolve linked images is using markdown-attributes, but markdown-attributes is not recommended by CommonMark. See: - https://discourse.gohugo.io/t/how-to-do-wrap-img-with-a-inside-figure-with-render-image-html/44843 - https://github.com/gohugoio/hugo/blob/master/markup/goldmark/images/transform.go - https://gohugo.io/content-management/markdown-attributes/ - https://github.com/commonmark/commonmark-spec/wiki/Deployed-Extensions#attributes --- config/_default/markup.toml | 3 +++ exampleSite/config/_default/markup.toml | 3 +++ 2 files changed, 6 insertions(+) diff --git a/config/_default/markup.toml b/config/_default/markup.toml index fccbfcc2..1cd9c5bc 100644 --- a/config/_default/markup.toml +++ b/config/_default/markup.toml @@ -2,6 +2,9 @@ # These settings are required for the theme to function. [goldmark] + [goldmark.parser] + wrapStandAloneImageWithinParagraph = false + [goldmark.renderer] unsafe = true diff --git a/exampleSite/config/_default/markup.toml b/exampleSite/config/_default/markup.toml index fccbfcc2..1cd9c5bc 100644 --- a/exampleSite/config/_default/markup.toml +++ b/exampleSite/config/_default/markup.toml @@ -2,6 +2,9 @@ # These settings are required for the theme to function. [goldmark] + [goldmark.parser] + wrapStandAloneImageWithinParagraph = false + [goldmark.renderer] unsafe = true From 8bfa9926c7e5d9cbc374c7eadd8374c0df7ead62 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 11 Oct 2025 14:54:55 +0800 Subject: [PATCH 2/3] fix(render-image): improper srcset usage - correct srcset image w descriptor value - use compressed image for src fallback --- layouts/_default/_markup/render-image.html | 56 +++++++++++++++++----- layouts/shortcodes/figure.html | 18 ++++--- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 60a92d6d..49204097 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -2,21 +2,53 @@ {{ .alt }} {{- end }} -{{ define "RenderImageResponsive" -}} +{{- define "RenderImageResponsive" -}} + {{/* Responsive Image + The current setting sizes="(min-width: 768px) 50vw, 65vw" makes the iPhone 16 and 16 Pro + select a smaller image, while the iPhone 16 Pro Max selects a larger image. + + Steps: + 1. Check the media queries in the `sizes` property. + 2. Find the first matching value. For example, on a mobile device with a CSS pixel width + of 390px and DPR = 3 (iPhone 13), given setting sizes="(min-width: 768px) 50vw, 100vw", + it matches the `100vw` option. + 3. Calculate the optimal image size: 390 × 3 × 100% (100vw) = 1170. + 4. Find the corresponding match in the `srcset`. + + To make the browser select a smaller image on mobile devices + override the template and change the `sizes` property to "(min-width: 768px) 50vw, 30vw" + + The sizes="auto" is valid only when loading="lazy". + */}} + {{- $imgObj := .imgObj -}} + {{- $alt := .alt -}} + {{- $originalWidth := $imgObj.Width -}} + + {{- $img800 := $imgObj -}} + {{- $img1280 := $imgObj -}} + {{- if gt $originalWidth 800 -}} + {{- $img800 = $imgObj.Resize "800x" -}} + {{- end -}} + {{- if gt $originalWidth 1280 -}} + {{- $img1280 = $imgObj.Resize "1280x" -}} + {{- end -}} + + {{- $srcset := printf "%s 800w, %s 1280w" $img800.RelPermalink $img1280.RelPermalink -}} + + {{ .alt }} -{{- end }} + fetchpriority="auto" + alt="{{ $alt }}" + {{ with $imgObj.Width }}width="{{ . }}"{{ end }} + {{ with $imgObj.Height }}height="{{ . }}"{{ end }} + src="{{ $img800.RelPermalink }}" + srcset="{{ $srcset }}" + sizes="(min-width: 768px) 50vw, 65vw" + data-zoom-src="{{ $imgObj.RelPermalink }}"> +{{- end -}} {{ define "RenderImageCaption" -}} {{- with .caption }} @@ -44,7 +76,7 @@ {{- $isSVG := eq $resource.MediaType.SubType "svg" }} {{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) }} {{- if $shouldOptimize }} - {{ template "RenderImageResponsive" (dict "resource" $resource "alt" $altText) }} + {{- template "RenderImageResponsive" (dict "imgObj" $resource "alt" $altText) -}} {{- else }} {{ template "RenderImageSimple" (dict "src" $resource.RelPermalink "alt" $altText) }} {{- end }} diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 35f5e331..f1e9454d 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -31,14 +31,18 @@ {{- else }} {{ $altText }} {{- end }} {{- else }} From 792ec9a6016a3b858c5b71e71005ac90a4722f6e Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 11 Oct 2025 14:56:51 +0800 Subject: [PATCH 3/3] refactor(render-image): see detail - trim white spaces which can't be eliminated by minify - unify dict input usages --- layouts/_default/_markup/render-image.html | 77 ++++++++++++++-------- 1 file changed, 49 insertions(+), 28 deletions(-) diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 49204097..4f13a430 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,6 +1,19 @@ -{{ define "RenderImageSimple" -}} - {{ .alt }} -{{- end }} +{{- define "RenderImageSimple" -}} + {{- $imgObj := .imgObj -}} + {{- $src := .src -}} + {{- $alt := .alt -}} + {{ $alt }} +{{- end -}} {{- define "RenderImageResponsive" -}} {{/* Responsive Image @@ -50,39 +63,47 @@ data-zoom-src="{{ $imgObj.RelPermalink }}"> {{- end -}} -{{ define "RenderImageCaption" -}} - {{- with .caption }} +{{- define "RenderImageCaption" -}} + {{- with .caption -}}
{{ . | markdownify }}
- {{- end }} -{{- end }} + {{- end -}} +{{- end -}} -{{- $disableImageOptimizationMD := .Page.Site.Params.disableImageOptimizationMD | default false }} +{{- $disableImageOptimizationMD := .Page.Site.Params.disableImageOptimizationMD | default false -}} {{- $urlStr := .Destination | safeURL -}} {{- $url := urls.Parse $urlStr -}} -{{- $altText := .Text }} -{{- $caption := .Title }} -{{- $isRemote := findRE "^(https?|data)" $url.Scheme }} -{{- $resource := "" }} +{{- $altText := .Text -}} +{{- $caption := .Title -}} +{{- $isRemote := findRE "^(https?|data)" $url.Scheme -}} +{{- $resource := "" -}} -{{- if not $isRemote }} - {{- $resource = or ($.Page.Resources.GetMatch $urlStr) (resources.Get $urlStr) }} -{{- end }} +{{- if not $isRemote -}} + {{- $resource = or ($.Page.Resources.GetMatch $urlStr) (resources.Get $urlStr) -}} +{{- end -}}
- {{- if $isRemote }} - {{ template "RenderImageSimple" (dict "src" $urlStr "alt" $altText) }} - {{- else if $resource }} - {{- $isSVG := eq $resource.MediaType.SubType "svg" }} - {{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) }} - {{- if $shouldOptimize }} + {{- if $isRemote -}} + {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}} + {{- else if $resource -}} + {{- $isSVG := eq $resource.MediaType.SubType "svg" -}} + {{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) -}} + {{- if $shouldOptimize -}} {{- template "RenderImageResponsive" (dict "imgObj" $resource "alt" $altText) -}} - {{- else }} - {{ template "RenderImageSimple" (dict "src" $resource.RelPermalink "alt" $altText) }} - {{- end }} - {{- else }} - {{ template "RenderImageSimple" (dict "src" $urlStr "alt" $altText) }} - {{- end }} + {{- else -}} + {{/* Not optimize image + If it is an SVG file, pass the permalink + Otherwise, pass the resource to allow width and height attributes + */}} + {{- if $isSVG -}} + {{- template "RenderImageSimple" (dict "imgObj" "" "src" $resource.RelPermalink "alt" $altText) -}} + {{- else -}} + {{- template "RenderImageSimple" (dict "imgObj" $resource "src" $resource.RelPermalink "alt" $altText) -}} + {{- end -}} + {{- end -}} + {{- else -}} + {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}} + {{- end -}} - {{ template "RenderImageCaption" (dict "caption" $caption) }} + {{- template "RenderImageCaption" (dict "caption" $caption) -}}