From 76edd2045669b5a9c992baae4732b4e217a3bbc6 Mon Sep 17 00:00:00 2001
From: Alex Haslam <alex.haslam@carbonre.com>
Date: Wed, 4 Feb 2026 18:00:52 +0000
Subject: [PATCH] Allow figure to be used inside a gallery

---
 assets/css/components/gallery.css            | 16 +++++++++++++++
 exampleSite/content/docs/shortcodes/index.md | 21 ++++++++++++++++++++
 layouts/shortcodes/figure.html               |  3 ++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/assets/css/components/gallery.css b/assets/css/components/gallery.css
index e9e9616b..3e7d1e64 100644
--- a/assets/css/components/gallery.css
+++ b/assets/css/components/gallery.css
@@ -83,6 +83,22 @@
   width: calc(100% - 5px);
   margin: 0px !important;
 }
+
+.gallery figure {
+  display: inline-block;
+  margin: 0;
+}
+
+.gallery figcaption {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(var(--color-neutral-600));
+}
+
+.dark .gallery figcaption {
+  color: rgb(var(--color-neutral-400));
+}
 @media (width >= 640px) {
   .sm\:grid-w10 {
     width: calc(10% - 5px);
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index d5bf0d60..99121766 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -378,6 +378,7 @@ The `figure` shortcode accepts six parameters:
 | `alt` | [Alternative text description](https://moz.com/learn/seo/alt-text) for the image. |
 | `caption` | Markdown for the image caption, which will be displayed below the image. |
 | `class` | Additional CSS classes to apply to the image. |
+| `figureClass` | Additional CSS classes to apply to the `<figure>` wrapper. Useful for galleries. |
 | `href` | URL that the image should be linked to. |
 | `target` | The target attribute for the `href` URL. |
 | `nozoom` | `nozoom=true` disables the image "zoom" functionality. This is most useful in combination with a `href` link. |
@@ -435,6 +436,8 @@ Blowfish also supports automatic conversion of images included using standard Ma
 
 In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid.
 
+If you need captions, you can use the `figure` shortcode inside the gallery. When doing so, set the grid width on the `figure` using `figureClass`, and use `caption` for the text.
+
 **Example 1: normal gallery**
 
 ```md
@@ -487,6 +490,24 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 
 <br/><br/><br/>
 
+**Example 3: gallery with captions (using `figure`)**
+
+```md
+{{</* gallery */>}}
+  {{</* figure src="gallery/01.jpg" alt="Gallery image 1" caption="First caption" figureClass="grid-w33" */>}}
+  {{</* figure src="gallery/02.jpg" alt="Gallery image 2" caption="Second caption" figureClass="grid-w33" */>}}
+  {{</* figure src="gallery/03.jpg" alt="Gallery image 3" caption="Third caption" figureClass="grid-w33" */>}}
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  {{< figure src="gallery/01.jpg" alt="Gallery image 1" caption="First caption" figureClass="grid-w33" >}}
+  {{< figure src="gallery/02.jpg" alt="Gallery image 2" caption="Second caption" figureClass="grid-w33" >}}
+  {{< figure src="gallery/03.jpg" alt="Gallery image 3" caption="Third caption" figureClass="grid-w33" >}}
+{{< /gallery >}}
+
+<br/><br/><br/>
+
 ## Gist
 
 `gist` shortcode allows you to embed a GitHub Gist directly into your content by specifying the Gist user, ID, and optionally a specific file.
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index f1e9454d..633fcdd8 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -7,10 +7,11 @@
   {{- $caption := .Get "caption" }}
   {{- $href := .Get "href" }}
   {{- $class := .Get "class" }}
+  {{- $figureClass := .Get "figureClass" }}
   {{- $target := .Get "target" | default "_blank" }}
   {{- $nozoom := .Get "nozoom" | default false -}}
 
-  <figure>
+  <figure{{ with $figureClass }} class="{{ . }}"{{ end }}>
   {{- with $href }}<a href="{{ . }}" {{ with $target }}target="{{ . }}"{{ end }} class="inline-block">{{ end -}}
   {{- if findRE "^https?" $url.Scheme }}
       <img class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}" src="{{ $url.String }}" alt="{{ $altText }}" />