Select image to be displayed as a cover image

The CMS Questions
1

Hello.

I am stuck on something and have seen similar posts on here, but the solutions mentioned have not worked for me. So I thought I’d post my own.

What I want to achieve:
I have multiple posts that each contain many images which get displayed. I want to select one of those images to be displayed as the thumbnail/cover image on the parent page.

I have tried to add a checkbox to the image blueprint, so when the box is checked, that image is the one which is displayed as the thumbnail/cover image - but this is not working. I see the checkbox within the panel, but nothing gets rendered on the frontend.

What I added to the blueprint file:

cover_image:
 label: Cover Image
 type: checkboxes
 options:
  yes: Yes
 text: Select this image as the cover image for the parent page

The code I added to the template file:

    <ul class="grid-container gallery-list">
    <?php foreach ($page->children()->flip() as $gallery): ?>
    <li class="gallery">
        <div class="gallery-details">
            <?php $coverImage = $gallery->cover_image()->toFile();
            if ($coverImage): ?>
                <a href="<?= $gallery->url() ?>">
                    <img src="<?= $coverImage->url() ?>" alt="<?= $coverImage->alt() ?>" title="<?= $coverImage->title() ?>" class="cover-image" loading="lazy" height="100%" width="100%">
                </a>
            <?php endif ?>
            <a href="<?= $gallery->url() ?>">
                <p class="gallery-title"><?= $gallery->title() ?></p>
            </a>
        </div>
    </li>
    <?php endforeach ?>
    </ul>

For the record, I’m a designer by day and someone who tries to make things work by night. So I hope you can see past any glaring errors I’ve made.

Thanks.

2

The problem here is cover_image, what you are doing is try to get a page field. What you want to do is filter all images by whether the value of file metadata is set to true. You probably want to use a toggle field instead of checkboxes.

if ($image = $gallery->images()->filterBy('cover_image', true)->first()) {
  // do stuff
}
3

Thank you! That’s been bugging me for ages.

I changed the following in the blueprint:

          cover_image:
            label: Use as cover image?
            type: toggle
            default: false
            text:
              - "False"
              - "True"

And this for the collection page list item:

    <?php foreach ($page->children()->flip() as $gallery): ?>
        <li class="gallery">
            <div class="gallery-details">
                <?php 
                // Check if there is an image designated as the cover image
                $image = $gallery->images()->filterBy('cover_image', true)->first();
                if ($image): ?>
                    <a href="<?= $gallery->url() ?>">
                        <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>" title="<?= $image->title() ?>" class="cover-image" loading="lazy" height="100%" width="100%">
                    </a>
                <?php endif ?>
                <a href="<?= $gallery->url() ?>">
                    <p class="gallery-title"><?= $gallery->title() ?></p>
                </a>
            </div>
        </li>
    <?php endforeach ?>

Thanks for your help!