Best way to implement cloudinary?

Kirby 2 Solved ✅
1

What is the best way to implement an image CDN, Cloudinary in my case?

I was going to use the URL API, and append image()->url() to the cloudinary URL for an automatic upload and serving, but I saw that we can code a thumb driver.

Wich way is the best? what are the downside to the 1st method? (As I have no idea how to develop a thumb driver, i’m more inclined to go the simple way but don’t know if it’s a good idea). Is any of you develop their own thumbnail driver and can give me an example?

Thank you!

2

How exactly do you want to use cloudinary? Just for thumbnail generation with the user still uploading images to pages like before via the Panel? Or without the Kirby backend?

The Imagekit plugin has a custom thumb component: https://github.com/fabianmichael/kirby-imagekit/blob/master/lib/component/thumb.php

Example drivers: https://github.com/flokosiol/kirby-focus

3

I want to serve all my portfolio images (and thumbnails) via cloudinary. i think i’ll go by the URL API method as i can’t understand the thumb drive and I’ve no idea where to start (i’m not a developper).

If I understand correctly, cloudinary can handle image appending the original url to the cloudinary url, and manage it just with that, maybe it’s the best way for me.

Thank you

4

I’m digging up the post as I need to do the same.

Have you found a workaround to upload the file to cloudinary through a hook and save the url after ?

Best,

5

I used the fetch URL method for now, it uploads images directly in cloudinary (you have to uncheck the fetching security in your account and limit fetching from your domain). It works well.

1 Like
6

Ok great. Thanks @judbd

7

Example (truncated) code for cloudinary + srcset:

<img
sizes="(min-width: 1200px) 1140px, (min-width: 990px) 960px, calc(100vw - 20px)"
srcset="
<?php echo site()->cloudinaryfetchurl().'q_auto,f_auto,w_1140,c_limit/'.$image->url() ?> 1140w,
<?php echo site()->cloudinaryfetchurl().'q_auto,f_auto,w_960,c_limit/'.$image->url() ?> 960w,
<?php echo site()->cloudinaryfetchurl().'q_auto,f_auto,w_600,c_limit/'.$image->url() ?> 600w,
<?php echo site()->cloudinaryfetchurl().'q_auto,f_auto,w_300,c_limit/'.$image->url() ?> 300w,
<?php echo site()->cloudinaryfetchurl().'q_auto,f_auto,w_2400/'.$image->url() ?> 2400w"
/>

cloudinaryfetchurl is a variable in my site.txt with the URL given by Cloudinary and if it’s empty, I fallback on native thumbnails. I cold push further and turn cloudinary parameters into variables, and create a custom kirby tag, or even factorize a little bit, but for now it’s enough for my use.

1 Like
8

Thanks, seems really easy to implement with this method. Even more by creating a plugin with the Cloudinary PHP SDK : https://github.com/cloudinary/cloudinary_php

cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", array("type"=>"fetch"))
9

For those still interested, I did a plugin :

For Kirby 2 :