Adobe Photoshop Lightroom

Cloudinary is a cloud-based service that provides solutions for image and video management, including server or client-side upload, on-the-fly image and video transformations, quick CDN delivery, and a variety of asset management options.

Try for free
You do not need an Adobe account or a separate license to use the Adobe Photoshop Lightroom add-on. All you need is a Cloudinary account and to register for the add-on, both of which have free tiers.

The Adobe Photoshop Lightroom add-on gives you the ability to edit your photos using the same photo editing options and filters that you would normally adjust manually in Photoshop Lightroom, by setting additional transformation parameters in your delivery URL. This allows you to apply edits programmatically and on-the-fly, which is great for user-generated content where you can automatically apply enhancements, or let the user take control.

You can combine Lightroom edits such as contrast, sharpness and exposure, with other Cloudinary transformations to achieve your desired effect. You can also specify a Lightroom preset rather than individual parameters in your delivery URLs.

For example, to apply the Lightroom preset warm_shadow.xmp to a photo, set the effect parameter (e in URLs) to lightroom:xmp:warm_shadow.xmp:

Ruby:
Copy to clipboard
cl_image_tag("city_pic.jpg", :effect=>"lightroom:xmp:warm_shadow.xmp")
PHP:
Copy to clipboard
cl_image_tag("city_pic.jpg", array("effect"=>"lightroom:xmp:warm_shadow.xmp"))
Python:
Copy to clipboard
CloudinaryImage("city_pic.jpg").image(effect="lightroom:xmp:warm_shadow.xmp")
Node.js:
Copy to clipboard
cloudinary.image("city_pic.jpg", {effect: "lightroom:xmp:warm_shadow.xmp"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:xmp:warm_shadow.xmp")).imageTag("city_pic.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('city_pic.jpg', {effect: "lightroom:xmp:warm_shadow.xmp"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("city_pic.jpg", {effect: "lightroom:xmp:warm_shadow.xmp"})
React:
Copy to clipboard
<Image publicId="city_pic.jpg" >
  <Transformation effect="lightroom:xmp:warm_shadow.xmp" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="city_pic.jpg" >
  <cld-transformation effect="lightroom:xmp:warm_shadow.xmp" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="city_pic.jpg" >
  <cl-transformation effect="lightroom:xmp:warm_shadow.xmp">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:xmp:warm_shadow.xmp")).BuildImageTag("city_pic.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:xmp:warm_shadow.xmp")).generate("city_pic.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:xmp:warm_shadow.xmp")).generate("city_pic.jpg")!, cloudinary: cloudinary)

Original city picture Original Shade white balance option With Lightroom preset

Getting started

Before you can use the Adobe Photoshop Lightroom add-on:

  • You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.

  • Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons.

  • Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.

  • If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.

Adobe Photoshop Lightroom video tutorial

This video demonstrates how to subscribe to and use the Adobe Photoshop Lightroom add-on.

Using Lightroom presets

In Adobe Lightroom, it's possible to save a group of settings as a preset, which allows Lightroom users to apply the same edits to many photos. Using Cloudinary, you can apply Lightroom presets to your photos by specifying them in your delivery URLs.

Tip
If you don't have Adobe Lightroom, you can find many Lightroom presets on the web.

To use a Lightroom preset, upload the XMP preset to your Cloudinary account as a raw file, and in your transformation, set the effect parameter (e in URLs) to lightroom:xmp:<preset_name>.xmp. For example, if your preset is soft_mist.xmp:

Ruby:
Copy to clipboard
cl_image_tag("park.jpg", :effect=>"lightroom:xmp:soft_mist.xmp")
PHP:
Copy to clipboard
cl_image_tag("park.jpg", array("effect"=>"lightroom:xmp:soft_mist.xmp"))
Python:
Copy to clipboard
CloudinaryImage("park.jpg").image(effect="lightroom:xmp:soft_mist.xmp")
Node.js:
Copy to clipboard
cloudinary.image("park.jpg", {effect: "lightroom:xmp:soft_mist.xmp"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:xmp:soft_mist.xmp")).imageTag("park.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('park.jpg', {effect: "lightroom:xmp:soft_mist.xmp"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("park.jpg", {effect: "lightroom:xmp:soft_mist.xmp"})
React:
Copy to clipboard
<Image publicId="park.jpg" >
  <Transformation effect="lightroom:xmp:soft_mist.xmp" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="park.jpg" >
  <cld-transformation effect="lightroom:xmp:soft_mist.xmp" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="park.jpg" >
  <cl-transformation effect="lightroom:xmp:soft_mist.xmp">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:xmp:soft_mist.xmp")).BuildImageTag("park.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:xmp:soft_mist.xmp")).generate("park.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:xmp:soft_mist.xmp")).generate("park.jpg")!, cloudinary: cloudinary)

Original park picture Original Warm shadow preset Preset: soft_mist.xmp

If your preset is stored in a folder, you can specify the folder path with colon syntax, for example, here the preset warm_shadow.xmp is in the my_presets folder:

Ruby:
Copy to clipboard
cl_image_tag("park.jpg", :effect=>"lightroom:xmp:my_presets:warm_shadow.xmp")
PHP:
Copy to clipboard
cl_image_tag("park.jpg", array("effect"=>"lightroom:xmp:my_presets:warm_shadow.xmp"))
Python:
Copy to clipboard
CloudinaryImage("park.jpg").image(effect="lightroom:xmp:my_presets:warm_shadow.xmp")
Node.js:
Copy to clipboard
cloudinary.image("park.jpg", {effect: "lightroom:xmp:my_presets:warm_shadow.xmp"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:xmp:my_presets:warm_shadow.xmp")).imageTag("park.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('park.jpg', {effect: "lightroom:xmp:my_presets:warm_shadow.xmp"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("park.jpg", {effect: "lightroom:xmp:my_presets:warm_shadow.xmp"})
React:
Copy to clipboard
<Image publicId="park.jpg" >
  <Transformation effect="lightroom:xmp:my_presets:warm_shadow.xmp" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="park.jpg" >
  <cld-transformation effect="lightroom:xmp:my_presets:warm_shadow.xmp" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="park.jpg" >
  <cl-transformation effect="lightroom:xmp:my_presets:warm_shadow.xmp">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:xmp:my_presets:warm_shadow.xmp")).BuildImageTag("park.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:xmp:my_presets:warm_shadow.xmp")).generate("park.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:xmp:my_presets:warm_shadow.xmp")).generate("park.jpg")!, cloudinary: cloudinary)
Lightroom preset

You cannot specify individual Lightroom edits in addition to a Lightroom preset in the same URL. However, you can chain other Cloudinary transformations in addition to a Lightroom preset:

Ruby:
Copy to clipboard
cl_image_tag("park", :transformation=>[
  {:effect=>"lightroom:xmp:soft_mist.xmp"},
  {:radius=>50, :quality=>"auto", :border=>"40px_solid_orange"},
  {:angle=>5},
  {:width=>400, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("park", array("transformation"=>array(
  array("effect"=>"lightroom:xmp:soft_mist.xmp"),
  array("radius"=>50, "quality"=>"auto", "border"=>"40px_solid_orange"),
  array("angle"=>5),
  array("width"=>400, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("park").image(transformation=[
  {'effect': "lightroom:xmp:soft_mist.xmp"},
  {'radius': 50, 'quality': "auto", 'border': "40px_solid_orange"},
  {'angle': 5},
  {'width': 400, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("park", {transformation: [
  {effect: "lightroom:xmp:soft_mist.xmp"},
  {radius: 50, quality: "auto", border: "40px_solid_orange"},
  {angle: 5},
  {width: 400, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("lightroom:xmp:soft_mist.xmp").chain()
  .radius(50).quality("auto").border("40px_solid_orange").chain()
  .angle(5).chain()
  .width(400).crop("scale")).imageTag("park");
JS:
Copy to clipboard
cloudinary.imageTag('park', {transformation: [
  {effect: "lightroom:xmp:soft_mist.xmp"},
  {radius: 50, quality: "auto", border: "40px_solid_orange"},
  {angle: 5},
  {width: 400, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("park", {transformation: [
  {effect: "lightroom:xmp:soft_mist.xmp"},
  {radius: 50, quality: "auto", border: "40px_solid_orange"},
  {angle: 5},
  {width: 400, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="park" >
  <Transformation effect="lightroom:xmp:soft_mist.xmp" />
  <Transformation radius="50" quality="auto" border="40px_solid_orange" />
  <Transformation angle="5" />
  <Transformation width="400" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="park" >
  <cld-transformation effect="lightroom:xmp:soft_mist.xmp" />
  <cld-transformation radius="50" quality="auto" border="40px_solid_orange" />
  <cld-transformation angle="5" />
  <cld-transformation width="400" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="park" >
  <cl-transformation effect="lightroom:xmp:soft_mist.xmp">
  </cl-transformation>
  <cl-transformation radius="50" quality="auto" border="40px_solid_orange">
  </cl-transformation>
  <cl-transformation angle="5">
  </cl-transformation>
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("lightroom:xmp:soft_mist.xmp").Chain()
  .Radius(50).Quality("auto").Border("40px_solid_orange").Chain()
  .Angle(5).Chain()
  .Width(400).Crop("scale")).BuildImageTag("park")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("lightroom:xmp:soft_mist.xmp").chain()
  .radius(50).quality("auto").border("40px_solid_orange").chain()
  .angle(5).chain()
  .width(400).crop("scale")).generate("park");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("lightroom:xmp:soft_mist.xmp").chain()
  .setRadius(50).setQuality("auto").setBorder("40px_solid_orange").chain()
  .setAngle(5).chain()
  .setWidth(400).setCrop("scale")).generate("park")!, cloudinary: cloudinary)
Lightroom preset

You may want to upload your preset files as authenticated for security purposes. If you uploaded a preset as authenticated, specify authenticated: before the path to the the .xmp file. For example:

Ruby:
Copy to clipboard
cl_image_tag("park.jpg", :effect=>"lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")
PHP:
Copy to clipboard
cl_image_tag("park.jpg", array("effect"=>"lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp"))
Python:
Copy to clipboard
CloudinaryImage("park.jpg").image(effect="lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")
Node.js:
Copy to clipboard
cloudinary.image("park.jpg", {effect: "lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")).imageTag("park.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('park.jpg', {effect: "lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("park.jpg", {effect: "lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp"})
React:
Copy to clipboard
<Image publicId="park.jpg" >
  <Transformation effect="lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="park.jpg" >
  <cld-transformation effect="lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="park.jpg" >
  <cl-transformation effect="lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")).BuildImageTag("park.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")).generate("park.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:xmp:authenticated:my_presets:warm_shadow_auth.xmp")).generate("park.jpg")!, cloudinary: cloudinary)

Using individual Lightroom edits

To apply a specific Lightroom edit to a photo, set the effect parameter to lightroom, specifying the edit option and value concatenated with an underscore. For example, to apply the auto white balance setting:

Ruby:
Copy to clipboard
cl_image_tag("city_pic.jpg", :effect=>"lightroom:whitebalance_auto")
PHP:
Copy to clipboard
cl_image_tag("city_pic.jpg", array("effect"=>"lightroom:whitebalance_auto"))
Python:
Copy to clipboard
CloudinaryImage("city_pic.jpg").image(effect="lightroom:whitebalance_auto")
Node.js:
Copy to clipboard
cloudinary.image("city_pic.jpg", {effect: "lightroom:whitebalance_auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:whitebalance_auto")).imageTag("city_pic.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('city_pic.jpg', {effect: "lightroom:whitebalance_auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("city_pic.jpg", {effect: "lightroom:whitebalance_auto"})
React:
Copy to clipboard
<Image publicId="city_pic.jpg" >
  <Transformation effect="lightroom:whitebalance_auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="city_pic.jpg" >
  <cld-transformation effect="lightroom:whitebalance_auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="city_pic.jpg" >
  <cl-transformation effect="lightroom:whitebalance_auto">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:whitebalance_auto")).BuildImageTag("city_pic.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:whitebalance_auto")).generate("city_pic.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:whitebalance_auto")).generate("city_pic.jpg")!, cloudinary: cloudinary)
White balance set to shade

Note
Lightroom edits can be applied only to the image formats supported by Lightroom. So, for example, you can't use this add-on with the GIF image format.

Supported Lightroom edits

The table below lists the supported Lightroom edit options available at the time this page was published. However, you should refer to the Adobe Photoshop Lightroom API documentation for the latest and most accurate list. If values listed here differ from those in the Adobe documentation, use those in the Adobe site.

The options and values are not case-sensitive.

Edit Option Type Description
Contrast int Allowed values: -100...100
Saturation int Allowed values: -100...100
VignetteAmount int Allowed values: -100...100
Vibrance int Allowed values: -100...100
Highlights int Allowed values: -100...100
Shadows int Allowed values: -100...100
Whites int Allowed values: -100...100
Blacks int Allowed values: -100...100
Clarity int Allowed values: -100...100
Dehaze int Allowed values: -100...100
Texture int Allowed values: -100...100
Sharpness int Allowed values: 0...150
ColorNoiseReduction int Allowed values: 0...100
NoiseReduction int Allowed values: 0...100
SharpenDetail int Allowed values: 0...100
SharpenEdgeMasking int Allowed values: 0...10
Exposure real Allowed values: -5.00...5.00
SharpenRadius real Allowed values: 0.5...3.0
WhiteBalance string Allowed values: "As Shot", "Auto", "Cloudy", "Custom", "Daylight", "Flash", "Fluorescent", "Shade", "Tungsten"

Experience the Lightroom add-on

To see how the Lightroom add-on automatically applies presets or individual edits, go to our demo page.

Combining Lightroom edits

You can combine two or more Lightroom edits by separating them with colons. For example, applying Lightroom's saturation, clarity, contrast and vignette edits:

Ruby:
Copy to clipboard
cl_image_tag("city_pic.jpg", :effect=>"lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")
PHP:
Copy to clipboard
cl_image_tag("city_pic.jpg", array("effect"=>"lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"))
Python:
Copy to clipboard
CloudinaryImage("city_pic.jpg").image(effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")
Node.js:
Copy to clipboard
cloudinary.image("city_pic.jpg", {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")).imageTag("city_pic.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('city_pic.jpg', {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("city_pic.jpg", {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"})
React:
Copy to clipboard
<Image publicId="city_pic.jpg" >
  <Transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="city_pic.jpg" >
  <cld-transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="city_pic.jpg" >
  <cl-transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")).BuildImageTag("city_pic.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")).generate("city_pic.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60")).generate("city_pic.jpg")!, cloudinary: cloudinary)
Saturation, clarity, contrast and vignette Lightroom options

You can also combine Lightroom edits with Cloudinary's image transformation parameters using the chaining syntax:

Ruby:
Copy to clipboard
cl_image_tag("city_pic.jpg", :transformation=>[
  {:effect=>"lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"},
  {:width=>500, :quality=>"auto", :effect=>"distort:0:0:500:100:500:232:0:332", :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("city_pic.jpg", array("transformation"=>array(
  array("effect"=>"lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"),
  array("width"=>500, "quality"=>"auto", "effect"=>"distort:0:0:500:100:500:232:0:332", "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("city_pic.jpg").image(transformation=[
  {'effect': "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"},
  {'width': 500, 'quality': "auto", 'effect': "distort:0:0:500:100:500:232:0:332", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("city_pic.jpg", {transformation: [
  {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"},
  {width: 500, quality: "auto", effect: "distort:0:0:500:100:500:232:0:332", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60").chain()
  .width(500).quality("auto").effect("distort:0:0:500:100:500:232:0:332").crop("scale")).imageTag("city_pic.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('city_pic.jpg', {transformation: [
  {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"},
  {width: 500, quality: "auto", effect: "distort:0:0:500:100:500:232:0:332", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("city_pic.jpg", {transformation: [
  {effect: "lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60"},
  {width: 500, quality: "auto", effect: "distort:0:0:500:100:500:232:0:332", crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="city_pic.jpg" >
  <Transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60" />
  <Transformation width="500" quality="auto" effect="distort:0:0:500:100:500:232:0:332" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="city_pic.jpg" >
  <cld-transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60" />
  <cld-transformation width="500" quality="auto" effect="distort:0:0:500:100:500:232:0:332" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="city_pic.jpg" >
  <cl-transformation effect="lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60">
  </cl-transformation>
  <cl-transformation width="500" quality="auto" effect="distort:0:0:500:100:500:232:0:332" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60").Chain()
  .Width(500).Quality("auto").Effect("distort:0:0:500:100:500:232:0:332").Crop("scale")).BuildImageTag("city_pic.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60").chain()
  .width(500).quality("auto").effect("distort:0:0:500:100:500:232:0:332").crop("scale")).generate("city_pic.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("lightroom:saturation_-100:clarity_25:contrast_73:vignetteamount_60").chain()
  .setWidth(500).setQuality("auto").setEffect("distort:0:0:500:100:500:232:0:332").setCrop("scale")).generate("city_pic.jpg")!, cloudinary: cloudinary)
Chained transformations

Notes

  • The Lightroom effect (e_lightroom) must be specified before any other transformation parameters, and no other transformation parameters can be included in that first component.
  • The Lightroom effect (e_lightroom) can only be used once per URL (although you can specify as many Lightroom edits as you like in the single component).

Signed URLs

Cloudinary's dynamic image transformation URLs are powerful tools for agile web and mobile development. However, due to the potential costs of your customers accessing unplanned dynamic URLs that apply the Lightroom edits, asset transformation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API or, alternatively, you can eagerly generate the requested derived images using Cloudinary's authenticated API.

To create a signed Cloudinary URL, set the sign_url parameter to true when building a URL or creating an image tag.

Ruby:
Copy to clipboard
cl_image_tag("city_pic.jpg", :effect=>"lightroom:whitebalance_tungsten", :sign_url=>true)
PHP:
Copy to clipboard
cl_image_tag("city_pic.jpg", array("effect"=>"lightroom:whitebalance_tungsten", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("city_pic.jpg").image(effect="lightroom:whitebalance_tungsten", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("city_pic.jpg", {effect: "lightroom:whitebalance_tungsten", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("lightroom:whitebalance_tungsten")).signed(true).imageTag("city_pic.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('city_pic.jpg', {effect: "lightroom:whitebalance_tungsten", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("city_pic.jpg", {effect: "lightroom:whitebalance_tungsten"})
React:
Copy to clipboard
<Image publicId="city_pic.jpg" signUrl="true">
  <Transformation effect="lightroom:whitebalance_tungsten" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="city_pic.jpg" signUrl="true">
  <cld-transformation effect="lightroom:whitebalance_tungsten" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="city_pic.jpg" sign-url="true">
  <cl-transformation effect="lightroom:whitebalance_tungsten">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("lightroom:whitebalance_tungsten")).Signed(true).BuildImageTag("city_pic.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("lightroom:whitebalance_tungsten")).signed(true).generate("city_pic.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("lightroom:whitebalance_tungsten")).generate("city_pic.jpg", signUrl: true)!, cloudinary: cloudinary)

The generated Cloudinary URL shown below includes a signature component (/s--4PJ_eRBM--/). Only URLs with a valid signature that matches the requested image transformation are approved for on-the-fly image transformation and delivery.

For more details on signed URLs, see Signed delivery URLs.

Note
You can optionally remove the signed URL default requirement for a particular add-on by selecting it in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.

✔️ Feedback sent!

Rate this page: