From 1af817249d115ff7013d3ab1a30ea145e30924c7 Mon Sep 17 00:00:00 2001
From: Dennis Fink
Date: Sat, 8 Aug 2026 19:32:47 +0200
Subject: Add aspect-ratio-aware image galleries

This adds a project-local gallery plugin that builds deterministic rectangular
image layouts from attachment aspect ratios, with both in-process and disk-backed
layout caching.

It also adds gallery flow blocks, templates, and CSS so posts can include
responsive galleries with lazy-loaded images, configurable gaps, target ratios,
and the existing breakout/centering utilities.
---
 templates/blocks/gallery-image.html |  9 +++++++++
 templates/blocks/gallery.html       | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 templates/blocks/gallery-image.html
 create mode 100644 templates/blocks/gallery.html

(limited to 'templates/blocks')

diff --git a/templates/blocks/gallery-image.html b/templates/blocks/gallery-image.html
new file mode 100644
index 0000000..44a8e93
--- /dev/null
+++ b/templates/blocks/gallery-image.html
@@ -0,0 +1,9 @@
+{% set image = record.attachments.get(this["image"]) %}
+{% if image %}
+  <img src="{{ image | url }}"
+       width="{{ image.width }}"
+       height="{{ image.height }}"
+       alt="{{ this["alt"] }}"
+       loading="lazy"
+       decoding="async">
+{% endif %}
diff --git a/templates/blocks/gallery.html b/templates/blocks/gallery.html
new file mode 100644
index 0000000..414eaa0
--- /dev/null
+++ b/templates/blocks/gallery.html
@@ -0,0 +1,32 @@
+{% macro render_node(node, gap) %}
+  {% if node.__class__.__name__ == "ImageNode" %}
+    {% with this=node.block %}
+      {% include "blocks/gallery-image.html" %}
+    {% endwith %}
+  {% elif node.direction == "row" %}
+    <div data-direction="row">
+      <div style="--width: calc({{ node.first_width_share * 100 }}% + {{ node.first_gap_coefficient * gap }}rem)">
+        {{ render_node(node.first, gap) }}
+      </div>
+      <div style="--width: calc({{ node.second_width_share * 100 }}% + {{ node.second_gap_coefficient * gap }}rem)">
+        {{ render_node(node.second, gap) }}
+      </div>
+    </div>
+  {% else %}
+    <div data-direction="column">
+      <div>{{ render_node(node.first, gap) }}</div>
+      <div>{{ render_node(node.second, gap) }}</div>
+    </div>
+  {% endif %}
+{% endmacro %}
+
+{% set layout = this["images"].blocks
+  | gallery_layout(
+  record,
+  target_ratio=this["target_ratio"]
+  ) %}
+
+{% if layout %}
+  <div class="gallery{% if this["breakout"] != "none" %} breakout-{{ this["breakout"] }}{% endif %}"
+       style="--gap: {{ this["gap"] }}rem">{{ render_node(layout, this["gap"]) }}</div>
+{% endif %}
-- 
cgit v1.3.1