- Where to find it
- Labelled Cloudinary Transformations in the "Selected Component" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
In plain English
RuleCMS images are delivered through Cloudinary, which can reshape a picture on its way to the visitor. That means one uploaded photograph can be served as a square thumbnail in one place and a wide banner in another, without anyone opening an image editor or uploading a second file.
RuleCMS already applies sensible defaults: the best file format for each browser, a sensible quality level, and a cap so the image is never sent larger than it needs to be. This setting is for the extras on top of that — usually a crop.
The instructions are short codes separated by commas. "c_fill,g_auto,ar_16:9" means "crop to fill a 16 by 9 shape, and work out automatically where the interesting part of the picture is so the crop keeps it". That "g_auto" is doing real work: it is what stops an automatic crop from cutting off someone's head.
Because this is per-device, the same photograph can be a tall crop on phones and a wide one on desktops.
What each option does
| Option | What you will see |
|---|---|
c_fill,g_auto,ar_16:9 | Crop to a widescreen shape, automatically keeping the most interesting part of the picture. |
c_fill,g_auto,ar_1:1 | Crop to a square. Useful for avatars and grid thumbnails. |
c_fit | Shrink the whole image to fit the space without cropping anything out. |
e_grayscale | Convert the image to black and white. |
e_blur:400 | Blur the image. Handy for a background that sits behind text. |
When you would use it
- One uploaded image needs to appear in different shapes in different places.
- A photograph needs a consistent crop across a set of cards.
- A background image should be blurred or desaturated so text over it stays readable.
How to change it
- Click the image component on the canvas.
- In the Modify drawer, open "Selected Component", then "Cloudinary Transformations".
- Enter comma-separated transformation codes.
- Check the result on the canvas, and update Image Intrinsic Width and Height if the shape has changed.
Watch out for
- Always include "g_auto" with a crop. Without it Cloudinary crops from the centre, which cuts heads off portraits with impressive reliability.
- If a crop changes the image's shape, update Image Intrinsic Width and Height to match, or the browser reserves space of the wrong shape.
- A mistyped code is usually ignored rather than reported, so if nothing changed, check your spelling against the Cloudinary reference.
Related settings
For developers
The technical reference for what this setting produces: Cloudinary: transformation reference. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.