Allow figure to be used inside a gallery

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);

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.

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 }}" />