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:
label: Cover 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?