Thumbs not generated in frontend

Hi everyone

I’m trying out kirby for the first time and I must say I love it so far but I’m having issues getting the thumbnails to work.

First I’ve setup a page in kirby to which I’m adding some images in the files. I loop through them and generate a thumb for each image to add to a carousel.

Because the thumbs did not work, I changed it into a structure field, but with the same result. This is my code now:

foreach($page->carousel()->toStructure() as $item) {
	$images[] = $item->image()->toFile()->resize(30)->url();
}

I’m using a MAMP setup and already tried to check if gd was installed, changed to Imagemagick, checked the rights of the thumb folder, and some other suggestions I found on this forum but everything seems to be fine.

Still the thumbs are not generated and the original url is returned. Am I looking over something obvious? The thumbs that are generated by the image fields in kirby (75x75) seems to work fine.

Thanks for any suggestions!

It is probably worth reading through the guide on handling images in the docs. There is an example in there of doing via a structure field.

I think in your case you missing the name of the field in the structure field. If you called your field image, you will probably get undesired results, because it will clash with the built in image().

$images[] = $item->YOURIMAGEFIELDNAME()->toFile()->resize(30)->url();

Alternatively you can use the images plugin, which gives you a nice way to order the images in the panel. It’s totally possibly to do carousels without plugins, though. For example, a way i did it previously is to prefix the file names with “slide-” and filter the images in that. That way you can use other images on the page without having to set them in a field.

Kirby is great and there are often numerous ways to do something. I hope that helps.

there’s nothing wrong with the above code, at least not if your blueprint looks similar to this:

fields:
  carousel:
    label: Carousel
    type: structure
    fields:
      image:
        label: Picture
        type: image

Although you should never call an object method without checking if the image exists. So in a real world project, your code should be something like this:

foreach($page->carousel()->toStructure() as $item) {
  if($image = $item->image()->toFile()) {
    echo $image->resize(30)->url();
  }
}

If the thumbs are not generated and permission and ownership of the thumbs folder is OK (ownership usually isn’t a problem in a Mamp environment, and Panel thumbs are ok), it might be that you are running out of memory if your memory settings in php.ini are too low (and the images are too big). Although the Panel seems to be generating thumbs alright, if you get the standard 75x75 thumbs), which seems a bit weird. Do you get any PHP error messages?

You might have to enable debugging in your config.php first:

c::set('debug', true);

The GD library is usually enabled by default in a MAMP environment.

Edit: If you use a fresh Kirby Starterkit, are the thumbs created in the projects showcases on the home and projects pages?

@jimbobrjames & @texnixe, thank you both for the tips.

@textnixe, you were right. When using a fresh Kirby Starterkit, the thumbs are generated correctly. Any ideas why?

I tried changing the name of the field to picture (image was indeed not my best choice), but it didn’t change anything.

When I read through the docs of both images and creating thumbnails and compare this with my code, everything looks fine. But I still end up without thumbnails and the original url.

There’s also no error given with debug true.

Do you know of any other way I could test or log what the Image class does with my image while trying to create a thumb and without messing with the kirby core?

Are you using any (image related) plugins?

I am using the “Color Picker Field” (but does that qualify as a plugin?)
And I created my own ‘Showcase’ plugin…

Could you please post your blueprint and your current code?

Just to make sure: So even if you just loop through the images in a page folder like this, no thumbs are created?

<?php
// in a template for a page with images
foreach($page->images() as $image): ?>
    <img src="<?= $image->resize(30)->url() ?>" alt="">
<?php endforeach ?>

Strange … I commented out the ImageMagick setting in config … and now it works. So probably there is something wrong there, and not in the code. (I copied the imagemagick setting from https://getkirby.com/docs/developer-guide/configuration/thumbnails). Maybe it has to do with the location of ImageMagick. I have not checked that.

Just for info my blueprint:

title: Home

pages: false

options: 
  template: false  
  status: false  
  url: false

fields:
  title:
    label: Title
    type:  text

  intro:
    label: Intro
    type:  textarea

  carousel:
    label: Carousel
    type: structure
    style: table
    fields:
      picture:
        label: Afbeelding
        type: image

And my code (this is located in the home controller):

<?php

return function($site, $pages, $page) {

	$articles = pages(array());
	// Get only articles from blog templates
	foreach ($site->children()->visible() as $child) {
		if($child->intendedTemplate() == 'blog' && $child->featured()->bool()){
			$articles = $articles->merge($child->children()->visible()->sortBy('date','desc')->limit(2));
		}
	}
	
    $articles = $articles->sortBy('date','desc');

    /*$images = Array();
    foreach($page->carousel()->toStructure() as $item) {
    	$images[] = $item->picture()->toFile()->resize(30)->url();
    }*/

    $images = Array();
    foreach($page->images() as $image) {
    	$images[] = $image->resize(30)->url();
    }

    return array(
    	'grid' => [6,6,12],
    	'articles' => $articles,
    	'images' => $images,
    );
};

Oh, I thought you had tried without ImageMagick as well. In my MAMP environment (using MAMP Pro on a Mac) the configuration for ImageMagick looks like this:

c::set('thumbs.driver', 'im');
c::set('thumbs.bin', '/Applications/MAMP/Library/bin/convert');
1 Like

Yes, that solved it! :slight_smile:

Thanks for the help!