How to auto-generate thumbnails
Say hello to the first official Kirby plugin: The Thumb Plugin
Generating thumbnails for your images is always a bit of a hassle and it's definitely easier if you don't need to do that at all. The Thumb Plugin automatically generates thumbnails for the images, which you embed in your pages without any further ado. It caches the generated results, so the thumbnails will be displayed very fast and each time you update the original image it will automatically generate a new thumbnail.
Installation
Installing plugins for Kirby is easy.
If it is not there yet add the plugins folder to your site folder:
/site/plugins
Go and download the thumb.php file from Github and throw it into the plugins folder
/site/plugins/thumb.php
That's it! Kirby will load all php files in the plugins folder automatically.
The thumbs cache folder
The Thumb plugin needs a place where it can store all the resized versions of your original images. We don't want to mess up our nice and clean content folders, so what you need to do is to add a thumbs cache folder to the root directory of your site:
/thumbs
You must make sure that this folder is writable! Otherwise the plugin won't be able to save the resized versions in there. If you don't like the location of that folder you can set it to wherever you want. Read more about it in the plugin docs
Usage
First you should add some images to your content folders.
Lets assume those are all unresized originals, which would be way too big for our pages.
The template
Next we gonna add a little gallery to our template. It's going to be a simple list of images. Nothing too fancy, but I guess you all have your own awesome ideas how to extend and improve that.
<?php snippet('header') ?>
<?php snippet('menu') ?>
<ul>
<?php foreach($page->images() as $image): ?>
<li><img src="<?php echo $image->url() ?>" /></li>
<?php endforeach ?>
</ul>
<?php snippet('footer') ?>The example above will give us a gallery with all the unresized originals. So this would probably be a big mess depending on the sizes of your images.
All we need to replace, to make the plugin work is the image tag:
…
<ul>
<?php foreach($page->images() as $image): ?>
<li><?php echo thumb($image, array('width' => 300)) ?></li>
<?php endforeach ?>
</ul>
…The plugin will now take the original images and resize them so the maximum width will be
300 pixels.
There are plenty of options to fit the size of the images just as you like. Here are some examples:
echo thumb($image, array('height' => 300));
// the maximum height of the image will now be 300 pixels.
echo thumb($image, array('width' => 200, 'height' => 300));
// the max. width will be 200px and the max. height will be 300 px.
// this is very handy if you need to place an image in a container
// with a fixed size.
echo thumb($image, array('width' => 200, 'crop' => true));
// the image will now be cropped to 200px by 200px
// cropped images will always be upscaled so they will definitely cover
// the entire area
echo thumb($image, array('width' => 200, 'height' => 300, 'crop' => true));
// the image will now be cropped to 200px by 300px
// cropped images will always be upscaled so they will definitely cover
// the entire area
echo thumb($image, array('width' => 500, 'upscale' => true));
// by default images won't be upscaled (except cropped images) but you
// can set upscale to true to force smaller images to be upscaled.
echo thumb($image, array('width' => 500, 'quality' => 50));
// for jpgs you can define the compression quality, which will be used
// for the resized versions. 100 is the default value, which is also the
// highest possible quality.This makes it very easy to build your perfect gallery template with nice resized images instead of the huge originals.
It will still give you all the flexibility you need to work with the originals. For example you can easily link to them when a visitor clicks on one of the thumbnails:
<ul>
<?php foreach($page->images() as $image): ?>
<li><a href="<?php echo $image->url() ?>"><?php echo thumb($image, array('width' => 300)) ?></a></li>
<?php endforeach ?>
</ul>If you combine this with the awesome fancybox script or any other javascript lightbox thingy you get a decent and easily maintainable gallery with just a few lines of code.
Requirements
The Thumb Plugin runs on GD Lib. It's the most common image manipulation library for PHP. There are more fancy solutions out there like imagemagick, but I wanted this one to be compatible with almost any environment. If you still need to adapt it to imagemagick for example, please just fork it on Github.