Using CDN, images are not cropped

Kirby 3 Solved ✅
1

Hello all,

I recently started to use Kirby, and followed the guide ‘Kirby loves CDN’ with KeyCDN. Setup was relatively smooth, and images are being served by the CDN now. However, the CDN serves the full-size images instead of the cropped images from the local installation. (part of the) URL from the CDN:

https://media.mysite.com/media/pages/blog/july-30-2021/bda9dc42fc-1627658388/image.jpg?width=320&height=180&crop=smart&fit=1&v=bda9dc42fc-1627658388

Same without CDN:

https://mysite.com/media/pages/blog/july-30-2021/bda9dc42fc-1627658388/image-320x180.jpg

The snipped that I use to post it is:

      <figure class="img" style="--w: 16; --h:9">
        <?php if ($cover = $article->cover()): ?>
        <?= $cover->crop(320, 180) ?>
        <?php endif ?>
      </figure>

I guess it has to do with the helper. For what it’s worth: image processing has been enabled on KeyCDN.

If someone more knowledgeable on this would be able to help, I’d be very grateful.

Thanks,
Tala

2

The code is fine and the URL for the file is also correct. The part after the ? tells that the image to be served should be 320x180.

If you serve images from a CDN, your local thumbs are not used.

3

Thank you for your fast reply. I was aware that my local thumbs are not used.

However, how can I serve cropped versions from the CDN? I was hoping that the code I have would give out an 320x180 image, that would be cached by the CDN, and when someone clicks on it, the full version would be service (from the CDN again). Currently the CDN shows an 320x180 image, but it’s the full-size image scaled down.

Thanks!

4

Yes, the code should return a cropped version of the image

You mean, you have some JavaScript in place that serves the full image?

Have you cleared the cache?

You can see KeyCDN at work on the https://getkirby.com/ website.

5

I tried clearing cache, but editing the page, and saving it, which did not work. I now removed the image, and added it again, which triggered a refresh - and all works now. Thank you for your support!

Is there a better way to clear the cache as re-uploading the images?

6

Hm, simply clearing the browser cache should have done the job without you having to make changes in the page. There is no reason for a browser to reload an image if it is already stored in the cache.

7

I am having the same issue where when using a cdn the image url looks the same as what talalash stated.

If I open the image using that url, it does open a cropped version of the image.

The cropped version of the image is not created in a media folder though. @texnixe is that normal behavior?

8

Well, yes.

1 Like