init with kirby, vue and pagedjs interactive

public/kirby/config/blocks/gallery/gallery.php

@@ -0,0 +1,20 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+$caption = $block->caption();
+$crop    = $block->crop()->isTrue();
+$ratio   = $block->ratio()->or('auto');
+?>
+<figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
+  <ul>
+    <?php foreach ($block->images()->toFiles() as $image): ?>
+    <li>
+      <?= $image ?>
+    </li>
+    <?php endforeach ?>
+  </ul>
+  <?php if ($caption->isNotEmpty()): ?>
+  <figcaption>
+    <?= $caption ?>
+  </figcaption>
+  <?php endif ?>
+</figure>

public/kirby/config/blocks/gallery/gallery.yml

@@ -0,0 +1,40 @@
+name: field.blocks.gallery.name
+icon: dashboard
+preview: gallery
+fields:
+  images:
+    label: field.blocks.gallery.images.label
+    type: files
+    query: model.images
+    multiple: true
+    layout: cards
+    size: small
+    empty: field.blocks.gallery.images.empty
+    uploads:
+      template: blocks/image
+    image:
+      ratio: 1/1
+  caption:
+    label: field.blocks.image.caption
+    type: writer
+    icon: text
+    inline: true
+  ratio:
+    label: field.blocks.image.ratio
+    type: select
+    placeholder: Auto
+    width: 1/2
+    options:
+      1/1: "1:1"
+      16/9: "16:9"
+      10/8: "10:8"
+      21/9: "21:9"
+      7/5: "7:5"
+      4/3: "4:3"
+      5/3: "5:3"
+      3/2: "3:2"
+      3/1: "3:1"
+  crop:
+    label: field.blocks.image.crop
+    type: toggle
+    width: 1/2