Joshua's Cheatsheets - Cloudinary - Transformations, parameters, etc. - Cheatsheet
Light
help

Base images

Throughout this cheatsheet, the base image used for examples will be the same as the Cloudinary docs, the bee / flower image. This can either be referred to by filename:

https://res.cloudinary.com/demo/image/upload/sample

Or by ID

https://res.cloudinary.com/demo/.../...l_sample.../...

Other images we can use from demo are:

  • sheep
  • flowers
  • bike

URL Chain Order of Operations

Understanding the URL chain generated by or for Cloudinary can be a little confusing at first (or even after a while!). The order tends to work from the left to the right, but special exception is made for the final path chunk, which is usually actually the base, or the first layer in the chain.

To complicate things further, a chain can container layers, where multiple path chunks (separated by /) might be processed together, before being built back into the overall chain.

Here are some examples:

https://res.cloudinary.com/demo/image/upload/c_limit,w_300,h_300,l_bike/e_sepia/sample

With the above, the chain is:

  • Base: sample
  • Add: bike
  • Apply crop 300x300
  • Apply: sepia effect

If we wanted to apply the sepia effect ONLY to the bike image, and not to bike + sample, we need to tell Cloudinary that the cropped bike image represents a layer, and selectively apply the effect to just that layer. We can do that with the fl_layer_apply param, which is a flag.

https://res.cloudinary.com/demo/image/upload/c_limit,w_300,h_300,l_bike/e_sepia,fl_layer_apply/sample

Longer chain demo

Let's evaluate a longer chain to show how it works:

https://res.cloudinary.com/demo/image/upload/c_limit,w_300,h_300,l_bike/e_sepia,fl_layer_apply/c_limit,w_100,h_100,l_sheep/e_blackwhite,fl_layer_apply/e_shear:20:0/sample

Here is the order of operations:

  • Base: sample
  • Layer

    • Add bike, crop to 300x300
    • Apply sepia to Layer (FLAG)
  • Layer

    • Add sheep, crop to 100x100
    • Apply blackwhite (turn black and white) to Layer (FLAG)
  • Apply shear effect, with a factor of 20 degress on the x-axis - to the WHOLE chain (sample + bike (layer) + sheep (layer))

Here is what it ends up looking like:

Cloudinary Long Chain Example

Complicated wrinkle: Transforming the base layer alone

What if you want to apply an effect or transformation to the base layer itself, and nothing on top? It's actually a little surprising - you put the transformation at the beginning, which applies to the base at the end.

To put it in pseudo code:

res.cloudinary.com/{acct}/image/upload/{base_transform}/{overlay_transform}/{overlay}/{base}

Here is an example - we want to make sample have an opacity of 30% (mostly transparent) but leave the bike layer at full opacity and with the sepia effect:

https://res.cloudinary.com/demo/image/upload/o_30/c_limit,w_300,h_300,l_bike/e_sepia,fl_layer_apply/sample

Overlays

Order of operations

First, it is important to note that overlays, and in fact the entire transformation chain, tends to work backwards from what you might expect. In the URL, the overlay comes before the base image. See the specific section on order of operations and URL chaining for detais.

Overlay - ID'ed asset

If you want to overlay an image that is already uploaded to your account and has an ID, you can reference it with l_{id}, like so:

https://res.cloudinary.com/demo/image/upload/c_limit,w_300,h_300,l_bike/sample

Here we cropped the bike image to exactly 300x300 pixels, and overlaid it on top of the sample image.

Overlay - with subfolder asset base

So far, our base for all the examples has been sample, which is not in a subfolder. But what if we wanted to use

Overlay - Fetched asset

You can also overlay remote images, without uploading them! You reference the remote URL by using l_fetch:{base64WebSafe(remoteImageUrl)}.

For an example, we will overlay the Wikipedia logo from https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png.

If you base64 (websafe) that, and combine it with the above rule, you get l_fetch:aHR0cHM6Ly93d3cud2lraXBlZGlhLm9yZy9wb3J0YWwvd2lraXBlZGlhLm9yZy9hc3NldHMvaW1nL1dpa2lwZWRpYS1sb2dvLXYyLnBuZw.

Overlay:

https://res.cloudinary.com/demo/image/upload/c_limit,w_300,h_300,l_fetch:aHR0cHM6Ly93d3cud2lraXBlZGlhLm9yZy9wb3J0YWwvd2lraXBlZGlhLm9yZy9hc3NldHMvaW1nL1dpa2lwZWRpYS1sb2dvLXYyLnBuZw/sample

Neat examples:

Twitter crop (1038 x 588) + drop shadow effect

https://res.cloudinary.com/{account}/image/upload/h_548,w_1018,c_pad,y_10/e_shadow:45,y_8/c_fill,w_1038,h_588,g_center/{imageId}

Demo: Link

Markdown Source Last Updated:
Thu Oct 17 2019 19:18:19 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Tue Oct 08 2019 20:05:14 GMT+0000 (Coordinated Universal Time)