Gallery not with all images, not with just one but with selectable amount of images

Kirby 3 Solved ✅
1

I tried to make the album/gallery thing from the starterkit to my needs, but it displays all images from the page, even the background images from the css. So I tried to tell the php to only take the images from the field in the panel, which it does, but only 1.

this is my code:

bilder:
        label: Screenshots
        type: files
        layout: cards
        template: image
        info: "{{ file.dimensions }}"
        image:
          ratio: 5/4
          cover: true
        max: 4
        size: small

<div class="album-gallery"<?= attr(['data-even' => $gallery->isEven(), 'data-count' => $gallery->count()], ' ') ?>>
      <?php foreach ($page -> bild() as $bild): ?>
         <?php if($bild = $page->bild()->toFile()): ?>
      
      <div>
        <figure>
          <a href="<?= $bild->link()->or($bild->url()) ?>">
            <?= $bild?>
          </a>
        </figure>
      </div>
      <?php endif ?>
      <?php endforeach ?>
    </div>

Where did I go wrong?

And of course I used the controller:

<?php

return function ($page) {

    $gallery = $page->images()->sortBy("sort");

    return [
        'gallery' => $gallery
    ];

};
2

bilder looks more like a files section than a files field to me? Apart from that, you are calling something called bild, is that another field in your blueprint? Maybe you can post your complete blueprint to make it clearer what you have defined.

If you want to get all images from the page that use the image template, you can filter them like this:

<?php foreach ($page->images()->template('image') as $image) : ?>
  <div>
        <figure>
          <a href="<?= $image->link()->or($image->url()) ?>">
            <?= $image?>
          </a>
        </figure>
      </div>
<?php endforeach ?>
3

I figured it out, like myself!

Using the Starterkit as a source of copy/paste wasn’t such a good idea in the first place (except for some really nice css), because my use case is different. Doing heavy docs searching was better. Plus - I remembered what you taught me several times before, being the difference between fetching all images on a page - $page->$images()) - and how to fetch images selected in the panel with ->toFiles(), which I guess one could call a learning curve.

So in the blueprint its:

fields:
    gallery:
      type: files
      template: image
      info: "{{ file.dimensions }}"
      image:
        ratio: 5/4
      layout: cards
      size: small
      query: page.images

    text:
      label: Text
      type: textarea
      size: medium

And in the template its:

 <div class="album-gallery">
      <?php
      $images =  $page->gallery()->toFiles();
      foreach($images as $image): ?>
        <figure>
          <a href="<?= $image->link()->or($image->url()) ?>">
          <img src="<?= $image->url() ?>" alt="">
          </a>
        </figure>
      <?php endforeach ?>
    </div>

Gives me a nice gallery for users to ruin the page with to many images - perfect!

4

Plus I didn’t need the controller and stuff from the starterkit, which gives me less opportunity to break things.

And there is one more thing. What does [data-even] and [data-count="1"] in the startekit? It appears in the css and markup. Some kind of attribute selector with counting magic?

5

:+1:

Ok, if you have only one variable definition, then a controller is probably overkill. However, as soon as you define more variables or have more complex logic, start using controllers, to keep your template code clean and separate concerns.