Pipit Cloudinary 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.
- Download the latest version of the Pipit Cloudinary.
- Unzip the download
- Place the
PipitTemplateFilter_cloudinary.class.phpfile in the folder
- Include the class in the file
- Add your site URL in the Settings
- In your config file
perch/config/config.phpadd your Cloudinary cloud name:
You also need to enable template filters in your config:
- Log into your account and go to Settings > Security
- Under Restricted image types, make sure “Fetched URL” is unchecked
- Under Allowed fetch domains list the domain(s) you want to fetch images from
The filter by default does not rewrite your image URLs if you set your Perch production environment to development:
This is because Cloudinary requires publicly accessible URL to fetch the images from.
To use the cloudinary filter add the attribute
filter="cloudinary" to your tag:
<perch:content id="image" type="image" filter="cloudinary">
To add image manipulation and compression options use the
<perch:content id="image" type="image" filter="cloudinary" opts="w_800,h_600,f_auto">
You can also use it on external links (in a regular text field for example) by adding the
<perch:content id="image_url" type="text" filter="cloudinary" external>
external attribute tells the filter not to add your site domain.
You can do a lot with Cloudinary that it is best to refer to their documentation for the full options. Here are some common ones:
f_auto tells Cloudinary to serve the best file format for the browser. So on Chrome, for example, it will server a JPG as a WebP since the format is supported in Chrome and has a smaller file size.
c_limit allows you to limit the image dimensions. For instance,
w_1000,c_limit scales the image down if it is larger than 1000 in width, but will not scale it up if it is already smaller.
c_fill fills the image in a given dimensions similar to CSS’s
object-fit: cover and
background-size: cover. Example usage:
On the other hand
c_fit is like CSS’s
object-fit: contain and
background-size: contain as it resizes the image to take up as much space as possible in a given dimension while maintaining the aspect ratio and keeping the whole image visible. Example usage: