From 278e1333a5d42c55fdd7110cd25814ccb9d74f6c Mon Sep 17 00:00:00 2001 From: gijoe88 Date: Wed, 13 Aug 2025 11:24:43 +0200 Subject: [PATCH 1/4] feat: add responsiveness and linkFullImage to figure shortcode Adding the responsive parameter to the figure shortcode and , on the example of cover. By default, this value is false, in order to not induce a long rendering time to existing sites with lots of images. In much the same way, adding linkFullImage to the figure shortcode, with default false for keeping current behaviour. --- layouts/shortcodes/figure.html | 54 +++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 8c93effe90..6ca401f0ed 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -2,17 +2,63 @@ {{- if eq (.Get "align") "center" }}align-center {{ end }} {{- with .Get "class" }}{{ . }}{{- end }}" {{- end -}}> - {{- if .Get "link" -}} - + {{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }} + + {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}} + {{- if hugo.IsExtended -}} + {{- $processableFormats = $processableFormats | append "webp" -}} + {{- end -}} + + {{- $image := "" -}} + {{- if $.Page.Resources -}} + {{- $image = $.Page.Resources.Get (.Get "src") -}} + {{- end -}} + {{- if not $image -}} + {{- $image = resources.Get (.Get "src") -}} + {{- end -}} + + {{- $linkURL := .Get "link" -}} + {{- $linkFullImage := .Get "linkFullImage" | default "false" | eq "true" -}} + {{- if and $linkFullImage (not $linkURL) $image -}} + {{- $linkURL = $image.Permalink -}} + {{- end -}} + + {{- $responsive := .Get "responsive" | default "false" | eq "true" -}} + + {{- $responsive = and $prod $image $responsive ( in $processableFormats $image.MediaType.SubType ) -}} + + {{- if $linkURL -}} + {{- end }} + + {{- if $responsive }} + {{- $sizes := (slice "360" "480" "720" "1080" "1500") }} + {{ with .Get + {{- else }} {{ with .Get - {{- if .Get "link" }}{{ end -}} + /> + {{- end }} + + {{- if $linkURL }}{{ end -}} {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
{{ with (.Get "title") -}} From 79775dbf355c6330cb0fe40ef6871a1232acc817 Mon Sep 17 00:00:00 2001 From: gijoe88 Date: Wed, 13 Aug 2025 11:56:33 +0200 Subject: [PATCH 2/4] fix: using relative link instead of absolute After viewing PR #1777 , replacing absolute links by relative links, and also replace the usage of src parameter in the non responsive case --- layouts/shortcodes/figure.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 6ca401f0ed..fbb80b1d16 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -20,7 +20,7 @@ {{- $linkURL := .Get "link" -}} {{- $linkFullImage := .Get "linkFullImage" | default "false" | eq "true" -}} {{- if and $linkFullImage (not $linkURL) $image -}} - {{- $linkURL = $image.Permalink -}} + {{- $linkURL = $image.RelPermalink -}} {{- end -}} {{- $responsive := .Get "responsive" | default "false" | eq "true" -}} @@ -36,11 +36,11 @@ {{ with .Get {{- else }} - {{ with .Get Date: Wed, 13 Aug 2025 15:16:29 +0200 Subject: [PATCH 3/4] fix: take src from the user if image not found This commits lets the user specify external images. --- layouts/shortcodes/figure.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index fbb80b1d16..23a58ae3ba 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -16,6 +16,7 @@ {{- if not $image -}} {{- $image = resources.Get (.Get "src") -}} {{- end -}} + {{- $imageSrc := $image.RelPermalink | default ( .Get "src" ) -}} {{- $linkURL := .Get "link" -}} {{- $linkFullImage := .Get "linkFullImage" | default "false" | eq "true" -}} @@ -49,7 +50,7 @@ {{- with .Get "height" }} height="{{ . }}"{{ end -}} /> {{- else }} - {{ with .Get Date: Wed, 13 Aug 2025 16:13:43 +0200 Subject: [PATCH 4/4] fix: add code comments Add comments to the code, and take url parsing from #1651. Hope @valnaumov will forgive me. --- layouts/shortcodes/figure.html | 43 +++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 23a58ae3ba..8b01aa1d75 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -1,3 +1,24 @@ +{{/* + Usage: + {{< figure + class="specificclass" + align="center" // this adds "center" to the class of the image + src="sourceImage" // Image location. May be in the page bundle, in the site resources, or be external to the site (eg: https://other.site/image.png) + link="targetOfTheImageLink" // Makes the image into a link + linkFullImage="false // If link is NOT provided, AND this parameter is "true", + // then makes the image into a link to the full size image + responsive="false" // If the image is found in the page bundle or in the site resources + // AND if the environment is "production" + // AND if the image is in a processable format + // AND if this parameter is "true", then smaller images are created, + // responsiveness is provided by way of srcset, the browser chooses the image size + title="Title of the image" + alt="Alternative text" + caption="Text to appear below the image" + attr="End text of the caption" + attrlink="targetURLForAttr" // If provided, turns the end text of the caption into a link + >}} +*/}} {{- end }} + {{- $responsive := .Get "responsive" | default "false" | eq "true" -}} + {{- $responsive = and $prod $image $responsive ( in $processableFormats $image.MediaType.SubType ) -}} + {{- if $responsive }} - {{- $sizes := (slice "360" "480" "720" "1080" "1500") }} + {{- $sizes := (slice "360" "480" "720" "1080" "1500") }}