User-defined variables

You can define and use user-defined variables in your image transformations. This enables you to define a transformation that includes variables and to keep the value assignment separate from the transformation definition.

You can achieve many complex transformations by using user-defined variables in conjunction with conditional transformations and arithmetic expressions.

User-defined variables especially valuable when used within named transformations. This enables complete separation of the transformation from the varying values used for delivery. This also makes it significantly easier to reuse common transformations for many resources, even when some specific adjustments must be made to the transformation depending on the specific image, the location where the resource is displayed in your site, or some other dependency.

Note
User-defined variables are not supported for video resources.

Usage Guidelines

Naming

User-defined variables start with the $ sign, for example $newwidth. The name can include only alphanumeric characters and must begin with a letter.

Value Types

Variables can be assigned a number value, string value, or they can take on the value of an existing numeric transformation parameter, such as iw (initial width), idn (initial density) or fc (face count). Note that:

  • Strings are bounded by ! !.
  • Provide several values in a string using a colon : as the delimiter. For example: !string1:string2:string3!. These multiple value strings can be used only for purposes of comparison in conjunction with _in_ or _nin_ conditional transformations.

Assigning values

Use the underscore to assign a value to a variable. For example: $newwidth_200, $color_!blue!, $newheight_iw, $stringset_!string1:string2!

Arithmetic expressions

You can use arithmetic operators with numeric variables just as you do with numeric transformation parameters, or even in combination. Consider this example:

$small_150,$big_2_mul_$small/c_fill,w_$big,h_$small_add_20

  • The $small variable is set to 150
  • The $big variable is assigned the value of 2 times the $small variable
  • The width parameter is set to use the value of $big
  • The height parameter is set to use the value of $small plus 20

Evaluation order

Within a transformation component, condition (if) statements are evaluated first, then variable assignments, then transformations. Therefore:

  • When an assignment is made in a conditional component, the assignment is evaluated only if the condition is true.

  • Even if a transformation is specified before a variable assignment, the value is assigned before the transformation.
    For example: if_w_gt_5,w_$x,$x_5
    Even though the variable x is assigned the value 5 only at the end of the transformation, that assignment will be applied first. Afterwards, the width transformation takes on the value (5) of the x variable.

Use-case example: Set height based on aspect ratio

Supported transformations

Numeric variables

You can apply a numeric variable value to the following transformation parameters:

  • w (width)
  • h (height)
  • x, y
  • q (quality)
  • if
  • ar (aspect_ratio)
  • a (angle)
  • z (zoom)
  • o (opacity)
  • r (radius)
  • dpr
  • e (effect): for the numeric strength value of an effect. For example: $strength_50,e_hue:$strength

Use-case example: Set width and aspect ratio using variables

String variables

You can apply a string variable for the following:

Effects

You can use a variable for the name and/or value of an effect. For example:

  • $effect_!brightness!,e_$effect:60
  • $artfilter_!incognito!,e_art:$artfilter
  • $firstcolor_!red!,$secondcolor_!blue!,e_tint:50:$firstcolor:$secondcolor

Text overlays

You can use a variable for all or part of the text value in a text overlay.

To mix static text with a string variable when specifying a text overlay, use the syntax: static text $(variable) more static text. For example: * $name_!Max!,l_text:arial_10:My name is $(name) the Magnificent

Use-case example: Text overlay with string variable

Image overlays

You can use a variable for the public ID of an image overlay. For example:

/$overlay_!sample!/w_400,h_400,c_fill/l_$overlay,g_south_east,x_20,y_20,w_100

Note
This is supported only for images in the root folder of your account. You cannot specify public IDs with folders as the value for an overlay variable.

Use-case example: Image overlay variable in a named transformation

Multiple string value comparisons

You can use a variable when verifying that all of the specified values are (or are not) contained within another set of values. For example:

$mystringset_!string1:string2:string3!,if_$mystringset_in_tags,....

Self-referencing variables

You can set a user-defined variable to current to refer to the image being delivered in the current URL. This enables you to use the image being delivered as the value for other transformations without needing to know the image's public_id when you are building the transformation. This also enables you to reference the delivered image from within a named transformation.

For example: $img_current/e_grayscale/l_$img,w_0.3,g_north_west,bo_10px_solid_white

This will cause the delivered grayscale image to also be used as a color overlay, in this case, displayed at the top left with a white border:

There are two ways to use the current variable.

  • pixel buffer: The default current represents the actual current pixel buffer. This means that if you apply transformations to the delivered image and then assign current to a variable, current takes on the transformed pixel buffer at that point. If in the example above, we had first applied the e_grayscale transformation, and in the next component of the chain, we defined $img_current, and following that applied the $img variable as an overlay, the overlay would get the transformed grayscale image.
  • public_id: You can alterntively assign a variable to current:public_id. This captures the unique identifier of the original asset (type, resource type and public ID, including folders) as a string. You can pass this value to an image overlay or underlay parameter if you want to reference the original image, regardless of where it is defined in the transformation chain.

Use-case example: Use a self-referencing variable to create a blurred padding background

Use-case examples

Note
For purposes of simplicity, most of these examples do not use named transformations. However, in reality, you will often get the most value from variables when used with named transformations.

Simple

Set the variable $w to 200, and the $ar parameter to 0.8. Then set the width parameter to the $w value, and the aspect ratio parameter to the $ar value, with face-based fill cropping:

Ruby:
cl_image_tag("woman.jpg", :width=>"$w", :aspect_ratio=>"$ar", :gravity=>"face", :crop=>"fill", :variables=>[["$w", "200"], ["$ar", "0.8"]])
PHP:
cl_image_tag("woman.jpg", array("width"=>"$w", "aspect_ratio"=>"$ar", "gravity"=>"face", "crop"=>"fill", "variables"=>array("$w"=>"200", "$ar"=>"0.8")))
Python:
CloudinaryImage("woman.jpg").image(width="$w", aspect_ratio="$ar", gravity="face", crop="fill", variables={"$w": "200", "$ar": "0.8"})
Node.js:
cloudinary.image("woman.jpg", {width: "$w", aspect_ratio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$w","200"),variable("$ar","0.8")).chain().width("$w").aspectRatio("$ar").gravity("face").crop("fill")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {width: "$w", aspectRatio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {width: "$w", aspect_ratio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]})
React:
<Image publicId="woman.jpg" >
  <Transformation width="$w" aspectRatio="$ar" gravity="face" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
  <cld-transformation width="$w" aspectRatio="$ar" gravity="face" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation width="$w" aspect-ratio="$ar" gravity="face" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width("$w").AspectRatio("$ar").Gravity("face").Crop("fill")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$w","200"),variable("$ar","0.8")).chain().width("$w").aspectRatio("$ar").gravity("face").crop("fill")).generate("woman.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth("$w").setAspectRatio("$ar").setGravity("face").setCrop("fill")).generate("woman.jpg")!, cloudinary: cloudinary)
Set width and aspect ratio using variables

Arithmetic

Create a new variable called $newwidth. Set the value of the variable to be the image’s initial width multiplied by 0.3 (according to that standard order of operations), and then add 10. Resize the image by setting the width parameter to the $newwidth value:

Ruby:
cl_image_tag("woman.jpg", :width=>"$newwidth", :crop=>"scale", :variables=>[["$newwidth", "10 + iw * 0.3"]])
PHP:
cl_image_tag("woman.jpg", array("width"=>"$newwidth", "crop"=>"scale", "variables"=>array("$newwidth"=>"10 + iw * 0.3")))
Python:
CloudinaryImage("woman.jpg").image(width="$newwidth", crop="scale", variables={"$newwidth": "10 + iw * 0.3"})
Node.js:
cloudinary.image("woman.jpg", {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$newwidth","10 + iw * 0.3")).chain().width("$newwidth").crop("scale")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]})
React:
<Image publicId="woman.jpg" >
  <Transformation width="$newwidth" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
  <cld-transformation width="$newwidth" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation width="$newwidth" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width("$newwidth").Crop("scale")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$newwidth","10 + iw * 0.3")).chain().width("$newwidth").crop("scale")).generate("woman.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth("$newwidth").setCrop("scale")).generate("woman.jpg")!, cloudinary: cloudinary)
Set width using arithmetic operators

Conditional

Check whether the image has portrait orientation (aspect ratio < 1). If so, set the $height variable to 300. Otherwise set the $height variable to 200. Then set the height of the delivered image to be the assigned $height value:

Ruby:
cl_image_tag("woman.jpg", :variables=>[["$height", "200"]], :transformation=>[
  {:if=>"ar_lt_1.0"},
  {:if=>"else"},
  {:height=>"$height", :crop=>"scale"}
  ])
PHP:
cl_image_tag("woman.jpg", array("variables"=>array("$height"=>"200"), "transformation"=>array(
  array("if"=>"ar_lt_1.0"),
  array("if"=>"else"),
  array("height"=>"$height", "crop"=>"scale")
  )))
Python:
CloudinaryImage("woman.jpg").image(variables={"$height": "200"}, transformation=[
  {'if': "ar_lt_1.0"},
  {'if': "else"},
  {'height': "$height", 'crop': "scale"}
  ])
Node.js:
cloudinary.image("woman.jpg", {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$height","200")).chain()
  .if("ar_lt_1.0").chain()
  .if("else").chain()
  .height("$height").crop("scale")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]})
React:
<Image publicId="woman.jpg" >
  <Transformation if="ar_lt_1.0" />
  <Transformation if="else" />
  <Transformation height="$height" crop="scale" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
  <cld-transformation if="ar_lt_1.0" />
  <cld-transformation if="else" />
  <cld-transformation height="$height" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation if="ar_lt_1.0">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation height="$height" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("ar_lt_1.0").Chain()
  .If("else").Chain()
  .Height("$height").Crop("scale")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$height","200")).chain()
  .if("ar_lt_1.0").chain()
  .if("else").chain()
  .height("$height").crop("scale")).generate("woman.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("ar_lt_1.0").chain()
  .setIf("else").chain()
  .setHeight("$height").setCrop("scale")).generate("woman.jpg")!, cloudinary: cloudinary)

landscape orientation landscape orientation portrait orientation portrait orientation

Text overlay

Set the variable $award to the string value !First!. Then set the text overlay to use the text $(award) Place. The text overlay is also set to be placed near the bottom of the image on a semi-transparent, rounded border.

Ruby:
cl_image_tag("woman.jpg", :overlay=>{:font_family=>"Arial", :font_size=>45, :text=>"%20%20%24%28award%29%20%20Place%20"}, :gravity=>"south", :y=>10, :background=>"gray", :radius=>10, :opacity=>75, :color=>"white", :variables=>[["$award", "!First!"]])
PHP:
cl_image_tag("woman.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>45, "text"=>"%20%20%24%28award%29%20%20Place%20"), "gravity"=>"south", "y"=>10, "background"=>"gray", "radius"=>10, "opacity"=>75, "color"=>"white", "variables"=>array("$award"=>"!First!")))
Python:
CloudinaryImage("woman.jpg").image(overlay={'font_family': "Arial", 'font_size': 45, 'text': "%20%20%24%28award%29%20%20Place%20"}, gravity="south", y=10, background="gray", radius=10, opacity=75, color="white", variables={"$award": "!First!"})
Node.js:
cloudinary.image("woman.jpg", {overlay: {font_family: "Arial", font_size: 45, text: "%20%20%24%28award%29%20%20Place%20"}, gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "white", variables: [["$award", "!First!"]]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$award","!First!")).chain().overlay(new TextLayer().fontFamily("Arial").fontSize(45).text("%20%20%24%28award%29%20%20Place%20")).gravity("south").y(10).background("gray").radius(10).opacity(75).color("white")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).text("%20%20%24%28award%29%20%20Place%20"), gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "white", variables: [["$award", "!First!"]]}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).text("%20%20%24%28award%29%20%20Place%20"), gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "white", variables: [["$award", "!First!"]]})
React:
<Image publicId="woman.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, text: "%20%20%24%28award%29%20%20Place%20"}} gravity="south" y="10" background="gray" radius="10" opacity="75" color="white" />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 45, text: "%20%20%24%28award%29%20%20Place%20"}} gravity="south" y="10" background="gray" radius="10" opacity="75" color="white" />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation overlay="text:Arial_45:%20%20%24%28award%29%20%20Place%20" gravity="south" y="10" background="gray" radius="10" opacity="75" color="white">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(45).Text("%20%20%24%28award%29%20%20Place%20")).Gravity("south").Y(10).Background("gray").Radius(10).Opacity(75).Color("white")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$award","!First!")).chain().overlay(new TextLayer().fontFamily("Arial").fontSize(45).text("%20%20%24%28award%29%20%20Place%20")).gravity("south").y(10).background("gray").radius(10).opacity(75).color("white")).generate("woman.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45:%20%20%24%28award%29%20%20Place%20").setGravity("south").setY(10).setBackground("gray").setRadius(10).setOpacity(75).setColor("white")).generate("woman.jpg")!, cloudinary: cloudinary)
text overlay with string variable

Named transformation

In a named transformation called passport_photo, define the cropping for an image to be a 70% zoomed thumbnail with face detection, using a variable for the width and height, where height is relative to width, to get the legal 3.5x4.5 (0.78) ratio. There is also a white border with a gray edge that emulates a printed photo border.

Named transformation definition:
g_face,c_thumb,w_$width,h_$width_div_0.78,z_0.6/bo_13px_solid_white/bo_2px_solid_gray

In the delivery URL code, you define the value for the width parameter, which is applied to the named transformation to yield a printable passport photo of the desired size:

Ruby:
cl_image_tag("woman.jpg", :transformation=>["passport_photo"], :variables=>[["$width", "115"]])
PHP:
cl_image_tag("woman.jpg", array("transformation"=>array("passport_photo"), "variables"=>array("$width"=>"115")))
Python:
CloudinaryImage("woman.jpg").image(transformation=["passport_photo"], variables={"$width": "115"})
Node.js:
cloudinary.image("woman.jpg", {transformation: ["passport_photo"], variables: [["$width", "115"]]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$width","115")).chain().named("passport_photo")).imageTag("woman.jpg");
JS:
cloudinary.imageTag('woman.jpg', {transformation: ["passport_photo"], variables: [["$width", "115"]]}).toHtml();
jQuery:
$.cloudinary.image("woman.jpg", {transformation: ["passport_photo"], variables: [["$width", "115"]]})
React:
<Image publicId="woman.jpg" >
  <Transformation transformation={["passport_photo"]} />
</Image>
Vue.js:
<cld-image publicId="woman.jpg" >
  <cld-transformation transformation={["passport_photo"]} />
</cld-image>
Angular:
<cl-image public-id="woman.jpg" >
  <cl-transformation transformation={{["passport_photo"]}}>
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("passport_photo")).BuildImageTag("woman.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$width","115")).chain().named("passport_photo")).generate("woman.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("passport_photo")).generate("woman.jpg")!, cloudinary: cloudinary)

width = 115 pixels width = 115 pixels width = 140 pixels width = 140 pixels width = 165 pixels width = 165 pixels

The 3 images above use essentially identical delivery URLs, each calling the same named transformation, only with different values assigned to the $width variable: 115, 140, or 165.

Image overlay in a named transformation

Create a named transformation called image_ratings with the following definition:
c_fill,h_400,w_400/c_scale,g_south_east,l_$rating,w_100,x_20,y_20

The image overlay is defined as a variable called rating. You can then assign the variable value with either the thumbs-up or thumbs-down image to display the rating for a particular image. For example:

Ruby:
cl_image_tag("log_cabin.jpg", :transformation=>["image_ratings"], :variables=>[["$rating", "!thumbs-up!"]])
PHP:
cl_image_tag("log_cabin.jpg", array("transformation"=>array("image_ratings"), "variables"=>array("$rating"=>"!thumbs-up!")))
Python:
CloudinaryImage("log_cabin.jpg").image(transformation=["image_ratings"], variables={"$rating": "!thumbs-up!"})
Node.js:
cloudinary.image("log_cabin.jpg", {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$rating","!thumbs-up!")).chain().named("image_ratings")).imageTag("log_cabin.jpg");
JS:
cloudinary.imageTag('log_cabin.jpg', {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]}).toHtml();
jQuery:
$.cloudinary.image("log_cabin.jpg", {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]})
React:
<Image publicId="log_cabin.jpg" >
  <Transformation transformation={["image_ratings"]} />
</Image>
Vue.js:
<cld-image publicId="log_cabin.jpg" >
  <cld-transformation transformation={["image_ratings"]} />
</cld-image>
Angular:
<cl-image public-id="log_cabin.jpg" >
  <cl-transformation transformation={{["image_ratings"]}}>
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("image_ratings")).BuildImageTag("log_cabin.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$rating","!thumbs-up!")).chain().named("image_ratings")).generate("log_cabin.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("image_ratings")).generate("log_cabin.jpg")!, cloudinary: cloudinary)

Thumbs-up rating Thumbs-up rating Thumbs-down rating Thumbs-down rating

Self-referencing variable

Check whether the image width is less than 800 pixels. If so, add a blurred, increased-brightness version of the current image behind the delivered image. The blurred image will be 800 pixels wide and the same height as the original image.

Ruby:
cl_image_tag("butterfly", :variables=>[["$img", "current"], ["$height", "ih"]], :transformation=>[
  {:if=>"w_lt_800"},
  {:effect=>"blur:800", :underlay=>"%24img", :width=>800, :height=>"$height", :crop=>"scale"},
  {:effect=>"brightness:40", :flags=>"layer_apply"},
  {:if=>"end"}
  ])
PHP:
cl_image_tag("butterfly", array("variables"=>array("$img"=>"current", "$height"=>"ih"), "transformation"=>array(
  array("if"=>"w_lt_800"),
  array("effect"=>"blur:800", "underlay"=>"%24img", "width"=>800, "height"=>"$height", "crop"=>"scale"),
  array("effect"=>"brightness:40", "flags"=>"layer_apply"),
  array("if"=>"end")
  )))
Python:
CloudinaryImage("butterfly").image(variables={"$img": "current", "$height": "ih"}, transformation=[
  {'if': "w_lt_800"},
  {'effect': "blur:800", 'underlay': "%24img", 'width': 800, 'height': "$height", 'crop': "scale"},
  {'effect': "brightness:40", 'flags': "layer_apply"},
  {'if': "end"}
  ])
Node.js:
cloudinary.image("butterfly", {variables: [["$img", "current"], ["$height", "ih"]], transformation: [
  {if: "w_lt_800"},
  {effect: "blur:800", underlay: "%24img", width: 800, height: "$height", crop: "scale"},
  {effect: "brightness:40", flags: "layer_apply"},
  {if: "end"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$img","current"),variable("$height","ih")).chain()
  .if("w_lt_800").chain()
  .effect("blur:800").underlay(new Layer().publicId("%24img")).width(800).height("$height").crop("scale").chain()
  .effect("brightness:40").flags("layer_apply").chain()
  .if("end")).imageTag("butterfly");
JS:
cloudinary.imageTag('butterfly', {variables: [["$img", "current"], ["$height", "ih"]], transformation: [
  {if: "w_lt_800"},
  {effect: "blur:800", underlay: new cloudinary.Layer().publicId("%24img"), width: 800, height: "$height", crop: "scale"},
  {effect: "brightness:40", flags: "layer_apply"},
  {if: "end"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("butterfly", {variables: [["$img", "current"], ["$height", "ih"]], transformation: [
  {if: "w_lt_800"},
  {effect: "blur:800", underlay: new cloudinary.Layer().publicId("%24img"), width: 800, height: "$height", crop: "scale"},
  {effect: "brightness:40", flags: "layer_apply"},
  {if: "end"}
  ]})
React:
<Image publicId="butterfly" >
  <Transformation if="w_lt_800" />
  <Transformation effect="blur:800" underlay="%24img" width="800" height="$height" crop="scale" />
  <Transformation effect="brightness:40" flags="layer_apply" />
  <Transformation if="end" />
</Image>
Vue.js:
<cld-image publicId="butterfly" >
  <cld-transformation if="w_lt_800" />
  <cld-transformation effect="blur:800" underlay="%24img" width="800" height="$height" crop="scale" />
  <cld-transformation effect="brightness:40" flags="layer_apply" />
  <cld-transformation if="end" />
</cld-image>
Angular:
<cl-image public-id="butterfly" >
  <cl-transformation if="w_lt_800">
  </cl-transformation>
  <cl-transformation effect="blur:800" underlay="%24img" width="800" height="$height" crop="scale">
  </cl-transformation>
  <cl-transformation effect="brightness:40" flags="layer_apply">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("w_lt_800").Chain()
  .Effect("blur:800").Underlay(new Layer().PublicId("%24img")).Width(800).Height("$height").Crop("scale").Chain()
  .Effect("brightness:40").Flags("layer_apply").Chain()
  .If("end")).BuildImageTag("butterfly")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$img","current"),variable("$height","ih")).chain()
  .if("w_lt_800").chain()
  .effect("blur:800").underlay(new Layer().publicId("%24img")).width(800).height("$height").crop("scale").chain()
  .effect("brightness:40").flags("layer_apply").chain()
  .if("end")).generate("butterfly");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("w_lt_800").chain()
  .setEffect("blur:800").setUnderlay("%24img").setWidth(800).setHeight("$height").setCrop("scale").chain()
  .setEffect("brightness:40").setFlags("layer_apply").chain()
  .setIf("end")).generate("butterfly")!, cloudinary: cloudinary)
Add blurred underlay padding for the current image

More use cases

Try the Center objects using trim cookbook receipe for a step-by-step walk through of trimming solid background from an image and then centering it on a background whose size is determined by variables based on the images initial width and height.