From 162f659f613562663b1b9b7663ff6c6ee506d7a0 Mon Sep 17 00:00:00 2001
From: John Scott <68079471+JohnScottUK@users.noreply.github.com>
Date: Sun, 5 May 2024 10:03:40 +0100
Subject: [PATCH] Add popup parameter for figure include (#3119)

---
 _includes/figure         | 2 ++
 docs/_docs/14-helpers.md | 9 ++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/_includes/figure b/_includes/figure
index dacc668d..5819424b 100644
--- a/_includes/figure
+++ b/_includes/figure
@@ -1,6 +1,8 @@
 <figure class="{{ include.class }}">
+  {%- if include.popup -%}<a href="{{ include.image_path | relative_url }}" class="image-popup" title="{% if include.caption %}{{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}{% endif %}">{%- endif -%}
   <img src="{{ include.image_path | relative_url }}"
        alt="{% if include.alt %}{{ include.alt }}{% endif %}">
+  {%- if include.popup -%}</a>{%- endif -%}
   {%- if include.caption -%}
     <figcaption>
       {{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}
diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md
index f151b265..eeb02984 100644
--- a/docs/_docs/14-helpers.md
+++ b/docs/_docs/14-helpers.md
@@ -53,20 +53,23 @@ Generate a `<figure>` element with a single image and caption.
 | **image_path**    | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. |
 | **alt**           | Optional     | Alternate text for image.                                                                            |
 | **caption**       | Optional     | Figure caption text. Markdown is allowed.                                                            |
+| **popup**         | Optional     | Wrap the image as a popup link using class `image-popup` |
 
 Using the `figure` include like so:
 
 ```liquid
-{% raw %}{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}{% endraw %}
+{% raw %}{% include figure popup=true image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}{% endraw %}
 ```
 
 Will output the following:
 
-{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
+{% include figure popup=true image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
 
 ```html
 <figure>
-  <img src="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image">
+  <a href="/assets/images/unsplash-image-10.jpg" class="image-popup" title="This is a figure caption.">
+    <img src="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image">
+  </a>
   <figcaption>This is a figure caption.</figcaption>
 </figure>
 ```