User-defined variables and arithmetic image transformations

You can add arithmetic and/or user-defined variables to your transformations. These expressions are evaluated on-the-fly, enabling you to add an additional layer of sophistication and flexibility to your transformations.

User-defined variables are 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 assets, even when some specific adjustments must be made to the transformation depending on the specific asset or other data passed from another source.

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

See also: Variable and arithmetic video transformations.

Arithmetic expressions

You can create arithmetic expressions by using arithmetic operators with numeric transformation parameters or user-defined variables. For example, iw_mul_2_add_ih_mul_2 would give you the perimeter measurement of the original asset.

For example, you could set a relative shadow size for an image (the x and y of the e_shadow parameter) by setting these parameters to be equal to 2% of the current width of that image (w_div_50):

Ruby:
Copy to clipboard
cl_image_tag("horses.jpg", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:effect=>"shadow", :x=>"w / 50", :y=>"w / 50", :crop=>"fill"}
  ])
PHP:
Copy to clipboard
cl_image_tag("horses.jpg", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("effect"=>"shadow", "x"=>"w / 50", "y"=>"w / 50", "crop"=>"fill")
  )))
Python:
Copy to clipboard
CloudinaryImage("horses.jpg").image(transformation=[
  {'width': 300, 'crop': "scale"},
  {'effect': "shadow", 'x': "w / 50", 'y': "w / 50", 'crop': "fill"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("horses.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "shadow", x: "w / 50", y: "w / 50", crop: "fill"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("shadow").x("w / 50").y("w / 50").crop("fill")).imageTag("horses.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('horses.jpg', {transformation: [
  {width: 300, crop: "scale"},
  {effect: "shadow", x: "w / 50", y: "w / 50", crop: "fill"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("horses.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {effect: "shadow", x: "w / 50", y: "w / 50", crop: "fill"}
  ]})
React:
Copy to clipboard
<Image publicId="horses.jpg" >
  <Transformation width="300" crop="scale" />
  <Transformation effect="shadow" x="w / 50" y="w / 50" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="horses.jpg" >
  <cld-transformation width="300" crop="scale" />
  <cld-transformation effect="shadow" x="w / 50" y="w / 50" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="horses.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation effect="shadow" x="w / 50" y="w / 50" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Effect("shadow").X("w / 50").Y("w / 50").Crop("fill")).BuildImageTag("horses.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .effect("shadow").x("w / 50").y("w / 50").crop("fill")).generate("horses.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setEffect("shadow").setX("w / 50").setY("w / 50").setCrop("fill")).generate("horses.jpg")!, cloudinary: cloudinary)
Use arithmetic operators to calculate shadow size

Note
When you use multiple arithmetic operators in an expression, standard order of operations apply (multiplication and division before addition and subtraction).

For example, iw_mul_2_add_ih_mul_2 would give you the perimeter measurement of the initial asset by first multiplying both the initial width by 2 and the initial height by 2, and then adding these two products.

Supported arithmetic operators

operation URL syntax SDK syntax
add add +
subtract sub -
multiply mul *
divide div /
modulo (remainder) mod %
pow
(to the power of)
pow ^

User-defined variables - overview

To use user-defined variables in your transformations, you first declare and assign values to the variables you want to use. In later components of your chained transformation, you can use the variables as the values of your transformation parameters.

Note
Not all transformation parameters are supported for use with variables. For details, see Variable types and supported parameters.

Variable naming

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

Variable value types

Variables can be assigned a number value, string value, or they can take on the value of a numeric asset characteristic, such as iw (initial width), fc (face count - images only), or du (duration - video only).

When working with string values:

  • String values are bounded by ! !.
  • To assign the value of an existing context key to a variable, use the syntax: ctx:!key_name!. When you set a transformation parameter to that variable, it gets the value of the specified context key.
  • You can provide several values in a string using a colon : as the delimiter. For example: !string1:string2:string3!. These multiple-value strings can be used:

    • as folder separators when the variable will be used to control the public ID of an overlay.
    • for comparing multiple values when the variable will be used in conjunction with the _in_ or _nin_ conditional transformation comparison operators.
    • to specify RGB Hex values for the border, background or color parameters. For example: !rgb:008000!.


    When a variable that is defined as a string value and contains a colon, is passed to any other parameter (for example if the variable is used to set a text overlay string), the colon is treated as a literal character.

Assigning values to variables

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

To convert a string value to a numeric value, append _to_i for an integer, or _to_f for a float. For example, to assign the value of context key, breadth, to the variable $newwidth:

  • as an integer, use the syntax: $newwidth_ctx:!breadth!_to_i
  • as a float, use the syntax: $newwidth_ctx:!breadth!_to_f

Using arithmetic expressions with variables

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

Variable types and supported parameters

User-defined variables for images support the following variable types and parameters:

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
  • bo (border): for the numeric pixel width of the border. For example: $pixwidth_w_mul_0.1/bo_$pixwidth_solid_white
    Note that even though the syntax for directly setting the border width is usually a string element (e.g. 7px), when you want to pass the value as a variable, you pass it as a number value and not a string.

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 any value of an effect. For example:

  • $effect_!brightness!,e_$effect:60
  • $artfilter_!incognito!,e_art:$artfilter
  • $firstcolor_!red!,$secondcolor_!008000!,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

You can also use variables for the text style and color. For example:

  • $style_!Arial_12!,$color_!rgb:ff33cc!,l_text:$style:hello,co_$color

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

If the public ID includes a folder component, replace the slash with a colon. For example, the same transformation from above, but overlaying 'myfolder/myimage':

/$overlay_!myfolder:myimage!/w_400,h_400,c_fill/l_$overlay,g_south_east,x_20,y_20,w_100

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

Border and background color

You can use a variable to set the color of a border (bo in URLs) or background (b in URLs) to either a color name or an RGB Hex value. For RGB hex values, use the syntax $var_!rgb:######!.

For example, the following transformation sets the variable $bcolor to a specified rgb shade of blue. Afterwards, a condition checks whether the image has at least one face (face_count > 1), and if so, it changes the $bcolor variable value to red. Lastly, the image is given a border whose color is determined by the $bcolor variable.

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :variables=>[["$bcolor", "!red!"]], :transformation=>[
  {:if=>"fc_gt_0"},
  {:border=>"5px_solid_$bcolor", :height=>120, :width=>120, :crop=>"fill"}
  ])
PHP:
Copy to clipboard
cl_image_tag("sample.jpg", array("variables"=>array("$bcolor"=>"!red!"), "transformation"=>array(
  array("if"=>"fc_gt_0"),
  array("border"=>"5px_solid_$bcolor", "height"=>120, "width"=>120, "crop"=>"fill")
  )))
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(variables={"$bcolor": "!red!"}, transformation=[
  {'if': "fc_gt_0"},
  {'border': "5px_solid_$bcolor", 'height': 120, 'width': 120, 'crop': "fill"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$bcolor","!red!")).chain()
  .if("fc_gt_0").chain()
  .border("5px_solid_$bcolor").height(120).width(120).crop("fill")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation if="fc_gt_0" />
  <Transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation if="fc_gt_0" />
  <cld-transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation if="fc_gt_0">
  </cl-transformation>
  <cl-transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("fc_gt_0").Chain()
  .Border("5px_solid_$bcolor").Height(120).Width(120).Crop("fill")).BuildImageTag("sample.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$bcolor","!red!")).chain()
  .if("fc_gt_0").chain()
  .border("5px_solid_$bcolor").height(120).width(120).crop("fill")).generate("sample.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("fc_gt_0").chain()
  .setBorder("5px_solid_$bcolor").setHeight(120).setWidth(120).setCrop("fill")).generate("sample.jpg")!, cloudinary: cloudinary)
Use a variable to set the border color

Using the identical transformation on an image with at least one face applies a red border:

Ruby:
Copy to clipboard
cl_image_tag("couple.jpg", :variables=>[["$bcolor", "!red!"]], :transformation=>[
  {:if=>"fc_gt_0"},
  {:border=>"5px_solid_$bcolor", :height=>120, :width=>120, :crop=>"fill"}
  ])
PHP:
Copy to clipboard
cl_image_tag("couple.jpg", array("variables"=>array("$bcolor"=>"!red!"), "transformation"=>array(
  array("if"=>"fc_gt_0"),
  array("border"=>"5px_solid_$bcolor", "height"=>120, "width"=>120, "crop"=>"fill")
  )))
Python:
Copy to clipboard
CloudinaryImage("couple.jpg").image(variables={"$bcolor": "!red!"}, transformation=[
  {'if': "fc_gt_0"},
  {'border': "5px_solid_$bcolor", 'height': 120, 'width': 120, 'crop': "fill"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("couple.jpg", {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$bcolor","!red!")).chain()
  .if("fc_gt_0").chain()
  .border("5px_solid_$bcolor").height(120).width(120).crop("fill")).imageTag("couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('couple.jpg', {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("couple.jpg", {variables: [["$bcolor", "!red!"]], transformation: [
  {if: "fc_gt_0"},
  {border: "5px_solid_$bcolor", height: 120, width: 120, crop: "fill"}
  ]})
React:
Copy to clipboard
<Image publicId="couple.jpg" >
  <Transformation if="fc_gt_0" />
  <Transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="couple.jpg" >
  <cld-transformation if="fc_gt_0" />
  <cld-transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="couple.jpg" >
  <cl-transformation if="fc_gt_0">
  </cl-transformation>
  <cl-transformation border="5px_solid_$bcolor" height="120" width="120" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("fc_gt_0").Chain()
  .Border("5px_solid_$bcolor").Height(120).Width(120).Crop("fill")).BuildImageTag("couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$bcolor","!red!")).chain()
  .if("fc_gt_0").chain()
  .border("5px_solid_$bcolor").height(120).width(120).crop("fill")).generate("couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("fc_gt_0").chain()
  .setBorder("5px_solid_$bcolor").setHeight(120).setWidth(120).setCrop("fill")).generate("couple.jpg")!, cloudinary: cloudinary)
Use a variable to set the border color

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,....

Note
When you use variable or conditional expressions that include the tags or ctx parameters, their values are exposed publicly in the URL. Any customers that want to prevent such values from being exposed can disable the Usage of tags and context in transformation URLs option in the Security tab of their account settings (enabled by default). When this setting is disabled, any URL that exposes tags or context values will return an error.

File reference variables

You can request a file to be represented as a base64 encoded string by using a reference variable. This allows you, for example, to pass files to WebAssembly, or remote functions.

To define a reference variable, insert ref: before the value of the variable. For example:

$file_ref:!myfile!/fn_wasm:my_example.wasm

In the above example, myfile can be the public ID of any file in your Cloudinary account or a URI. If the public ID includes a folder component, replace the slash with a colon. For example, to reference 'folder1/folder2/myfile', use:

$file_ref:!folder1:folder2:myfile!/fn_wasm:my_example.wasm

Note
Variables are passed to WebAssembly and remote functions through a JSON metadata structure together with context and tags, as explained in Custom functions.

Use-case example: Pass a PNG file to a WebAssembly function to use as an overlay

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

Expression 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

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:
Copy to clipboard
cl_image_tag("woman.jpg", :width=>"$w", :aspect_ratio=>"$ar", :gravity=>"face", :crop=>"fill", :variables=>[["$w", "200"], ["$ar", "0.8"]])
PHP:
Copy to clipboard
cl_image_tag("woman.jpg", array("width"=>"$w", "aspect_ratio"=>"$ar", "gravity"=>"face", "crop"=>"fill", "variables"=>array("$w"=>"200", "$ar"=>"0.8")))
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(width="$w", aspect_ratio="$ar", gravity="face", crop="fill", variables={"$w": "200", "$ar": "0.8"})
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {width: "$w", aspect_ratio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]})
Java:
Copy to clipboard
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:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {width: "$w", aspectRatio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {width: "$w", aspect_ratio: "$ar", gravity: "face", crop: "fill", variables: [["$w", "200"], ["$ar", "0.8"]]})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation width="$w" aspectRatio="$ar" gravity="face" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation width="$w" aspectRatio="$ar" gravity="face" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation width="$w" aspect-ratio="$ar" gravity="face" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width("$w").AspectRatio("$ar").Gravity("face").Crop("fill")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("woman.jpg", :width=>"$newwidth", :crop=>"scale", :variables=>[["$newwidth", "10 + iw * 0.3"]])
PHP:
Copy to clipboard
cl_image_tag("woman.jpg", array("width"=>"$newwidth", "crop"=>"scale", "variables"=>array("$newwidth"=>"10 + iw * 0.3")))
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(width="$newwidth", crop="scale", variables={"$newwidth": "10 + iw * 0.3"})
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$newwidth","10 + iw * 0.3")).chain().width("$newwidth").crop("scale")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {width: "$newwidth", crop: "scale", variables: [["$newwidth", "10 + iw * 0.3"]]})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation width="$newwidth" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation width="$newwidth" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation width="$newwidth" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width("$newwidth").Crop("scale")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$newwidth","10 + iw * 0.3")).chain().width("$newwidth").crop("scale")).generate("woman.jpg");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("woman.jpg", :variables=>[["$height", "200"]], :transformation=>[
  {:if=>"ar_lt_1.0"},
  {:if=>"else"},
  {:height=>"$height", :crop=>"scale"}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("woman.jpg").image(variables={"$height": "200"}, transformation=[
  {'if': "ar_lt_1.0"},
  {'if': "else"},
  {'height': "$height", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]})
Java:
Copy to clipboard
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:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {variables: [["$height", "200"]], transformation: [
  {if: "ar_lt_1.0"},
  {if: "else"},
  {height: "$height", crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation if="ar_lt_1.0" />
  <Transformation if="else" />
  <Transformation height="$height" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<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:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("ar_lt_1.0").Chain()
  .If("else").Chain()
  .Height("$height").Crop("scale")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
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:
Copy to clipboard
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 style and color of the text are also set using variables ($style and $color). The text overlay is placed near the bottom of the image on a semi-transparent, rounded border.

Ruby:
Copy to clipboard
cl_image_tag("woman.jpg", :overlay=>{:public_id=>"%24style", :text=>"%20%20%24%28award%29%20%20Place%20"}, :gravity=>"south", :y=>10, :background=>"gray", :radius=>10, :opacity=>75, :color=>"$color", :variables=>[["$award", "!First!"], ["$color", "!rgb:FFFFFF!"], ["$style", "!Arial_45!"]])
PHP:
Copy to clipboard
cl_image_tag("woman.jpg", array("overlay"=>array("public_id"=>"%24style", "text"=>"%20%20%24%28award%29%20%20Place%20"), "gravity"=>"south", "y"=>10, "background"=>"gray", "radius"=>10, "opacity"=>75, "color"=>"$color", "variables"=>array("$award"=>"!First!", "$color"=>"!rgb:FFFFFF!", "$style"=>"!Arial_45!")))
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(overlay={'public_id': "%24style", 'text': "%20%20%24%28award%29%20%20Place%20"}, gravity="south", y=10, background="gray", radius=10, opacity=75, color="$color", variables={"$award": "!First!", "$color": "!rgb:FFFFFF!", "$style": "!Arial_45!"})
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {overlay: {public_id: "%24style", text: "%20%20%24%28award%29%20%20Place%20"}, gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "$color", variables: [["$award", "!First!"], ["$color", "!rgb:FFFFFF!"], ["$style", "!Arial_45!"]]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$award","!First!"),variable("$color","!rgb:FFFFFF!"),variable("$style","!Arial_45!")).chain().overlay(new TextLayer().text("%20%20%24%28award%29%20%20Place%20").publicId("%24style")).gravity("south").y(10).background("gray").radius(10).opacity(75).color("$color")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {overlay: new cloudinary.TextLayer().text("%20%20%24%28award%29%20%20Place%20").publicId("%24style"), gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "$color", variables: [["$award", "!First!"], ["$color", "!rgb:FFFFFF!"], ["$style", "!Arial_45!"]]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {overlay: new cloudinary.TextLayer().text("%20%20%24%28award%29%20%20Place%20").publicId("%24style"), gravity: "south", y: 10, background: "gray", radius: 10, opacity: 75, color: "$color", variables: [["$award", "!First!"], ["$color", "!rgb:FFFFFF!"], ["$style", "!Arial_45!"]]})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation overlay={{text: "%20%20%24%28award%29%20%20Place%20", publicId: "%24style"}} gravity="south" y="10" background="gray" radius="10" opacity="75" color="$color" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation overlay={{text: "%20%20%24%28award%29%20%20Place%20", publicId: "%24style"}} gravity="south" y="10" background="gray" radius="10" opacity="75" color="$color" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation overlay="text:%24style:%20%20%24%28award%29%20%20Place%20" gravity="south" y="10" background="gray" radius="10" opacity="75" color="$color">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text("%20%20%24%28award%29%20%20Place%20").PublicId("%24style")).Gravity("south").Y(10).Background("gray").Radius(10).Opacity(75).Color("$color")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$award","!First!"),variable("$color","!rgb:FFFFFF!"),variable("$style","!Arial_45!")).chain().overlay(new TextLayer().text("%20%20%24%28award%29%20%20Place%20").publicId("%24style")).gravity("south").y(10).background("gray").radius(10).opacity(75).color("$color")).generate("woman.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:%24style:%20%20%24%28award%29%20%20Place%20").setGravity("south").setY(10).setBackground("gray").setRadius(10).setOpacity(75).setColor("$color")).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:
Copy to clipboard
cl_image_tag("woman.jpg", :transformation=>["passport_photo"], :variables=>[["$width", "115"]])
PHP:
Copy to clipboard
cl_image_tag("woman.jpg", array("transformation"=>array("passport_photo"), "variables"=>array("$width"=>"115")))
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(transformation=["passport_photo"], variables={"$width": "115"})
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {transformation: ["passport_photo"], variables: [["$width", "115"]]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$width","115")).chain().named("passport_photo")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {transformation: ["passport_photo"], variables: [["$width", "115"]]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {transformation: ["passport_photo"], variables: [["$width", "115"]]})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation transformation={["passport_photo"]} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation transformation={["passport_photo"]} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation transformation={{["passport_photo"]}}>
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("passport_photo")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$width","115")).chain().named("passport_photo")).generate("woman.jpg");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("log_cabin.jpg", :transformation=>["image_ratings"], :variables=>[["$rating", "!thumbs-up!"]])
PHP:
Copy to clipboard
cl_image_tag("log_cabin.jpg", array("transformation"=>array("image_ratings"), "variables"=>array("$rating"=>"!thumbs-up!")))
Python:
Copy to clipboard
CloudinaryImage("log_cabin.jpg").image(transformation=["image_ratings"], variables={"$rating": "!thumbs-up!"})
Node.js:
Copy to clipboard
cloudinary.image("log_cabin.jpg", {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$rating","!thumbs-up!")).chain().named("image_ratings")).imageTag("log_cabin.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('log_cabin.jpg', {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("log_cabin.jpg", {transformation: ["image_ratings"], variables: [["$rating", "!thumbs-up!"]]})
React:
Copy to clipboard
<Image publicId="log_cabin.jpg" >
  <Transformation transformation={["image_ratings"]} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="log_cabin.jpg" >
  <cld-transformation transformation={["image_ratings"]} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="log_cabin.jpg" >
  <cl-transformation transformation={{["image_ratings"]}}>
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("image_ratings")).BuildImageTag("log_cabin.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$rating","!thumbs-up!")).chain().named("image_ratings")).generate("log_cabin.jpg");
iOS:
Copy to clipboard
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

File reference variable

Pass the file, sale.png (in the docs folder), to the WebAssembly function, pnglayer.wasm (also in the docs folder), as a reference variable called overlay. The PNG file is overlaid on the casual.jpg image.

Ruby:
Copy to clipboard
cl_image_tag("docs/casual.jpg",
  :variables => [["$overlay", "ref:!docs:sale!"]],
  :custom_function => {
    :function_type => "wasm", 
    :source => "docs:pnglayer.wasm"},
  :transformation => [{
    :border => "1px_solid_black"}])
PHP:
Copy to clipboard
cl_image_tag("docs/casual.jpg", 
array(
  "variables" => array(
    "$overlay" => "ref:!docs:sale!"),
  "custom_function" => array(
    "function_type" => "wasm", 
    "source" => "docs:pnglayer.wasm"),
  "transformation" => array(
    array("border" => "1px_solid_black")
  )))
Python:
Copy to clipboard
CloudinaryImage("docs/casual.jpg").image(
  variables = {"$overlay": "ref:!docs:sale!"},
  custom_function = {
    "function_type" = "wasm", 
    "source" = "docs:pnglayer.wasm"}, 
  transformation=[
    {'border': "1px_solid_black"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("docs/casual.jpg", {
  variables: [["$overlay", "ref:!docs:sale!"]],
  custom_function:{
    function_type: "wasm", 
    source: "docs:pnglayer.wasm"}, 
  transformation: [{
    border: "1px_solid_black"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .variables(variable("$overlay","ref:!docs:sale!")).chain()
  .customFunction(wasm("docs:pnglayer.wasm")).chain()
  .border("1px_solid_black"))
  .imageTag("docs/casual.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('docs/casual.jpg', {
  variables: [["$overlay", "ref:!docs:sale!"]],
  customFunction: new cloudinary.CustomFunction()
    .functionType("wasm")
    .source("docs:pnglayer.wasm"), 
  transformation: [{
    border: "1px_solid_black"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image('docs/casual.jpg', {
  variables: [["$overlay", "ref:!docs:sale!"]],
  customFunction: new cloudinary.CustomFunction()
    .functionType("wasm")
    .source("docs:pnglayer.wasm"), 
  transformation: [{
    border: "1px_solid_black"}
  ]})
React:
Copy to clipboard
<Image publicId="docs/casual.jpg">
  <Transformation variables={[["$overlay", "ref:!docs:sale!"]]}/>
  <Transformation customFunction={{
    functionType: "wasm",
    source: "docs:pnglayer.wasm"}} />
  <Transformation border="1px_solid_black" />
</Image>
Angular:
Copy to clipboard
<cl-image public-id="docs/casual.jpg">
  <cl-transformation [attr.variables]="[['$overlay', 'ref:!docs:sale!']]">
  </cl-transformation>
  <cl-transformation customFunction={
    "function_type": "wasm",
    "source": "docs:pnglayer.wasm"}>
  </cl-transformation>
  <cl-transformation border="1px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variable("$overlay", "ref:!docs:sale!").Chain()
  .CustomFunction(CustomFunction.Wasm("docs:pnglayer.wasm")).Chain()
  .Border("1px_solid_black"))
  .BuildImageTag("docs/casual.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$overlay","ref:!docs:sale!")).chain()
  .customFunction(new CustomFunction()
    .functionType("wasm")
    .source("docs:pnglayer.wasm")).chain()
  .border("1px_solid_black"))
  .generate("docs/casual.jpg");

This is the generated URL:

Add a PNG overlay

Here is the Rust code that was compiled to pnglayer.wasm. Notice how the variable called overlay is obtained in the code variables.get("overlay"):

Copy to clipboard
#[macro_use]
extern crate serde_derive;
extern crate image;
extern crate serde;
extern crate serde_json;
extern crate byteorder;
extern crate base64;


use std::mem;
use byteorder::{ WriteBytesExt, BigEndian};
use image::{RgbaImage};

#[derive(Deserialize, Debug)]
struct Metadata {
    context: Option<std::collections::HashMap<String, String>>,
    tags: Option<Vec<String>>,
    variables: Option<std::collections::HashMap<String, String>>,
}

#[no_mangle]
pub extern "C" fn alloc(size: usize) -> *mut u8 {
    let mut buf = Vec::<u8>::with_capacity(size);
    let ptr = buf.as_mut_ptr();
    mem::forget(buf);
    return ptr;
}

#[no_mangle]
pub extern "C" fn dealloc(ptr: *mut u8, cap: usize) {
    unsafe  {
      let _buf = Vec::from_raw_parts(ptr, 0, cap);
    }
}

#[no_mangle]
pub extern "C" fn transform(width: u32, height: u32, image_ptr: *mut u8, meta_ptr: *mut u8, meta_size: usize) -> u32 {
  let size = (width * height * 4) as usize;
  let bytes = unsafe {Vec::from_raw_parts(image_ptr, size, size)};
  let meta_bytes = unsafe {Vec::from_raw_parts(meta_ptr, meta_size, meta_size)};
  let metadata: Metadata = serde_json::from_slice(&meta_bytes).expect("Failed to deserialize metadata json");
  host_trace(format!("{:?}", metadata));
  let (out_w, out_h, mut out_buffer) = overlay(width, height, bytes, metadata);
  let mut dims = vec![];
  let _ = dims.write_u32::<BigEndian>(out_w);
  let _ = dims.write_u32::<BigEndian>(out_h);
  dims.append(&mut out_buffer);
  let out_buffer = dims;
  let out_ptr = out_buffer.as_ptr() as u32;
  mem::forget(out_buffer);
  out_ptr  
}


fn host_trace(x: String) {
  let buf = x.into_bytes();
  let length = buf.len();
  let ptr = buf.as_ptr();
  unsafe { trace(ptr as u32, length as u32) }
}

extern "C" {
  pub fn trace(x: u32, length: u32);
}


fn overlay(width: u32, height: u32, bytes: Vec<u8>, metadata: Metadata) -> (u32, u32, Vec<u8>) {
  let mut img = RgbaImage::from_raw(width, height, bytes).unwrap();
  if let Some(variables) = metadata.variables {
    if let Some(overlay_base64) = variables.get("overlay") {
      if let Ok(overlay_bytes) = base64::decode(overlay_base64) {
        if let Ok(overlay_image) = image::load_from_memory_with_format(&overlay_bytes, image::ImageFormat::PNG) {
          image::imageops::overlay(&mut img, &overlay_image, 0, 0);
        }
      }
    }
  }
  let out_w = img.width();
  let out_h = img.height();
  let out_buffer = img.into_raw();
  (out_w, out_h, out_buffer)
}

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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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:
Copy to clipboard
<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:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.