feat: add gallery shortcode

2026-01-21 12:11:35 +01:00 · 2024-02-26 20:56:08 +08:00 · 2024-02-26 20:56:08 +08:00 · 25361cfd7a
commit 25361cfd7a
parent 67b58641e5
18 changed files with 23 additions and 0 deletions
--- a/content/shortcodes/01-zola.png
+++ b/content/shortcodes/01-zola.png
--- a/content/shortcodes/02-zola-manet.png
+++ b/content/shortcodes/02-zola-manet.png
--- a/content/shortcodes/03-zola-cezanne.png
+++ b/content/shortcodes/03-zola-cezanne.png
--- a/content/shortcodes/04-gutenberg.jpg
+++ b/content/shortcodes/04-gutenberg.jpg
--- a/content/shortcodes/05-example.jpg
+++ b/content/shortcodes/05-example.jpg
--- a/content/shortcodes/06-example.jpg
+++ b/content/shortcodes/06-example.jpg
--- a/content/shortcodes/07-example.jpg
+++ b/content/shortcodes/07-example.jpg
--- a/content/shortcodes/08-example.jpg
+++ b/content/shortcodes/08-example.jpg
--- a/content/shortcodes/index.md
+++ b/content/shortcodes/index.md
@ -156,3 +156,15 @@ The `example` admonition.
 {% admonition(type="quote", title="quote") %}
 The `quote` admonition.
 {% end %}
+
+## Gallery
+
+The `admonition()` shortcode is very simple html-only clickable picture gallery that displays all images from the page assets.
+
+It's from [Zola documentation](https://www.getzola.org/documentation/content/image-processing/)
+
+```markdown
+{{/* gallery() */}}
+```
+
+{{ gallery() }}
--- a/static/processed_images/01-zola.7c3a26eed1c7ab5f.png
+++ b/static/processed_images/01-zola.7c3a26eed1c7ab5f.png
--- a/static/processed_images/02-zola-manet.e4241a911597aca7.png
+++ b/static/processed_images/02-zola-manet.e4241a911597aca7.png
--- a/static/processed_images/03-zola-cezanne.6a107e2be8013406.png
+++ b/static/processed_images/03-zola-cezanne.6a107e2be8013406.png
--- a/static/processed_images/04-gutenberg.faa753e9bf9c7908.jpg
+++ b/static/processed_images/04-gutenberg.faa753e9bf9c7908.jpg
--- a/static/processed_images/05-example.ae15f30d897ab593.jpg
+++ b/static/processed_images/05-example.ae15f30d897ab593.jpg
--- a/static/processed_images/06-example.c154d01e3ae79960.jpg
+++ b/static/processed_images/06-example.c154d01e3ae79960.jpg
--- a/static/processed_images/07-example.0bae5e2aea7a32b4.jpg
+++ b/static/processed_images/07-example.0bae5e2aea7a32b4.jpg
--- a/static/processed_images/08-example.5c0108fc0d117d1c.jpg
+++ b/static/processed_images/08-example.5c0108fc0d117d1c.jpg
--- a/templates/shortcodes/gallery.html
+++ b/templates/shortcodes/gallery.html
@ -0,0 +1,11 @@
+<div class="not-prose flex flex-wrap gap-2">
+  {% for asset in page.assets -%}<!---->
+  {% if asset is matching("[.](jpg|png)$") %}<!---->
+  {% set image = resize_image(path=asset, width=240, height=180) %}<!---->
+  {% set asset_name = asset | split(pat="/") | slice(start=-1) | join(sep="/") %}
+  <a href="{{ get_url(path=page.path ~ asset_name) }}" target="_blank">
+    <img class="rounded-lg" src="{{ image.url }}" />
+  </a>
+  {% endif %}<!---->
+  {% endfor %}
+</div>