From 8e2ac640dccc1f043086ede088a1e280caa2e099 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 15 Sep 2025 14:17:33 +0100
Subject: [PATCH] Img: Add data-grid support to img

---
 .../content/test-product/images/_index.md     |  4 +++
 .../content/test-product/images/image-grid.md | 35 +++++++++++++++++++
 layouts/shortcodes/img.html                   |  5 +--
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 exampleSite/content/test-product/images/_index.md
 create mode 100644 exampleSite/content/test-product/images/image-grid.md

diff --git a/exampleSite/content/test-product/images/_index.md b/exampleSite/content/test-product/images/_index.md
new file mode 100644
index 00000000..88857843
--- /dev/null
+++ b/exampleSite/content/test-product/images/_index.md
@@ -0,0 +1,4 @@
+---
+title: Images
+description: Images
+---
diff --git a/exampleSite/content/test-product/images/image-grid.md b/exampleSite/content/test-product/images/image-grid.md
new file mode 100644
index 00000000..9f723ef4
--- /dev/null
+++ b/exampleSite/content/test-product/images/image-grid.md
@@ -0,0 +1,35 @@
+---
+title: Image Grid
+description: Image Grid usage
+---
+
+The `img` shortcode has support for the `grid` attribute.
+The following values are supported:
+- `wide`
+- `last-third`
+- `first-third`
+- `first-two-thirds` (default)
+
+``` go-template
+{{</*img src="hero-graphic.webp" grid="wide"*/>}}
+```
+
+
+## Default
+By default, and image will take up the first two-thirds of the grid, allowing for call out content to its right.
+{{< img src="hero-graphic.webp">}}
+{{<call-out sideline="true">}}
+Here is an example of a callout to the side of an image.
+{{</call-out>}}
+
+
+## `wide`
+Providing the "wide" option, will make the image take up the full grid.
+
+{{< img src="hero-graphic.webp" grid="wide">}}
+
+
+## `last-third`
+Providing the "last-third" option, will make the image take up the last third of the grid, similar to a side call out.
+This makes it possible to place an image to the right of text.
+{{< img src="hero-graphic.webp" grid="last-third">}}
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 9cbc0dc7..15c4aadc 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -1,4 +1,5 @@
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+{{- $grid := .Get "grid" | default "first-two-thirds" -}}
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }} data-grid="{{$grid}}">
     {{- $src := .Get "src" -}}
     {{- $isSVG := strings.HasSuffix $src ".svg" -}}
     <img class="{{ if $isSVG }}figure-svg{{ else }}figure-bitmap{{ end }}" src="{{ .Get "src" | relURL }}"
@@ -26,4 +27,4 @@ <h4>{{ . }}</h4>
             {{- end }}
         </figcaption>
     {{- end }}
-</figure>
\ No newline at end of file
+</figure>