Pipit Cloudinary

Pipit Cloudinary is out. It is a Perch template filter that enables you to easily fetch your images to Cloudinary on the fly. Cloudinary also gives you the option to manipulate your images with dynamic URLs.

What’s Cloudinary?

Cloudinary provides cloud storage and image/video manipulation, optimisation and management. They also offer asset delivery via CDN.

They also offer URL-based transformations. So you can request images at certain dimensions or qualities on the fly.

Fetching images

There’s more than one way to upload images and serve them via Cloudinary. The template filter uses the fetch remote images approach.

It may be a good idea to refer to Cloudinary’s documentation on fetching remote images:

Fetch Enables on-the-fly manipulation of remote images and optimized delivery via a CDN. Fetched images are cached on your Cloudinary account for performance reasons. The remote images are checked on a regular basis (every 7 days by default) and if the remote image changes, the cached image is updated accordingly. This feature only supports image resource_types.

This approach requires the images to be stored somewhere else too (e.g. your server) because Cloudinary fetch existing remote images. When you fetch the images with Cloudinary, they are cached for 7 days by default, then Cloudinary will check the images every 7 days and update them.

Remote image Fetch URL

The examples below are for demonstation only. To see working examples, go to Cloudinary’s documentation

The fetch URL is:

https://res.cloudinary.com/{your-cloud-name}/image/fetch/{image_url}

And if you want to add some image manipulation options:

https://res.cloudinary.com/{your-cloud-name}/image/fetch/{options}/{image_url}

A basic example:

https://res.cloudinary.com/demo-cloudname/image/fetch/https://grabapipit.com/images/example.jpg

An example with some image manipulation options:

https://res.cloudinary.com/demo-cloudname/image/fetch/w_800,h_400,q_70/https://grabapipit.com/images/example.jpg

Using the template filter

I’ve listed the above examples to give you an idea how the fetch URLs are actually pieced together. Using the template filter you won’t have to piece them together yourself.

If you have a field with type="image, all you need to do is add filter="cloudinary":

<perch:content id="image" type="image" label="Image" filter="cloudinary">

And you would use it in an img tag exactly the same way you are used to:

<img src="<perch:content id="image" type="image" label="Image" filter="cloudinary">" alt="<perch:content id="alt" type="text" label="Description" >" >

To add some manipulation options you use the opts attribute:

<perch:content id="image" type="image" label="Image" filter="cloudinary" opts="w_800,q_80">

The filter automatically generates the Cloudinary fetch URLs for you (and includes your website domain in the URL for you too).

But you can tell the filter not to include the domain if you wish. For example, if you have a text field with a link to an external image:

<perch:content id="image_url" type="text" filter="cloudinary" external>

This approach makes it easy to integrate Cloudinary to new sites as well as existing sites with existing assets since you’re not rebuilding anything. It is also as easy to remove the Cloudinary integration if in the future you no longer wants to keep using it.

Download Pipit Cloudinary. For more details on how you can set up the template filter read the documentation.