How to use block/image.php for the gallery block?

Kirby 3 Questions 🤔
1

I want to use the blocks/image.php for the gallery as well but I cannot make it work.
This is my code of the snippets/blocks/gallery.php:

<?php /** @var \Kirby\Cms\Block $block */ ?>

  <ul>
    <?php foreach ($block->images()->toFiles() as $blockimage): ?>
    <li>
        <?php snippet('blocks/image', ['block' => 'blockimage']) ?>
    </li>
    <?php endforeach ?>
  </ul>

and this is the snippets/blocks/image.php:

<?php

$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') {
    $src = $block->src();
} elseif ($image = $block->image()->toFile()) {
    $alt = $alt ?? $image->alt();
    $src = $image->url();
}

$lightbox = $src;

if ($ratio !== 'auto') {
  $ratio = Str::split($ratio, '/');
  $w = $ratio[0] ?? 1;
  $h = $ratio[1] ?? 1;
}

$attrs = attr([
  'class'         => $class . ' flex justify-center',
  'data-contain'  => $contain,
  'data-lightbox' => $lightbox,
  'href'          => $src, /* ->or($src) */
  'style'         => '--w:' . $w . '; --h:' . $h,
]);

?>
<?php if ($src): ?>
<figure class="!my-0 !py-0">
  <a <?= $attrs ?>>
  ​  <picture>
    <!-- <source srcset="<?= $image->thumb(['width'   => 512, 'quality' => 48, 'format' => 'avif'])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 48, 'format' => 'avif'])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 48, 'format' => 'avif'])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 48, 'format' => 'avif'])->url() ?> 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif"> -->
    <source srcset="<?= $image->thumb(['width'   => 512, 'quality' => 55, 'format' => 'webp'])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 55, 'format' => 'webp'])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 55, 'format' => 'webp'])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 55, 'format' => 'webp'])->url() ?> 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
    <img src="<?= $src ?>" height="<?= $h ?>" width="<?= $w ?>" alt="<?= $alt ?>" class="!my-1"  style="margin-top: 0;" srcset="<?= $image->thumb(['width'   => 512, 'quality' => 50])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 50])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 50])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 50])->url() ?> 2048w" decoding="async" loading="lazy" style="background-size: cover; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\' xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\' xlink%3Ahref=\'data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII=\'%3E%3C/image%3E%3C/svg%3E'); ">
    </picture>
  </a>

  <?php if ($caption->isNotEmpty()): ?>
  <a href="<?= $link ?>" class="nomark">
  <figcaption class="img-caption inline-block text-center !my-0 !py-0">
    <?= $caption ?>
  </figcaption>
  </a>
  <?php endif ?>
</figure>
<?php endif ?>
2

You have to pass the variable, not the string blockimage:

<?php snippet('blocks/image', ['block' => $blockimage]) ?>
3

Then I get this error in the template:

Block error: “Too few arguments to function Kirby\Cms\File::crop(), 0 passed in /var/www/virtual/peleke7/dev.domain.de/site/snippets/blocks/image.php on line 18 and at least 1 expected” in block type: “gallery”

4

Well, you are only passing a blockimage, while the snippet expects a block

5

Can it work like this?

<?php foreach ($blocks as $block): ?>
<li>
    <?php snippet('blocks/image', ['block' => $block]) ?>
</li>
<?php endforeach ?>
6

What is $blocks in your example?

7

I am just confused what to use in the foreach statement if I need to pass the whole $block variable to the image snippet.

8

Somehow to me reusing the image snippet for the gallery doesn’t make sense because the field names are different. At least without making changes to the inage block snippet

9

Yeah, you are right.
Then I only have to figure out how to create a flexible gallery view that fits to two - many images as my current approach is tied to fixed columns which is not good for a dynamic gallery element:

<?php /** @var \Kirby\Cms\Block $block */ ?>

<div class="justify-content mx-auto space-y-2 lg:space-y-0 lg:gap-2 lg:grid lg:grid-cols-2">
    <?php foreach ($block->images()->toFiles() as $image): ?>
    <div class="w-full rounded">
        <?= $image ?>
    </div>
    <?php endforeach ?>
</div>