feat: add gallery shortcode

st1020 · Feb 26, 2024 · 25361cf · 25361cf
1 parent 67b5864
commit 25361cf
Show file tree

Hide file tree

Showing 18 changed files with 23 additions and 0 deletions.
diff --git a/content/shortcodes/01-zola.png b/content/shortcodes/01-zola.png
diff --git a/content/shortcodes/02-zola-manet.png b/content/shortcodes/02-zola-manet.png
diff --git a/content/shortcodes/03-zola-cezanne.png b/content/shortcodes/03-zola-cezanne.png
diff --git a/content/shortcodes/04-gutenberg.jpg b/content/shortcodes/04-gutenberg.jpg
diff --git a/content/shortcodes/05-example.jpg b/content/shortcodes/05-example.jpg
diff --git a/content/shortcodes/06-example.jpg b/content/shortcodes/06-example.jpg
diff --git a/content/shortcodes/07-example.jpg b/content/shortcodes/07-example.jpg
diff --git a/content/shortcodes/08-example.jpg b/content/shortcodes/08-example.jpg
diff --git a/content/shortcodes.md → content/shortcodes/index.md b/content/shortcodes.md → 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() }}
diff --git a/static/processed_images/01-zola.7c3a26eed1c7ab5f.png b/static/processed_images/01-zola.7c3a26eed1c7ab5f.png
diff --git a/static/processed_images/02-zola-manet.e4241a911597aca7.png b/static/processed_images/02-zola-manet.e4241a911597aca7.png
diff --git a/static/processed_images/03-zola-cezanne.6a107e2be8013406.png b/static/processed_images/03-zola-cezanne.6a107e2be8013406.png
diff --git a/static/processed_images/04-gutenberg.faa753e9bf9c7908.jpg b/static/processed_images/04-gutenberg.faa753e9bf9c7908.jpg
diff --git a/static/processed_images/05-example.ae15f30d897ab593.jpg b/static/processed_images/05-example.ae15f30d897ab593.jpg
diff --git a/static/processed_images/06-example.c154d01e3ae79960.jpg b/static/processed_images/06-example.c154d01e3ae79960.jpg
diff --git a/static/processed_images/07-example.0bae5e2aea7a32b4.jpg b/static/processed_images/07-example.0bae5e2aea7a32b4.jpg
diff --git a/static/processed_images/08-example.5c0108fc0d117d1c.jpg b/static/processed_images/08-example.5c0108fc0d117d1c.jpg
diff --git 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>