Add styles for the gallery

assets/css/index.css

@@ -239,6 +239,16 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: .75rem;
   color: var(--color-text-grey);
 }
+.text figure ul {
+  line-height: 0;
+  display: grid;
+  gap: 1.5rem;
+  margin: 0;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+.text figure ul li {
+  list-style: none;
+}
 
 hr {
   border: 0;

site/snippets/blocks/gallery.php

@@ -0,0 +1,23 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+?>
+<figure class="gallery">
+  <ul>
+    <?php foreach ($block->images()->toFiles() as $image): ?>
+    <li>
+      <?php snippet('image', [
+        'alt'      => $image->alt(),
+        'contain'  => $block->crop()->isTrue(),
+        'lightbox' => true,
+        'ratio'    => $block->ratio()->or('auto'),
+        'src'      => $image->url(),
+      ]) ?>
+    </li>
+    <?php endforeach ?>
+  </ul>
+  <?php if ($block->caption()->isNotEmpty()): ?>
+  <figcaption>
+    <?= $block->caption() ?>
+  </figcaption>
+  <?php endif ?>
+</figure>

site/snippets/blocks/image.php

@@ -13,47 +13,32 @@
   https://getkirby.com/docs/guide/templates/snippets
 */
 
-$alt      = $block->alt();
-$caption  = $block->caption();
-$contain  = $block->crop()->isFalse();
-$link     = $block->link();
-$ratio    = $block->ratio()->or('auto');
-$class    = $ratio != 'auto' ? 'img' : 'auto';
 $src = null;
-$lightbox = $link->isEmpty();
 
-if ($block->location() == 'web') {
+if ($block->location()->value() === 'web') {
+    $alt = $block->alt();
     $src = $block->src();
-    $srcValue = $src->escape('attr');
+} else if ($image = $block->image()->toFile()) {
-} elseif ($image = $block->image()->toFile()) {
+    $alt = $block->alt()->or($image->alt());
-    $alt = $alt->or($image->alt());
+    $src = $image->url();
-    $src = $srcValue = $image->url();
 }
 
-if ($ratio !== 'auto') {
-  $ratio = Str::split($ratio, '/');
-  $w = $ratio[0] ?? 1;
-  $h = $ratio[1] ?? 1;
-}
-
-$attrs = attr([
-  'class'         => $class,
-  'data-contain'  => $contain,
-  'data-lightbox' => $lightbox,
-  'href'          => $link->or($src),
-  'style'         => '--w:' . $w . '; --h:' . $h,
-]);
-
 ?>
-<?php if ($srcValue): ?>
+<?php if ($src): ?>
 <figure>
-  <a <?= $attrs ?>>
-    <img src="<?= $srcValue ?>" alt="<?= esc($alt, 'attr') ?>">
-  </a>
 
-  <?php if ($caption->isNotEmpty()): ?>
+  <?php snippet('image', [
+    'alt'      => $alt,
+    'contain'  => $block->crop()->isFalse(),
+    'lightbox' => $block->link()->isEmpty(),
+    'href'     => $block->link()->or($src),
+    'src'      => $src,
+    'ratio'    => $block->ratio()->or('auto')
+  ]) ?>
+
+  <?php if ($block->caption()->isNotEmpty()): ?>
   <figcaption class="img-caption">
-    <?= $caption ?>
+    <?= $block->caption() ?>
   </figcaption>
   <?php endif ?>
 </figure>

site/snippets/image.php

@@ -0,0 +1,12 @@
+<?php
+
+$attrs = attr([
+  'data-contain'  => $contain  ?? false,
+  'data-lightbox' => $lightbox ?? false,
+  'href'          => $href     ?? $src,
+]);
+
+?>
+<a <?= $attrs ?>>
+  <img src="<?= esc($src, 'attr') ?>" alt="<?= esc($alt, 'attr') ?>" style="aspect-ratio: <?= $ratio ?? 'auto' ?>">
+</a>