Merge pull request #398 from nginxinc/image-data-grid

Img: Add data-grid support to img

Author: nginx-jack

exampleSite/content/test-product/images/_index.md

@@ -0,0 +1,4 @@
+---
+title: Images
+description: Images
+---

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

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>
+</figure>