Setting a project thumbnail in the panel and calling it on the home page menu

Kirby 2 Solved ✅
1

Hi everyone!

Kirby is really fantastic – this is my first time using it, but I’m loving it overall.

I’m having a bit of difficulty wrapping my head around using thumbnails. The site I’m working on is a portfolio site, wherein the home page serves the title of all the client’s projects along with an image from the project that the user has chosen in the panel in a menu. Currently I’m achieving this this way:

<!-- Calling the menu on the homepage with project title and coverimage -->
<?php
// nested menu
$items = $pages->visible();
// only show the menu if items are available
if($items->count()):
?>

<main class="home-wrapper">
    <?php foreach($items as $item): ?>
        <?php
        // get all children for the current menu item
        $children = $item->children()->visible();
        // display the submenu if children are available
        if($children->count() > 0):
        ?>
            <?php foreach($children as $child): ?>
            <div class="home-project">
                <!-- Call the project title -->
                <h1 class="home-link hidden">
                    <a<?php e($child->isOpen(), ' class="active"') ?> href="<?php echo $child->url() ?>"><?php echo $child->title()->html() ?></a>
                </h1>
                <!-- end menu item code -->

                <!-- Call the project's coverimage -->
                <?php
                $img = $child->coverimage()->toFile();
                if($img):
                ?>
                <img src="<?php echo $img->url() ?>" class="home-image hidden">
                <?php endif ?>
            </div>
            <?php endforeach ?>
        <?php endif ?>
    <?php endforeach ?>

And in the blueprint for my project pages the image is chosen by the user and in the HTML by this:
Title: Project
Files:
sortable: true
pages: false
…
coverimage:
label: Cover Image
type: image

If you’d like to see an example there’s one up at http://mptestsite.000webhostapp.com/ . I’ve noticed however though that because I’ve set a max image dimension in the config of 1120px that the home page is using these really large images to be served as smaller thumbnails of 320px high (desktop) and 200px high (mobile), which seems really bad for performance.

Is there a better way that I should be doing this using thumbnails while still allowing the client to choose which image gets served on the home page, and maybe even serving the smaller 200px thumb on mobile and larger one on desktop?

Thanks!

2

You can use thumbnails of the image instead. You would have to decide if you want to use scrset to serve different sizes on different devices or some other method for responsive images.

3

@texnixe thanks for your fast response. You’re responses on other forum topics have also been a great help to me so cheers. I know I should be using thumbnails, but I don’t understand how to set up the client choice in the panel for coverimage and serve this in my home page template using the thumb functions.

4

The image select for the client remains the same, only instead of $img->url() use $img->resize(400)->url() in your template, or use a standard thumbnail size for src, and different sizes for srcset, using different resize formats.

5

Thanks texnixe. It seems like this would be the easiest way to achieve this, can you spot any issues with this method? —

<img src="<?php echo $img->resize(null, 640, 80)->url() ?>" srcset="<?php echo $img->resize(null, 320, 80)->url() ?> 1x, <?php echo $img->resize(null, 640, 80)->url() ?> 2x" class="home-image hidden">