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.

2 files changed, 41 insertions, 0 deletions

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 %}