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
- 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
You also need to enable template filters in your config file
Add your site URL in your config file
If you don’t define
SITE_URL, the URL from Perch Settings will be used as a fallback.
In your config file
perch/config/config.php add your Cloudinary cloud name:
By default, the filter does not rewrite your image URLs if you set your Perch production environment to development or staging:
You have the option to enable it:
Note that Cloudinary requires a publicly accessible URL to fetch the image from. So if you enable it on a local development environment for example, it won’t work.
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">
⚠️This option is available on v1.0. Newer versions handles this automatically.
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: