steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Add popup parameter for figure include (#3119)

Browse Source
This commit is contained in:
John Scott 2024-05-05 10:03:40 +01:00 committed by GitHub
parent adae207d17
commit 162f659f61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/figure
View File

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

9
docs/_docs/14-helpers.md
View File

@ -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>
```