From 166a326dc74735f7c427a92f4b5115e205d411ce Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Fri, 6 Feb 2026 12:56:14 +0000 Subject: [PATCH 1/7] Add captions argument to `carousel` --- exampleSite/content/docs/shortcodes/index.md | 11 ++ layouts/shortcodes/carousel.html | 106 +++++++++++++------ 2 files changed, 87 insertions(+), 30 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index d5bf0d60..0ace0305 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -251,10 +251,13 @@ Call to action | Parameter | Description | | --- | --- | | `images` | **Required.** A regex string to match image names or URLs. | +| `captions` | **Optional.** A list of `key:caption` pairs. Keys can be image filenames (for local images) or full URLs (for remote images). | | `aspectRatio` | **Optional.** The aspect ratio for the carousel. It is set to `16-9` by default. | | `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) | +Captions are matched by key. For local images, use the filename (e.g. `01.jpg`). For remote images, use the full URL. + **Example 1:** 16:9 aspect ratio and verbose list of images ```md @@ -271,6 +274,14 @@ Call to action {{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} +**Example 3:** Add captions + +```md +{{}} +``` + +{{< carousel images="gallery/*" captions="{01.jpg:First image,02.jpg:Second image}" >}} +


## Chart diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index db401e21..64f6d728 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -1,7 +1,7 @@ {{ $id := delimit (slice "carousel" (partial "functions/uid.html" .) (now.UnixNano)) "-" }} {{ $aspect := (split (.Get "aspectRatio") "-") }} -{{ $aspectx := default "16" (index $aspect 0) }} -{{ $aspecty := default "9" (index $aspect 1) }} +{{ $aspectx := default "16" (index $aspect 0) }} +{{ $aspecty := default "9" (index $aspect 1) }} {{ $interval := default "2000" (.Get "interval") }} {{ $page := .Page.Resources }} @@ -11,13 +11,29 @@ {{ $imagesTemp := strings.Split $imagesTemp "," }} {{ $images := slice }} {{ range $imagesTemp }} - {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} - {{ $images = $images | append (resources.GetRemote .) }} - {{ else }} - {{ $images = $images | append ($page.Match .) }} - {{ end }} +{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} +{{ $images = $images | append (dict "resource" (resources.GetRemote .) "key" .) }} +{{ else }} +{{ range ($page.Match .) }} +{{ $images = $images | append (dict "resource" . "key" .Name) }} +{{ end }} +{{ end }} {{ end }} +{{ $captionsParam := .Get "captions" }} +{{ $captions := dict }} +{{ if $captionsParam }} +{{ $captionsTemp := strings.TrimPrefix "{" $captionsParam }} +{{ $captionsTemp = strings.TrimSuffix "}" $captionsTemp }} +{{ range (strings.Split $captionsTemp ",") }} +{{ $pair := strings.Split . ":" }} +{{ if ge (len $pair) 2 }} +{{ $key := strings.TrimSpace (index $pair 0) }} +{{ $value := strings.TrimSpace (delimit (after 1 $pair) ":") }} +{{ $captions = merge $captions (dict $key $value) }} +{{ end }} +{{ end }} +{{ end }} {{ if not .Parent }}
{{ end }}
-
- {{ $num := 0 }} - {{ range $images }} - - {{ $num = add $num 1 }} - {{ end }} -
+
+
+ {{ $num := 0 }} + {{ range $images }} + + {{ $num = add $num 1 }} + {{ end }} +
-
- {{ range $index, $image := $images }} +
+ {{ range $index, $image := $images }} {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} + {{ $resource := index $image "resource" }}
-
- +
+ carousel image {{ add $index 1 }}
+ {{ end }} +
+
+ +
+ {{ range $index, $image := $images }} + {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} + {{ $resource := index $image "resource" }} + {{ $key := index $image "key" }} + {{ $caption := "" }} + {{ $candidates := slice }} + {{ if $resource }} + {{ $candidates = $candidates | append $resource.Name (path.Base $resource.Name) $resource.RelPermalink (path.Base + $resource.RelPermalink) }} + {{ end }} + {{ if $key }} + {{ $candidates = $candidates | append $key (path.Base $key) }} + {{ end }} + {{ range $candidates }} + {{ if and (not $caption) . }} + {{ with (index $captions .) }}{{ $caption = . }}{{ end }} + {{ end }} + {{ end }} +
+ {{ $caption | markdownify }} +
{{ end }}
From 3dd3d0fae841ac77ddf7304b74025193d1bc21f9 Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Fri, 6 Feb 2026 13:06:58 +0000 Subject: [PATCH 2/7] Make captions move --- layouts/shortcodes/carousel.html | 128 +++++++++++++++---------------- 1 file changed, 62 insertions(+), 66 deletions(-) diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index 64f6d728..9f3cd004 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -1,93 +1,75 @@ {{ $id := delimit (slice "carousel" (partial "functions/uid.html" .) (now.UnixNano)) "-" }} {{ $aspect := (split (.Get "aspectRatio") "-") }} -{{ $aspectx := default "16" (index $aspect 0) }} -{{ $aspecty := default "9" (index $aspect 1) }} +{{ $aspectx := default "16" (index $aspect 0) }} +{{ $aspecty := default "9" (index $aspect 1) }} {{ $interval := default "2000" (.Get "interval") }} +{{ $imagesParam := .Get "images" }} +{{ $items := slice }} {{ $page := .Page.Resources }} -{{ $imagesTemp := .Get "images" }} +{{ $imagesTemp := $imagesParam }} {{ $imagesTemp = strings.TrimPrefix "{" $imagesTemp }} {{ $imagesTemp = strings.TrimSuffix "}" $imagesTemp }} {{ $imagesTemp := strings.Split $imagesTemp "," }} -{{ $images := slice }} {{ range $imagesTemp }} -{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} -{{ $images = $images | append (dict "resource" (resources.GetRemote .) "key" .) }} -{{ else }} -{{ range ($page.Match .) }} -{{ $images = $images | append (dict "resource" . "key" .Name) }} -{{ end }} -{{ end }} + {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} + {{ $items = $items | append (dict "resource" (resources.GetRemote .) "key" .) }} + {{ else }} + {{ range ($page.Match .) }} + {{ $items = $items | append (dict "resource" . "key" .Name) }} + {{ end }} + {{ end }} {{ end }} {{ $captionsParam := .Get "captions" }} {{ $captions := dict }} {{ if $captionsParam }} -{{ $captionsTemp := strings.TrimPrefix "{" $captionsParam }} -{{ $captionsTemp = strings.TrimSuffix "}" $captionsTemp }} -{{ range (strings.Split $captionsTemp ",") }} -{{ $pair := strings.Split . ":" }} -{{ if ge (len $pair) 2 }} -{{ $key := strings.TrimSpace (index $pair 0) }} -{{ $value := strings.TrimSpace (delimit (after 1 $pair) ":") }} -{{ $captions = merge $captions (dict $key $value) }} -{{ end }} -{{ end }} + {{ $captionsTemp := strings.TrimPrefix "{" $captionsParam }} + {{ $captionsTemp = strings.TrimSuffix "}" $captionsTemp }} + {{ range (strings.Split $captionsTemp ",") }} + {{ $pair := strings.Split . ":" }} + {{ if ge (len $pair) 2 }} + {{ $key := strings.TrimSpace (index $pair 0) }} + {{ $value := strings.TrimSpace (delimit (after 1 $pair) ":") }} + {{ $captions = merge $captions (dict $key $value) }} + {{ end }} + {{ end }} {{ end }} {{ if not .Parent }}
{{ end }}
-
-
- {{ $num := 0 }} - {{ range $images }} - - {{ $num = add $num 1 }} - {{ end }} -
- -
- {{ range $index, $image := $images }} - {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} - {{ $resource := index $image "resource" }} -
-
- carousel image {{ add $index 1 }} -
-
- {{ end }} -
+
+ {{ $num := 0 }} + {{ range $items }} + + {{ $num = add $num 1 }} + {{ end }}
-
- {{ range $index, $image := $images }} +
+ {{ range $index, $item := $items }} {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} - {{ $resource := index $image "resource" }} - {{ $key := index $image "key" }} + {{ $resource := index $item "resource" }} + {{ $key := index $item "key" }} {{ $caption := "" }} {{ $candidates := slice }} {{ if $resource }} - {{ $candidates = $candidates | append $resource.Name (path.Base $resource.Name) $resource.RelPermalink (path.Base - $resource.RelPermalink) }} + {{ $candidates = $candidates | append $resource.Name (path.Base $resource.Name) $resource.RelPermalink (path.Base $resource.RelPermalink) }} {{ end }} {{ if $key }} {{ $candidates = $candidates | append $key (path.Base $key) }} @@ -98,10 +80,24 @@ {{ end }} {{ end }}
- {{ $caption | markdownify }} + class="relative float-left -mr-[100%] {{ $hiddenClass }} w-full transition-transform ease-in-out motion-reduce:transition-none" + data-twe-carousel-item + style="transition-duration: {{ $interval }}ms;" + {{ if eq $index 0 }}data-twe-carousel-active{{ end }}> +
+
+ carousel image {{ add $index 1 }} +
+ {{ if $caption }} +
{{ $caption | markdownify }}
+ {{ end }} +
{{ end }}
From 76a23c05af50c78265614f1f18ca8bc27b2be529 Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Fri, 6 Feb 2026 13:09:58 +0000 Subject: [PATCH 3/7] Reduce the diff --- layouts/shortcodes/carousel.html | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index 9f3cd004..3bf6b42c 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -3,20 +3,19 @@ {{ $aspectx := default "16" (index $aspect 0) }} {{ $aspecty := default "9" (index $aspect 1) }} {{ $interval := default "2000" (.Get "interval") }} -{{ $imagesParam := .Get "images" }} -{{ $items := slice }} {{ $page := .Page.Resources }} -{{ $imagesTemp := $imagesParam }} +{{ $imagesTemp := .Get "images" }} {{ $imagesTemp = strings.TrimPrefix "{" $imagesTemp }} {{ $imagesTemp = strings.TrimSuffix "}" $imagesTemp }} {{ $imagesTemp := strings.Split $imagesTemp "," }} +{{ $images := slice }} {{ range $imagesTemp }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} - {{ $items = $items | append (dict "resource" (resources.GetRemote .) "key" .) }} + {{ $images = $images | append (dict "resource" (resources.GetRemote .) "key" .) }} {{ else }} {{ range ($page.Match .) }} - {{ $items = $items | append (dict "resource" . "key" .Name) }} + {{ $images = $images | append (dict "resource" . "key" .Name) }} {{ end }} {{ end }} {{ end }} @@ -47,7 +46,7 @@ class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0" data-twe-carousel-indicators> {{ $num := 0 }} - {{ range $items }} + {{ range $images }}
{{ range $index, $image := $images }} {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} From 73580313b4784341496470cc2caaf3504881aba8 Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Sun, 8 Feb 2026 14:55:48 +0000 Subject: [PATCH 5/7] Make caption visible again --- layouts/shortcodes/carousel.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index 2060ede5..73f3e258 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -59,8 +59,8 @@
+ class="relative w-full after:clear-both after:block after:content-['']" + style="overflow-x: clip; overflow-y: visible;"> {{ range $index, $image := $images }} {{ $hiddenClass := cond (eq $index 0) "" "hidden" }} {{ $resource := index $image "resource" }} From 712cb48fb26b52158cfcff555ba538739453a9df Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Sun, 8 Feb 2026 15:43:16 +0000 Subject: [PATCH 6/7] Allow markdown captions --- exampleSite/content/docs/shortcodes/index.md | 4 ++-- layouts/shortcodes/carousel.html | 8 +++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 0ace0305..993a04b1 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -277,10 +277,10 @@ Captions are matched by key. For local images, use the filename (e.g. `01.jpg`). **Example 3:** Add captions ```md -{{}} +{{}} ``` -{{< carousel images="gallery/*" captions="{01.jpg:First image,02.jpg:Second image}" >}} +{{< carousel images="gallery/*" captions="{01.jpg:First *image*,02.jpg:Second image with a [link](https://example.com)}" >}}


diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html index 73f3e258..55e69358 100644 --- a/layouts/shortcodes/carousel.html +++ b/layouts/shortcodes/carousel.html @@ -38,7 +38,7 @@ {{ if not .Parent }}
{{ end }}
@@ -83,7 +83,6 @@ data-twe-carousel-item style="transition-duration: {{ $interval }}ms;" {{ if eq $index 0 }}data-twe-carousel-active{{ end }}> -
{{ if $caption }}
{{ $caption | markdownify }}
{{ end }} -
{{ end }}
From 896bc473a89afb4b9db5b669e56a8d60ca8ebcb1 Mon Sep 17 00:00:00 2001 From: Alex Haslam Date: Sun, 8 Feb 2026 15:50:11 +0000 Subject: [PATCH 7/7] Update docs --- exampleSite/content/docs/shortcodes/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 993a04b1..d65c8678 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -251,7 +251,7 @@ Call to action | Parameter | Description | | --- | --- | | `images` | **Required.** A regex string to match image names or URLs. | -| `captions` | **Optional.** A list of `key:caption` pairs. Keys can be image filenames (for local images) or full URLs (for remote images). | +| `captions` | **Optional.** A list of `key:caption` pairs. Keys can be image filenames (for local images) or full URLs (for remote images). Captions support Markdown. | | `aspectRatio` | **Optional.** The aspect ratio for the carousel. It is set to `16-9` by default. | | `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) | @@ -277,10 +277,10 @@ Captions are matched by key. For local images, use the filename (e.g. `01.jpg`). **Example 3:** Add captions ```md -{{}} +{{}} ``` -{{< carousel images="gallery/*" captions="{01.jpg:First *image*,02.jpg:Second image with a [link](https://example.com)}" >}} +{{< carousel images="gallery/*" captions="{01.jpg:First image with *formatting*,02.jpg:Second image with a [link](https://example.com)}" >}}