From 3dd3d0fae841ac77ddf7304b74025193d1bc21f9 Mon Sep 17 00:00:00 2001
From: Alex Haslam <alex.haslam@carbonre.com>
Date: Fri, 6 Feb 2026 13:06:58 +0000
Subject: [PATCH] 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 }}<div class="width-patch"></div>{{ end }}
 <div
   id="{{ $id }}"
-  class="relative"
+  class="relative not-prose"
   data-twe-carousel-init
   data-twe-ride="carousel"
   data-twe-interval="{{ $interval }}">
-  <div class="relative">
-    <div
-      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 $images }}
-        <button
-          type="button"
-          data-twe-target="#{{ $id }}"
-          data-twe-slide-to="{{ $num }}"
-          {{ if eq $num 0 }}data-twe-carousel-active aria-current="true"{{ end }}
-          class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-label="Slide {{ $num }}"></button>
-        {{ $num = add $num 1 }}
-      {{ end }}
-    </div>
-
-    <div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
-      {{ range $index, $image := $images }}
-      {{ $hiddenClass := cond (eq $index 0) "" "hidden" }}
-      {{ $resource := index $image "resource" }}
-      <div
-        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 }}>
-        <div class="single_hero_background relative overflow-hidden"
-          style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
-          <img src="{{ $resource.RelPermalink }}"
-            class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
-            alt="carousel image {{ add $index 1 }}">
-        </div>
-      </div>
-      {{ end }}
-    </div>
+  <div
+    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 }}
+      <button
+        type="button"
+        data-twe-target="#{{ $id }}"
+        data-twe-slide-to="{{ $num }}"
+        {{ if eq $num 0 }}data-twe-carousel-active aria-current="true"{{ end }}
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide {{ $num }}"></button>
+      {{ $num = add $num 1 }}
+    {{ end }}
   </div>
 
-  <div class="mt-2">
-    {{ range $index, $image := $images }}
+  <div
+    class="relative w-full overflow-visible after:clear-both after:block after:content-['']"
+    style="clip-path: inset(0 0 -9999px 0);">
+    {{ 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 }}
     <div
-      class="{{ $hiddenClass }} text-left text-sm text-neutral-500 not-prose leading-snug [&>p]:m-0"
-      {{ if eq $index 0 }}data-twe-carousel-active{{ end }}
-      data-twe-carousel-item>
-      {{ $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 }}>
+      <figure class="m-0 relative">
+        <div class="single_hero_background relative overflow-hidden" style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
+          <img
+            src="{{ $resource.RelPermalink }}"
+            class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
+            alt="carousel image {{ add $index 1 }}">
+        </div>
+        {{ if $caption }}
+        <figcaption
+          class="absolute left-0 right-0 text-left text-sm text-neutral-500 not-prose leading-snug [&>p]:m-0"
+          style="top: calc(100% + 0.5rem);"
+        >{{ $caption | markdownify }}</figcaption>
+        {{ end }}
+      </figure>
     </div>
     {{ end }}
   </div>