How to exclude cover image from gallery loop

Kirby 3 Solved ✅
1

Hello so I have a cover image, and a gallery, I want to loop through the images on my page for the gallery, but exclude the cover photo.

This is my code

                <?php
                foreach ($page->files() as $file) : ?>
                    <?php if ($file->type() == 'image') : ?>
                    <div class="col-2">
                        <a href="<?= $file->url() ?>" alt="<?= $page->title()->html() ?>" data-lightbox="gallery">
                            <img class="thumbnail" src="<?= $file->crop(200, 132)->url() ?>" alt="<?= $page->title()->html() ?>" />
                        </a>
                    </div>
                    <?php endif ?>
                <?php endforeach ?>

and this is how my blueprints are set up if that is any use?

      cover:
        type: files
        headline: Cover
        layout: cards
        template: cover
        min: 1
        max: 1
        required: required
      gallery:
        type: files
        headline: Gallery
        template: image
        min: 0
        max: 6

if anyone knows the easiest way to do this that would be great :slight_smile: Thanks

2

Why don’t you process the two fields separately?


// cover
if ($cover = $page->cover()->toFile()) {
  echo $cover->url();
}

// gallery
foreach ($page->gallery()->toFiles() as $file) {
  echo $file->url();
}

Blueprint with query prop

cover:
  type: files
  headline: Cover
  layout: cards
  template: cover
  min: 1
  max: 1
  required: required
  query: page.images

gallery:
  type: files
  headline: Gallery
  template: image
  min: 0
  max: 6
  query: page.images
1 Like
3

You can filter the files by the template you assign in your gallery files section:

<?php foreach ($page->files()->template('image') as $file) : ?>
  <?php if ($file->type() == 'image') : ?>
    <div class="col-2">
      <a href="<?= $file->url() ?>" alt="<?= $page->title()->html() ?>" data-lightbox="gallery">
        <img class="thumbnail" src="<?= $file->crop(200, 132)->url() ?>" alt="<?= $page->title()->html() ?>" />
      </a>
    </div>
  <?php endif ?>
<?php endforeach ?>

@ahmetbora solution would require using files fields, from you code snippet it is not quite clear what you are using, because your options contains a mixture of files section and files fields options.

1 Like
4

Yeah I guess you’re right, it seems to be using sections. Because used a headline prop. I thought of it as a field.

So wouldn’t it be more stable if $page->images() was used?

<?php foreach ($page->images()->template('image') as $file) : ?>
  <div class="col-2">
    <a href="<?= $file->url() ?>" alt="<?= $page->title()->html() ?>" data-lightbox="gallery">
      <img class="thumbnail" src="<?= $file->crop(200, 132)->url() ?>" alt="<?= $page->title()->html() ?>" />
    </a>
  </div>
<?php endforeach ?>
1 Like
5

Perfect! I am really not so good at finding the answers to these questions in the documentation as I often don’t know what I’m looking for!

This is exactly what I was trying to do thank you!

6

I’ve got this working, but another thing I am trying to do is remove the ability to upload videos to the gallery, again I’ve looked thru the docs and I am just not sure what I’m looking for :see_no_evil:

7

For your gallery, I see you have already set up a template

template: image

In this template you can specify the allowed file extensions like this:

accept:
    extension: jpg, png, jpeg, webp
1 Like
8

Thank you!!! <3

9 
      gallery:
        type: files
        accept:
          extension: jpg, png, jpeg
        headline: Gallery
        template: image
        min: 0
        max: 6

I’ve done this and it doesn’t work? am I doing this wrong?

10

You should have this file /site/blueprints/files/image.yml .
Pasting the accept setting in there should work.

11

ah okay, I understand now!

thanks! all working now.