Loading large number of thumbs

1

On my archive page I want to load 40+ images (they’re lazyloaded and inside an accordion). When using this code everything works fine:

$item->image()->toFile()->thumb(['width' => 700, 'format' => 'webp', 'quality' => 80])?>

I’m not really happy with the image sizing and quality though so I’d like to change it to:

$item->image()->toFile()->thumb(['width' => 900, 'format' => 'webp', 'quality' => 90])?>

But because there are so many images (assumption) it seems the GD Lib driver can’t handle the request and returns a 500 internal error after ± 20 sec.

I’m using the latest version of MAMP with php 8.0.8 installed and the latest version of Kirby. The server where the website needs to be placed doesn’t seem to support ImageMagick so switching driver doesn’t seem to be an option here… Is there any other way of resolving this issue or a better way to load the images to the page? Cheers

2

I don’t think the issue is related to loading the images. The problem it’s probably related to the generation of the new version of those images.

Two options come to mind:

  1. you make the site generate the images in batches
  2. you switch to something like IMGIX
3

@manuelmoreale thanks for your quick response. You’re probably right about the generation of the images, my explanation was a bit off I’m sorry.

I would prefer option 1 but can you share any ideas of how I could make that work?

4

Well on the page where you are currently including the images you can simply limit the number with ->limit(10) for example. Let those 10 to be generated and then repeat for the next 10 with a ->offset(10).

There probably are better ways to do this but this is just the first idea that comes to mind

5

Check if you can increase the memory limit and/or max_execution_time on the server. Or check if you can find any error details in the server errror logs.

Doing this in batches would only make sense if you pregenerate the thumbs, as they are actually usually created on the fly, so one after the other.

Note that your code is no ideal, you should always check if the image exist, before you try to do anything with it.

if ($image = $item->image()->toFile()) {
  echo $image->thumb(['width' => 700, 'format' => 'webp', 'quality' => 80];
}
6

Changing the memory limit and max execution time did solve the problem. However images doesn’t seem to have the get the right height.

I’m trying to use the object height() to set the height for the accordion properly. When using this code, the images are getting stretched (before it was working though).

<?php if($item->image()->isNotEmpty()): ?>
    <?php $image = $item->image()->toFile()->thumb(['width' => 900, 'format' => 'webp', 'quality' => 90])?>
    <img loading="lazy" srcset="<?= $image->url() ?>" style="height:<?= $image->height() ?>px" alt="">
<?php endif ?>

The images are properly created but when I inspect I just see a wrong px number in the height inline element.

EDIT: I see it does uses the correct pixel size but it uses the size of the original image instead of the rendered one. Is there a way to get rendered height? probably only using js right? If I just use height:100%; the animation of the accordion stutters because it doesn’t know the image height.

7

You still have the same problem here with calling thumb() on a file that might not exist. This can potentially break your site. It does not help to check if the field is empty or not.

If the file is not resized, gd might not be working. Does it work if you use jpg as format?

Edit: I’m a bit confused now, are the thumbs now created correctly and you just have an issue with the display? You should then check your other style settings, maybe width is set to 100% or so.

8

Sorry for my miscommunication. You’re right. Indeed the image is created but since img max-width is set to 100%, the height property gets the original image height and not the displayed image height. I know this is already beyond Kirby and not a question I should normally ask here but do you have any suggestions on how to solve this?

9

Why would you want to set the height manually in a style attribute? This should work automatically.

Also, why do you put the thumb url in a srcset attribute? Purpose of srcset in an image tag is to provide different sizes of the image so that the browser can pick the one that fits the actual window width (for a full width image).

10

I came from a picture tag and forgot to change it to src instead of srcset. The images are placed in a accordion and for the animation of the accordion to open and close smoothely the first time, the height of the picture needs to be set. 100% or auto height is not working…