feat(figure-zoom): adds the 'figure-zoom' shortcode

3 files changed, 54 insertions, 0 deletions

diff --git a/exampleSite/content/posts/figure-zoom-sample.md b/exampleSite/content/posts/figure-zoom-sample.md
new file mode 100644
index 0000000..2aaa684
--- /dev/null
+++ b/exampleSite/content/posts/figure-zoom-sample.md
@@ -0,0 +1,25 @@
+---
+author: "Dave Kerr"
+date: 2021-04-30
+linktitle: Figure Zoom Sample
+title: Figure Zoom Sample
+weight: 10
+---
+
+The `figure-zoom` shortcode is a version of the [standard `figure` shortcode](https://gohugo.io/content-management/shortcodes/#figure) which also incorporates [Zoom.js](https://github.com/fat/zoom.js/).
+
+Here is how the markdown for the shortcode is used:
+
+```
+{{</* figure-zoom src="/images/kitten.jpg"
+    title="It's a Kitten!"
+    caption="This is a kitten, what else needs to be said?"
+*/>}}
+```
+
+It will be shown like this - click on the image to zoom in:
+
+{{< figure-zoom src="/images/kitten.jpg"
+    title="It's a Kitten!"
+    caption="This is a kitten, what else needs to be said?"
+>}}
diff --git a/exampleSite/static/images/kitten.jpg b/exampleSite/static/images/kitten.jpg
new file mode 100644
index 0000000..8ddafeb
--- /dev/null
+++ b/exampleSite/static/images/kitten.jpg
diff --git a/layouts/shortcodes/figure-zoom.html b/layouts/shortcodes/figure-zoom.html
new file mode 100644
index 0000000..97819dd
--- /dev/null
+++ b/layouts/shortcodes/figure-zoom.html
@@ -0,0 +1,29 @@
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end -}}
+    <img src="{{ .Get "src" }}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+         class="img-zoomable"
+    /><!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>