Chained and Named Transformations with Cloudinary

By  on  
Cloudinary

One of the big advantages to using Cloudinary is the ability to dynamically create images on the fly by modifying the URL via a directory structure-like pattern.  For example, adding w_300 to the URL path of an image hosted by Cloudinary generates an image with a width of 300 pixels, saving you the time of manually generating and uploading a new image.  Dimension modification is the simplest of transformations -- you can add Instagram-like filters, shape clipping, and much more.

I wanted to take a quick moment to touch on two advanced transformation techniques from Cloudinary:  chaining transformations and creating named transformations!

Chaining Transformations

There may be cases where you will want to implement chained transformations; get an image to a certain state, make a few updates to make it another state, and so on.  To generate a cropped image of 300x300, you can use the following the c_crop,w_300,h_300 URL path:

https://res.cloudinary.com/demo/image/upload/c_crop,w_300,h_300/flower.jpg

To add a second chained transformation you can add another transformation string; for example, scale to 150 pixels:

https://res.cloudinary.com/demo/image/upload/c_crop,w_300,h_300/c_scale,w_150,r_max/flower.jpg

Image Transformations

Let's do more chaining to really modify the original image:

https://res.cloudinary.com/demo/image/upload/c_crop,h_100,w_150,x_380,y_250/c_fill,h_100,w_130/a_20/c_scale,w_0.8/flower.jpg

In the end you get something like this:

Also remember that Cloudinary provides APIs in Node.js, Python, PHP, and so on, and you can easily use their helper methods to generate the image URL:

cloudinary.image("flower.jpg", {transformation: [
  {height: 100, width: 150, x: 380, y: 250, crop: "crop"},
  {height: 100, width: 130, crop: "fill"},
  {angle: 20},
  {width: 0.8, crop: "scale"}
]})

Chained transformations via URL modification is amazingly powerful but long URLs can be a burden to work with and remember -- that's where Cloudinary's named transformations come into play.

Named Transformations

The ability to chain transformations is awesome but using multiple transformations can make the URLs very long and cumbersome to type out.  Cloudinary has a solution for you:  named transformations.  To created custom transformation names, log into your Cloudinary control panel, visit "Transformation" and then click "Create a new transformation":

Cloudinary Named Transformations

What I love about this interface is that you're provided a sample image and numerous controls to allow you to easily generate the underlying transformation code.  Once you're satisfied with your transformation, click "Save As", give your transformation a name, and your transformation will be saved for future use.

In the end you can turn a transformation URL  string from c_scale,h_329,q_58,w_624 to t_preview_image, which should aid you in development speed.  You can modify your named transformation at any time, which comes in handy if you redesign your site but don't want to keep the same image URLs.  Cloudinary allows you to create an unlimited number of custom transformations names and I highly recommend that you use them.

Cloudinary continues to impress me with their vast array of functionality:  removing backgrounds, creating waveform images, adding Instagram-like artistic filters, image autotagging, and much more.  Even without fancy effects, Cloudinary has immense value in optimized delivery and storage of photos.  Cloudinary allows you to sign up for a free account so give it a shot -- it's well worth the time!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!