Skip to content

Kirby 4.5.0

gallery

A list of images to create galleries of all sorts

Preview

Default files

Snippet

<?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>

To overwrite this default snippet, place your custom file in /site/snippets/blocks/gallery.php.

Blueprint

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

To overwrite this default blueprint, place your custom file in /site/blueprints/blocks/gallery.yml.

Vue component

kirby/blob/main/panel/src/components/Forms/Blocks/Types/Gallery.vue