Create thumbnails in subdirectory of page

[ROAD42]

Hi, I’d like to share one of my thumbnail.destination functions.

I didn’t want to create the thumbnails of every page in a central directory so I created a ‘thumbs.destination’-function which creates them in a subdirectory to their position. Kirby >= 2.1.0 is needed.

Example
The thumbnail for the image in “/content/page1/image.jpg” was “/thumbs/image-123456.jpg”.
The new location is “/content/page1/thumbs/image-123456.jpg”

Source
Insert the following in ‘/site/config/config.php’

   c::set('thumbs.destination', function($thumb) {

    $destination = new Obj();

    // Create filename (copied from /kirby/toolkit/lib/thumb.php)
    $destination->filename = str::template($thumb->options['filename'], array(
        'extension'    => $thumb->source->extension(),
        'name'         => $thumb->source->name(),
        'filename'     => $thumb->source->filename(),
        'safeName'     => f::safeName($thumb->source->name()),
        'safeFilename' => f::safeName($thumb->source->name()) . '.' . $thumb->extension(),
        'width'        => $thumb->options['width'],
        'height'       => $thumb->options['height'],
        'hash'         => md5($thumb->source->root() . $thumb->settingsIdentifier()),
      ));

    // Thumbnail foldername
    // TODO: Create setting like c::set('thumbs.subdirectory', 'thumbs');
    $t = 'thumbs';


    // Recalc URL
    $urlPath = str_replace($thumb->source->filename(), "", $thumb->url()) . $t;
    $destination->url  = $urlPath . '/' . $destination->filename;

    // Create Outputdirectory if it doesn't exist
    $outputFolder = new Folder($thumb->dir() . DS . $t);
    if (!$outputFolder->exists())
        $outputFolder->make(true);

    $destination->root = $outputFolder . DS . $destination->filename;

    return $destination;

});

Have fun with it

Christoph

[AugustMiller]

This is a great idea. Frankly, it doesn’t bother me that the thumbs are stored elsewhere (after all, they aren’t content, they’re consequential/cached data of the application), but it’s nice to know this kind of thing is possible. For anyone tracking their content folder in Git (or a secondary git repository), the unified thumbs directory could actually be pretty useful. Some may have strong opinions about the separation between editorial and generated content.

How does the panel deal with this additional folder? You may need to add…

c::set('content.file.ignore',array('thumbs'));

…to config.php in order to prevent Kirby from acknowledging the thumbs directory as a “page.”

[anon77445132]

I’m assuming that I’m stupid.

But why is it necessary for you to change the standard of Kirby, because I can confirm that this works just fine?

[ROAD42]

Hey, Heiner,

I manage a website with some pages here. Most of the pages contain a image-gallery with >10 images on it.
Each image is rendered (via thumb) in different sizes to cover mobile clients (iPhone, iPad) and desktops (with and without Retinadisplays).

When a new article is published the thumbnails are created in a subdirectory of the page and not 4000 pictures in one directory.

When I remove an article i don’t have to look after every thumbnail. Sometimes I change pictures in a gallery and need them to be re-resized. Now I just have to remove the t-directory and the thumbs are recreated.

Then there is a small point with SEO. The page is about photography and the images have a “speaking” name, like the page has. Search engines see now a link like: “http://mysite.de/blog/articlename/t/imageofwhatever-width.jpg” instead of “http://mysite.de/thumbs/imageofwhatever-hash.jpg”.

If you want to have a look. Here is an example of you hometown: http://www.bewahrediezeit.de/blog/synthie-pop-party-in-erfurt-2015

Christoph

[jenstornell]

I think it’s hard to figure out which of these two structures are the best one. Right know I think yours are, but that can change.

Root thumbs folder (default)

Benefits

• Easy to remove all when needed.
• Separate generated data and content.

Problems

• The generated thumbnail does not get deleted when the page is deleted.
• The generated thumbnail does not get deleted when the image size is not longer used in the template.
• If clearing the thumbs folder often it will make a heavy load on services like tinypng, if used.

Content thumbs folder

Benefits

• When removing a page, the thumbs are deleted.
• When a thumbnail size is no longer used it’s not deleted, but it will automatically be fixed when creating and deleting pages, in time.
• When using services like tinypng, it’s good to not remove and regenerate the images too often. With this structure there is no need for clearing the thumbs folder.

Problems

• The images are scattered through the content folders.
• Generated data is mixed with the content.

Summery

I will probably have the thumbs in the content folders because I like to only have generated thumbnails to images that actually still exists. I don’t want to regenerate all the thumbnails too often because I might use tinypng.