> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Specifying transformations for a condition To apply a transformation only when a condition is met, you can embed a transformation directly within a condition in your URL or SDK call, using the format `if_condition/transformation/if_end`. This page covers how to structure the transformation part of the expression, including chained transformations, with worked examples. For details on the conditions themselves, see [Specifying conditions](conditional_transformations). For more advanced conditions, see [Advanced conditional transformations](advanced_conditional_transformations). ## Conditional transformation syntax The transformation for a condition should be specified between the condition component and an `if_end` component in the format: `if_condition/transformation/if_end` For example: if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end In the following examples, both images are scaled to a width of 500px. Afterwards, the identical conditional padded-resize transformation shown above is applied to both images. However, since the condition applies only for portrait images (those with an aspect ratio less than 1.0) the resizing and padding is applied only to the mountain-road-boat image below: ![Conditional transformation on landscape video](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end/rafting.mp4) ```nodejs cloudinary.video("rafting", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("rafting.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```vue import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("rafting.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```angular import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("rafting.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```js import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("rafting.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```python CloudinaryVideo("rafting").video(transformation=[ {'width': 500, 'crop': "scale"}, {'if': "ar_lt_1.0"}, {'background': "darkorange", 'height': 300, 'width': 500, 'crop': "pad"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Background; (new VideoTag('rafting.mp4')) ->resize(Resize::scale()->width(500)) ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation()) ->resize(Resize::pad()->width(500) ->height(300) ->background( Background::color(Color::DARKORANGE)) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("darkorange").height(300).width(500).crop("pad").chain() .if("end")).videoTag("rafting"); ``` ```ruby cl_video_tag("rafting", transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .If("ar_lt_1.0").Chain() .Background("darkorange").Height(300).Width(500).Crop("pad").Chain() .If("end")).BuildVideoTag("rafting") ``` ```dart cloudinary.video('rafting.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setIf("ar_lt_1.0").chain() .setBackground("darkorange").setHeight(300).setWidth(500).setCrop("pad").chain() .setIf("end")).generate("rafting.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("darkorange").height(300).width(500).crop("pad").chain() .if("end")).resourceType("video").generate("rafting.mp4"); ``` ```flutter cloudinary.video('rafting.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end")); ``` ```kotlin cloudinary.video { publicId("rafting.mp4") addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end") }.generate() ``` ```jquery $.cloudinary.video("rafting", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react_native import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("rafting.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ![Same conditional transformation on portrait video](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end/docs/parrot.mp4) ```nodejs cloudinary.video("docs/parrot", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("docs/parrot.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```vue import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("docs/parrot.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```angular import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("docs/parrot.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```js import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("docs/parrot.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ```python CloudinaryVideo("docs/parrot").video(transformation=[ {'width': 500, 'crop': "scale"}, {'if': "ar_lt_1.0"}, {'background': "darkorange", 'height': 300, 'width': 500, 'crop': "pad"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Background; (new VideoTag('docs/parrot.mp4')) ->resize(Resize::scale()->width(500)) ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation()) ->resize(Resize::pad()->width(500) ->height(300) ->background( Background::color(Color::DARKORANGE)) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("darkorange").height(300).width(500).crop("pad").chain() .if("end")).videoTag("docs/parrot"); ``` ```ruby cl_video_tag("docs/parrot", transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .If("ar_lt_1.0").Chain() .Background("darkorange").Height(300).Width(500).Crop("pad").Chain() .If("end")).BuildVideoTag("docs/parrot") ``` ```dart cloudinary.video('docs/parrot.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setIf("ar_lt_1.0").chain() .setBackground("darkorange").setHeight(300).setWidth(500).setCrop("pad").chain() .setIf("end")).generate("docs/parrot.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("darkorange").height(300).width(500).crop("pad").chain() .if("end")).resourceType("video").generate("docs/parrot.mp4"); ``` ```flutter cloudinary.video('docs/parrot.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end")); ``` ```kotlin cloudinary.video { publicId("docs/parrot.mp4") addTransformation("c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end") }.generate() ``` ```jquery $.cloudinary.video("docs/parrot", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "darkorange", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react_native import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { color } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryVideo("docs/parrot.mp4") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(color("darkorange")) ) ) ); ``` ![Conditional transformation on landscape image](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end/docs/autumn_woods.jpg) ```nodejs cloudinary.image("docs/autumn_woods.jpg", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/autumn_woods.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```vue import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/autumn_woods.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```angular import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/autumn_woods.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```js import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/autumn_woods.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```python CloudinaryImage("docs/autumn_woods.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'if': "ar_lt_1.0"}, {'background': "auto", 'height': 300, 'width': 500, 'crop': "pad"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Background; (new ImageTag('docs/autumn_woods.jpg')) ->resize(Resize::scale()->width(500)) ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation()) ->resize(Resize::pad()->width(500) ->height(300) ->background( Background::auto()) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("auto").height(300).width(500).crop("pad").chain() .if("end")).imageTag("docs/autumn_woods.jpg"); ``` ```ruby cl_image_tag("docs/autumn_woods.jpg", transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .If("ar_lt_1.0").Chain() .Background("auto").Height(300).Width(500).Crop("pad").Chain() .If("end")).BuildImageTag("docs/autumn_woods.jpg") ``` ```dart cloudinary.image('docs/autumn_woods.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setIf("ar_lt_1.0").chain() .setBackground("auto").setHeight(300).setWidth(500).setCrop("pad").chain() .setIf("end")).generate("docs/autumn_woods.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("auto").height(300).width(500).crop("pad").chain() .if("end")).generate("docs/autumn_woods.jpg"); ``` ```flutter cloudinary.image('docs/autumn_woods.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end")); ``` ```kotlin cloudinary.image { publicId("docs/autumn_woods.jpg") addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end") }.generate() ``` ```jquery $.cloudinary.image("docs/autumn_woods.jpg", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react_native import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/autumn_woods.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ![Same conditional transformation on portrait image](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end/docs/mountain-road-boat.jpg) ```nodejs cloudinary.image("docs/mountain-road-boat.jpg", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/mountain-road-boat.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```vue import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/mountain-road-boat.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```angular import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/mountain-road-boat.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```js import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/mountain-road-boat.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` ```python CloudinaryImage("docs/mountain-road-boat.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'if': "ar_lt_1.0"}, {'background': "auto", 'height': 300, 'width': 500, 'crop': "pad"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Background; (new ImageTag('docs/mountain-road-boat.jpg')) ->resize(Resize::scale()->width(500)) ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation()) ->resize(Resize::pad()->width(500) ->height(300) ->background( Background::auto()) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("auto").height(300).width(500).crop("pad").chain() .if("end")).imageTag("docs/mountain-road-boat.jpg"); ``` ```ruby cl_image_tag("docs/mountain-road-boat.jpg", transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .If("ar_lt_1.0").Chain() .Background("auto").Height(300).Width(500).Crop("pad").Chain() .If("end")).BuildImageTag("docs/mountain-road-boat.jpg") ``` ```dart cloudinary.image('docs/mountain-road-boat.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setIf("ar_lt_1.0").chain() .setBackground("auto").setHeight(300).setWidth(500).setCrop("pad").chain() .setIf("end")).generate("docs/mountain-road-boat.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .if("ar_lt_1.0").chain() .background("auto").height(300).width(500).crop("pad").chain() .if("end")).generate("docs/mountain-road-boat.jpg"); ``` ```flutter cloudinary.image('docs/mountain-road-boat.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end")); ``` ```kotlin cloudinary.image { publicId("docs/mountain-road-boat.jpg") addTransformation("c_scale,w_500/if_ar_lt_1.0/b_auto,c_pad,h_300,w_500/if_end") }.generate() ``` ```jquery $.cloudinary.image("docs/mountain-road-boat.jpg", {transformation: [ {width: 500, crop: "scale"}, {if: "ar_lt_1.0"}, {background: "auto", height: 300, width: 500, crop: "pad"}, {if: "end"} ]}) ``` ```react_native import { scale, pad } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { auto } from "@cloudinary/url-gen/qualifiers/background"; new CloudinaryImage("docs/mountain-road-boat.jpg") .resize(scale().width(500)) .conditional( ifCondition( "aspect_ratio < 1.0", new Transformation().resize( pad().width(500).height(300).background(auto()) ) ) ); ``` > **NOTE**: > > Transformation URLs technically support defining both the condition and a single resulting transformation inside a single transformation component (without the need for a closing `end_if`). However, to avoid ambiguity, the best practice is to always use `if` and `if_end` components in your URL as shown above. > * Some SDKs require this separation and automatically generate URLs in the `if...end_if` format. > * A [named transformation](named_transformations) cannot be placed in the same transformation component as its condition (e.g., `if_w_eq_h,t_trans` is not supported) and must be specified using the `if...if_end` format. > * If you do include both the `if` condition and the resulting transformation parameters within a single component of the URL, the `if` condition is evaluated first, regardless of its location within the component and (only) when the condition is true, all transformation parameters specified in that component are applied. ### Conditions with chained transformations You can apply multiple chained transformations to your condition by including the entire chained transformation in between the `if` and `if_end` components. For example, if you allocate space on your page for an image with a width of 700px, you can conditionally add a 700px width blurred underlay version of the same image along with a text overlay, only for those images whose original width is less than 700px: ![conditional background](https://res.cloudinary.com/demo/image/upload/if_w_lt_700/co_white,l_text:Arial_20:Image%2520shown%2520in%2520full%2520scale/fl_layer_apply,g_south_east/u_docs:luggage/c_scale,w_700/e_blur:400/fl_layer_apply/if_end/docs/luggage.jpg) ```nodejs cloudinary.image("docs/luggage.jpg", {transformation: [ {if: "w_lt_700"}, {color: "white", overlay: {font_family: "Arial", font_size: 20, text: "Image%2520shown%2520in%2520full%2520scale"}}, {flags: "layer_apply", gravity: "south_east"}, {underlay: "docs:luggage"}, {width: 700, crop: "scale"}, {effect: "blur:400"}, {flags: "layer_apply"}, {if: "end"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { source } from "@cloudinary/url-gen/actions/underlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { blur } from "@cloudinary/url-gen/actions/effect"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/luggage.jpg").conditional( ifCondition( "width < 700", new Transformation() .overlay( source( text( "Image%20shown%20in%20full%20scale", new TextStyle("Arial", 20) ).textColor("white") ).position(new Position().gravity(compass("south_east"))) ) .underlay( source( image("docs/luggage").transformation( new Transformation() .resize(scale().width(700)) .effect(blur().strength(400)) ) ) ) ) ); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { source } from "@cloudinary/url-gen/actions/underlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { blur } from "@cloudinary/url-gen/actions/effect"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/luggage.jpg").conditional( ifCondition( "width < 700", new Transformation() .overlay( source( text( "Image%20shown%20in%20full%20scale", new TextStyle("Arial", 20) ).textColor("white") ).position(new Position().gravity(compass("south_east"))) ) .underlay( source( image("docs/luggage").transformation( new Transformation() .resize(scale().width(700)) .effect(blur().strength(400)) ) ) ) ) ); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { source } from "@cloudinary/url-gen/actions/underlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { blur } from "@cloudinary/url-gen/actions/effect"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/luggage.jpg").conditional( ifCondition( "width < 700", new Transformation() .overlay( source( text( "Image%20shown%20in%20full%20scale", new TextStyle("Arial", 20) ).textColor("white") ).position(new Position().gravity(compass("south_east"))) ) .underlay( source( image("docs/luggage").transformation( new Transformation() .resize(scale().width(700)) .effect(blur().strength(400)) ) ) ) ) ); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { source } from "@cloudinary/url-gen/actions/underlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { blur } from "@cloudinary/url-gen/actions/effect"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/luggage.jpg").conditional( ifCondition( "width < 700", new Transformation() .overlay( source( text( "Image%20shown%20in%20full%20scale", new TextStyle("Arial", 20) ).textColor("white") ).position(new Position().gravity(compass("south_east"))) ) .underlay( source( image("docs/luggage").transformation( new Transformation() .resize(scale().width(700)) .effect(blur().strength(400)) ) ) ) ) ); ``` ```python CloudinaryImage("docs/luggage.jpg").image(transformation=[ {'if': "w_lt_700"}, {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 20, 'text': "Image%2520shown%2520in%2520full%2520scale"}}, {'flags': "layer_apply", 'gravity': "south_east"}, {'underlay': "docs:luggage"}, {'width': 700, 'crop': "scale"}, {'effect': "blur:400"}, {'flags': "layer_apply"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Underlay; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Effect; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('docs/luggage.jpg')) ->conditional(Conditional::ifCondition("width < 700",(new Transformation()) ->overlay(Overlay::source( Source::text("Image%20shown%20in%20full%20scale",(new TextStyle("Arial",20))) ->textColor(Color::WHITE) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::southEast())) ) ) ->underlay(Underlay::source( Source::image("docs/luggage") ->transformation((new Transformation()) ->resize(Resize::scale()->width(700)) ->effect(Effect::blur()->strength(400))) )))); ``` ```java cloudinary.url().transformation(new Transformation() .if("w_lt_700").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(20).text("Image%2520shown%2520in%2520full%2520scale")).chain() .flags("layer_apply").gravity("south_east").chain() .underlay(new Layer().publicId("docs:luggage")).chain() .width(700).crop("scale").chain() .effect("blur:400").chain() .flags("layer_apply").chain() .if("end")).imageTag("docs/luggage.jpg"); ``` ```ruby cl_image_tag("docs/luggage.jpg", transformation: [ {if: "w_lt_700"}, {color: "white", overlay: {font_family: "Arial", font_size: 20, text: "Image%2520shown%2520in%2520full%2520scale"}}, {flags: "layer_apply", gravity: "south_east"}, {underlay: "docs:luggage"}, {width: 700, crop: "scale"}, {effect: "blur:400"}, {flags: "layer_apply"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .If("w_lt_700").Chain() .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(20).Text("Image%2520shown%2520in%2520full%2520scale")).Chain() .Flags("layer_apply").Gravity("south_east").Chain() .Underlay(new Layer().PublicId("docs:luggage")).Chain() .Width(700).Crop("scale").Chain() .Effect("blur:400").Chain() .Flags("layer_apply").Chain() .If("end")).BuildImageTag("docs/luggage.jpg") ``` ```dart cloudinary.image('docs/luggage.jpg').transformation(Transformation() .addTransformation("if_w_lt_700/co_white,l_text:Arial_20:Image%20shown%20in%20full%20scale/fl_layer_apply,g_south_east/u_docs:luggage/c_scale,w_700/e_blur:400/fl_layer_apply/if_end")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setIf("w_lt_700").chain() .setColor("white").setOverlay("text:Arial_20:Image%2520shown%2520in%2520full%2520scale").chain() .setFlags("layer_apply").setGravity("south_east").chain() .setUnderlay("docs:luggage").chain() .setWidth(700).setCrop("scale").chain() .setEffect("blur:400").chain() .setFlags("layer_apply").chain() .setIf("end")).generate("docs/luggage.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .if("w_lt_700").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(20).text("Image%2520shown%2520in%2520full%2520scale")).chain() .flags("layer_apply").gravity("south_east").chain() .underlay(new Layer().publicId("docs:luggage")).chain() .width(700).crop("scale").chain() .effect("blur:400").chain() .flags("layer_apply").chain() .if("end")).generate("docs/luggage.jpg"); ``` ```flutter cloudinary.image('docs/luggage.jpg').transformation(Transformation() .addTransformation("if_w_lt_700/co_white,l_text:Arial_20:Image%20shown%20in%20full%20scale/fl_layer_apply,g_south_east/u_docs:luggage/c_scale,w_700/e_blur:400/fl_layer_apply/if_end")); ``` ```kotlin cloudinary.image { publicId("docs/luggage.jpg") addTransformation("if_w_lt_700/co_white,l_text:Arial_20:Image%20shown%20in%20full%20scale/fl_layer_apply,g_south_east/u_docs:luggage/c_scale,w_700/e_blur:400/fl_layer_apply/if_end") }.generate() ``` ```jquery $.cloudinary.image("docs/luggage.jpg", {transformation: [ {if: "w_lt_700"}, {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(20).text("Image%2520shown%2520in%2520full%2520scale")}, {flags: "layer_apply", gravity: "south_east"}, {underlay: new cloudinary.Layer().publicId("docs:luggage")}, {width: 700, crop: "scale"}, {effect: "blur:400"}, {flags: "layer_apply"}, {if: "end"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { source } from "@cloudinary/url-gen/actions/underlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { blur } from "@cloudinary/url-gen/actions/effect"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/luggage.jpg").conditional( ifCondition( "width < 700", new Transformation() .overlay( source( text( "Image%20shown%20in%20full%20scale", new TextStyle("Arial", 20) ).textColor("white") ).position(new Position().gravity(compass("south_east"))) ) .underlay( source( image("docs/luggage").transformation( new Transformation() .resize(scale().width(700)) .effect(blur().strength(400)) ) ) ) ) ); ``` ## Conditional transformation examples * **Conditional text overlay based on width**: This example limits an image size to a width of 300 pixels using the `limit` crop mode, and then uses a conditional transformation to add a text caption only to images whose initial width was wider than 300 and were scaled down (`if_iw_gt_300`): ![Conditional transformation](https://res.cloudinary.com/demo/video/upload/c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Video%20scaled%20down%20to%20300px/fl_layer_apply,g_north_west,x_5,y_5/if_end/marmots.mp4) ```nodejs cloudinary.video("marmots", {transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: {font_family: "Arial", font_size: 15, font_weight: "bold", text: "Video%20scaled%20down%20to%20300px"}}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]}) ``` ```react import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("marmots.mp4") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Video scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```vue import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("marmots.mp4") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Video scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```angular import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("marmots.mp4") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Video scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```js import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("marmots.mp4") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Video scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```python CloudinaryVideo("marmots").video(transformation=[ {'width': 300, 'crop': "limit"}, {'if': "iw_gt_300"}, {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 15, 'font_weight': "bold", 'text': "Video%20scaled%20down%20to%20300px"}}, {'flags': "layer_apply", 'gravity': "north_west", 'x': 5, 'y': 5}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('marmots.mp4')) ->resize(Resize::limitFit()->width(300)) ->conditional(Conditional::ifCondition("initial_width > 300",(new Transformation()) ->overlay(Overlay::source( Source::text("Video scaled down to 300px",(new TextStyle("Arial",15)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::WHITE) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ->offsetX(5) ->offsetY(5)) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(300).crop("limit").chain() .if("iw_gt_300").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")).chain() .flags("layer_apply").gravity("north_west").x(5).y(5).chain() .if("end")).videoTag("marmots"); ``` ```ruby cl_video_tag("marmots", transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: {font_family: "Arial", font_size: 15, font_weight: "bold", text: "Video%20scaled%20down%20to%20300px"}}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(300).Crop("limit").Chain() .If("iw_gt_300").Chain() .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(15).FontWeight("bold").Text("Video%20scaled%20down%20to%20300px")).Chain() .Flags("layer_apply").Gravity("north_west").X(5).Y(5).Chain() .If("end")).BuildVideoTag("marmots") ``` ```dart cloudinary.video('marmots.mp4').transformation(Transformation() .addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Video scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(300).setCrop("limit").chain() .setIf("iw_gt_300").chain() .setColor("white").setOverlay("text:Arial_15_bold:Video%20scaled%20down%20to%20300px").chain() .setFlags("layer_apply").setGravity("north_west").setX(5).setY(5).chain() .setIf("end")).generate("marmots.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(300).crop("limit").chain() .if("iw_gt_300").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")).chain() .flags("layer_apply").gravity("north_west").x(5).y(5).chain() .if("end")).resourceType("video").generate("marmots.mp4"); ``` ```flutter cloudinary.video('marmots.mp4').transformation(Transformation() .addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Video scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end")); ``` ```kotlin cloudinary.video { publicId("marmots.mp4") addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Video scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end") }.generate() ``` ```jquery $.cloudinary.video("marmots", {transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]}) ``` ```react_native import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("marmots.mp4") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Video scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ![Conditional transformation](https://res.cloudinary.com/demo/image/upload/c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Image%20scaled%20down%20to%20300px/fl_layer_apply,g_north_west,x_5,y_5/if_end/docs/shoes.jpg) ```nodejs cloudinary.image("docs/shoes.jpg", {transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: {font_family: "Arial", font_size: 15, font_weight: "bold", text: "Image%20scaled%20down%20to%20300px"}}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]}) ``` ```react import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/shoes.jpg") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Image scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```vue import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/shoes.jpg") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Image scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```angular import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/shoes.jpg") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Image scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```js import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/shoes.jpg") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Image scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` ```python CloudinaryImage("docs/shoes.jpg").image(transformation=[ {'width': 300, 'crop': "limit"}, {'if': "iw_gt_300"}, {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 15, 'font_weight': "bold", 'text': "Image%20scaled%20down%20to%20300px"}}, {'flags': "layer_apply", 'gravity': "north_west", 'x': 5, 'y': 5}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('docs/shoes.jpg')) ->resize(Resize::limitFit()->width(300)) ->conditional(Conditional::ifCondition("initial_width > 300",(new Transformation()) ->overlay(Overlay::source( Source::text("Image scaled down to 300px",(new TextStyle("Arial",15)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::WHITE) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ->offsetX(5) ->offsetY(5)) ))); ``` ```java cloudinary.url().transformation(new Transformation() .width(300).crop("limit").chain() .if("iw_gt_300").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Image%20scaled%20down%20to%20300px")).chain() .flags("layer_apply").gravity("north_west").x(5).y(5).chain() .if("end")).imageTag("docs/shoes.jpg"); ``` ```ruby cl_image_tag("docs/shoes.jpg", transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: {font_family: "Arial", font_size: 15, font_weight: "bold", text: "Image%20scaled%20down%20to%20300px"}}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Crop("limit").Chain() .If("iw_gt_300").Chain() .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(15).FontWeight("bold").Text("Image%20scaled%20down%20to%20300px")).Chain() .Flags("layer_apply").Gravity("north_west").X(5).Y(5).Chain() .If("end")).BuildImageTag("docs/shoes.jpg") ``` ```dart cloudinary.image('docs/shoes.jpg').transformation(Transformation() .addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Image scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setCrop("limit").chain() .setIf("iw_gt_300").chain() .setColor("white").setOverlay("text:Arial_15_bold:Image%20scaled%20down%20to%20300px").chain() .setFlags("layer_apply").setGravity("north_west").setX(5).setY(5).chain() .setIf("end")).generate("docs/shoes.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(300).crop("limit").chain() .if("iw_gt_300").chain() .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Image%20scaled%20down%20to%20300px")).chain() .flags("layer_apply").gravity("north_west").x(5).y(5).chain() .if("end")).generate("docs/shoes.jpg"); ``` ```flutter cloudinary.image('docs/shoes.jpg').transformation(Transformation() .addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Image scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end")); ``` ```kotlin cloudinary.image { publicId("docs/shoes.jpg") addTransformation("c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Image scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end") }.generate() ``` ```jquery $.cloudinary.image("docs/shoes.jpg", {transformation: [ {width: 300, crop: "limit"}, {if: "iw_gt_300"}, {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Image%20scaled%20down%20to%20300px")}, {flags: "layer_apply", gravity: "north_west", x: 5, y: 5}, {if: "end"} ]}) ``` ```react_native import { limitFit } from "@cloudinary/url-gen/actions/resize"; import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/shoes.jpg") .resize(limitFit().width(300)) .conditional( ifCondition( "initial_width > 300", new Transformation().overlay( source( text( "Image scaled down to 300px", new TextStyle("Arial", 15).fontWeight("bold") ).textColor("white") ).position( new Position().gravity(compass("north_west")).offsetX(5).offsetY(5) ) ) ) ); ``` * **Conditional resize based on a contextual metadata value**: This example resizes an image to a 200\*200 square image if it has a contextual metadata key named 'productType' with the value 'shoes'. ![Crop videos with a specified contextual metadata value](https://res.cloudinary.com/demo/video/upload/if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,w_200/if_end/docs/walking.mp4) ```nodejs cloudinary.video("docs/walking", {transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", width: 200, crop: "fill"}, {if: "end"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; new CloudinaryVideo("docs/walking.mp4").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize(fill().width(200).aspectRatio(ar1X1())) ) ); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; new CloudinaryVideo("docs/walking.mp4").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize(fill().width(200).aspectRatio(ar1X1())) ) ); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; new CloudinaryVideo("docs/walking.mp4").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize(fill().width(200).aspectRatio(ar1X1())) ) ); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; new CloudinaryVideo("docs/walking.mp4").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize(fill().width(200).aspectRatio(ar1X1())) ) ); ``` ```python CloudinaryVideo("docs/walking").video(transformation=[ {'if': "ctx:!productType!_eq_!shoes!"}, {'aspect_ratio': "1:1", 'width': 200, 'crop': "fill"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\AspectRatio; (new VideoTag('docs/walking.mp4')) ->conditional(Conditional::ifCondition("ctx:!productType! = !shoes!",(new Transformation()) ->resize(Resize::fill()->width(200) ->aspectRatio( AspectRatio::ar1X1()) ))); ``` ```java cloudinary.url().transformation(new Transformation() .if("ctx:!productType!_eq_!shoes!").chain() .aspectRatio("1:1").width(200).crop("fill").chain() .if("end")).videoTag("docs/walking"); ``` ```ruby cl_video_tag("docs/walking", transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", width: 200, crop: "fill"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .If("ctx:!productType!_eq_!shoes!").Chain() .AspectRatio("1:1").Width(200).Crop("fill").Chain() .If("end")).BuildVideoTag("docs/walking") ``` ```dart cloudinary.video('docs/walking.mp4').transformation(Transformation() .addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,w_200/if_end")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setIf("ctx:!productType!_eq_!shoes!").chain() .setAspectRatio("1:1").setWidth(200).setCrop("fill").chain() .setIf("end")).generate("docs/walking.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .if("ctx:!productType!_eq_!shoes!").chain() .aspectRatio("1:1").width(200).crop("fill").chain() .if("end")).resourceType("video").generate("docs/walking.mp4"); ``` ```flutter cloudinary.video('docs/walking.mp4').transformation(Transformation() .addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,w_200/if_end")); ``` ```kotlin cloudinary.video { publicId("docs/walking.mp4") addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,w_200/if_end") }.generate() ``` ```jquery $.cloudinary.video("docs/walking", {transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", width: 200, crop: "fill"}, {if: "end"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; new CloudinaryVideo("docs/walking.mp4").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize(fill().width(200).aspectRatio(ar1X1())) ) ); ``` ![Crop images with a specified contextual metadata value](https://res.cloudinary.com/demo/image/upload/if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,g_auto,w_200/if_end/sunset_shoes.jpg) ```nodejs cloudinary.image("sunset_shoes.jpg", {transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", gravity: "auto", width: 200, crop: "fill"}, {if: "end"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("sunset_shoes.jpg").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize( fill().width(200).aspectRatio(ar1X1()).gravity(autoGravity()) ) ) ); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("sunset_shoes.jpg").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize( fill().width(200).aspectRatio(ar1X1()).gravity(autoGravity()) ) ) ); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("sunset_shoes.jpg").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize( fill().width(200).aspectRatio(ar1X1()).gravity(autoGravity()) ) ) ); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("sunset_shoes.jpg").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize( fill().width(200).aspectRatio(ar1X1()).gravity(autoGravity()) ) ) ); ``` ```python CloudinaryImage("sunset_shoes.jpg").image(transformation=[ {'if': "ctx:!productType!_eq_!shoes!"}, {'aspect_ratio': "1:1", 'gravity': "auto", 'width': 200, 'crop': "fill"}, {'if': "end"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\AspectRatio; use Cloudinary\Transformation\Gravity; (new ImageTag('sunset_shoes.jpg')) ->conditional(Conditional::ifCondition("ctx:!productType! = !shoes!",(new Transformation()) ->resize(Resize::fill()->width(200) ->aspectRatio( AspectRatio::ar1X1()) ->gravity( Gravity::autoGravity()) ))); ``` ```java cloudinary.url().transformation(new Transformation() .if("ctx:!productType!_eq_!shoes!").chain() .aspectRatio("1:1").gravity("auto").width(200).crop("fill").chain() .if("end")).imageTag("sunset_shoes.jpg"); ``` ```ruby cl_image_tag("sunset_shoes.jpg", transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", gravity: "auto", width: 200, crop: "fill"}, {if: "end"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .If("ctx:!productType!_eq_!shoes!").Chain() .AspectRatio("1:1").Gravity("auto").Width(200).Crop("fill").Chain() .If("end")).BuildImageTag("sunset_shoes.jpg") ``` ```dart cloudinary.image('sunset_shoes.jpg').transformation(Transformation() .addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,g_auto,w_200/if_end")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setIf("ctx:!productType!_eq_!shoes!").chain() .setAspectRatio("1:1").setGravity("auto").setWidth(200).setCrop("fill").chain() .setIf("end")).generate("sunset_shoes.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .if("ctx:!productType!_eq_!shoes!").chain() .aspectRatio("1:1").gravity("auto").width(200).crop("fill").chain() .if("end")).generate("sunset_shoes.jpg"); ``` ```flutter cloudinary.image('sunset_shoes.jpg').transformation(Transformation() .addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,g_auto,w_200/if_end")); ``` ```kotlin cloudinary.image { publicId("sunset_shoes.jpg") addTransformation("if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,g_auto,w_200/if_end") }.generate() ``` ```jquery $.cloudinary.image("sunset_shoes.jpg", {transformation: [ {if: "ctx:!productType!_eq_!shoes!"}, {aspect_ratio: "1:1", gravity: "auto", width: 200, crop: "fill"}, {if: "end"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { fill } from "@cloudinary/url-gen/actions/resize"; import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio"; import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("sunset_shoes.jpg").conditional( ifCondition( "ctx:!productType! = !shoes!", new Transformation().resize( fill().width(200).aspectRatio(ar1X1()).gravity(autoGravity()) ) ) ); ``` * **Conditional image overlay based on tags**: This example adds a sale icon to a product image if both the strings 'sale' and 'in_stock' are among the tags assigned to the image: ![product with conditional sale icon ](https://res.cloudinary.com/demo/video/upload/if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300/docs/sunglasses.mp4) ```nodejs cloudinary.video("docs/sunglasses", {transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: "sale_icon"}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```python CloudinaryVideo("docs/sunglasses").video(transformation=[ {'if': "!sale:in_stock!_in_tags"}, {'overlay': "sale_icon"}, {'width': 200, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30}, {'if': "end"}, {'width': 300, 'crop': "scale"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('docs/sunglasses.mp4')) ->conditional(Conditional::ifCondition("!sale:in_stock! in tags",(new Transformation()) ->overlay(Overlay::source( Source::image("sale_icon") ->transformation((new Transformation()) ->resize(Resize::scale()->width(200))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ->offsetX(30) ->offsetY(30)) ))) ->resize(Resize::scale()->width(300)); ``` ```java cloudinary.url().transformation(new Transformation() .if("!sale:in_stock!_in_tags").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(200).crop("scale").chain() .flags("layer_apply").gravity("north_west").x(30).y(30).chain() .if("end").chain() .width(300).crop("scale")).videoTag("docs/sunglasses"); ``` ```ruby cl_video_tag("docs/sunglasses", transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: "sale_icon"}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .If("!sale:in_stock!_in_tags").Chain() .Overlay(new Layer().PublicId("sale_icon")).Chain() .Width(200).Crop("scale").Chain() .Flags("layer_apply").Gravity("north_west").X(30).Y(30).Chain() .If("end").Chain() .Width(300).Crop("scale")).BuildVideoTag("docs/sunglasses") ``` ```dart cloudinary.video('docs/sunglasses.mp4').transformation(Transformation() .addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setIf("!sale:in_stock!_in_tags").chain() .setOverlay("sale_icon").chain() .setWidth(200).setCrop("scale").chain() .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30).chain() .setIf("end").chain() .setWidth(300).setCrop("scale")).generate("docs/sunglasses.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .if("!sale:in_stock!_in_tags").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(200).crop("scale").chain() .flags("layer_apply").gravity("north_west").x(30).y(30).chain() .if("end").chain() .width(300).crop("scale")).resourceType("video").generate("docs/sunglasses.mp4"); ``` ```flutter cloudinary.video('docs/sunglasses.mp4').transformation(Transformation() .addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300")); ``` ```kotlin cloudinary.video { publicId("docs/sunglasses.mp4") addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300") }.generate() ``` ```jquery $.cloudinary.video("docs/sunglasses", {transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: new cloudinary.Layer().publicId("sale_icon")}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ![product with conditional sale icon ](https://res.cloudinary.com/demo/image/upload/if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_180/fl_layer_apply,g_south_east,x_30,y_30/if_end/c_scale,w_250/backpack.jpg) ```nodejs cloudinary.image("backpack.jpg", {transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: "sale_icon"}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "south_east", x: 30, y: 30}, {if: "end"}, {width: 250, crop: "scale"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("south_east")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(250)); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("south_east")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(250)); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("south_east")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(250)); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("south_east")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(250)); ``` ```python CloudinaryImage("backpack.jpg").image(transformation=[ {'if': "!sale:in_stock!_in_tags"}, {'overlay': "sale_icon"}, {'width': 180, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "south_east", 'x': 30, 'y': 30}, {'if': "end"}, {'width': 250, 'crop': "scale"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('backpack.jpg')) ->conditional(Conditional::ifCondition("!sale:in_stock! in tags",(new Transformation()) ->overlay(Overlay::source( Source::image("sale_icon") ->transformation((new Transformation()) ->resize(Resize::scale()->width(180))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::southEast())) ->offsetX(30) ->offsetY(30)) ))) ->resize(Resize::scale()->width(250)); ``` ```java cloudinary.url().transformation(new Transformation() .if("!sale:in_stock!_in_tags").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(180).crop("scale").chain() .flags("layer_apply").gravity("south_east").x(30).y(30).chain() .if("end").chain() .width(250).crop("scale")).imageTag("backpack.jpg"); ``` ```ruby cl_image_tag("backpack.jpg", transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: "sale_icon"}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "south_east", x: 30, y: 30}, {if: "end"}, {width: 250, crop: "scale"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .If("!sale:in_stock!_in_tags").Chain() .Overlay(new Layer().PublicId("sale_icon")).Chain() .Width(180).Crop("scale").Chain() .Flags("layer_apply").Gravity("south_east").X(30).Y(30).Chain() .If("end").Chain() .Width(250).Crop("scale")).BuildImageTag("backpack.jpg") ``` ```dart cloudinary.image('backpack.jpg').transformation(Transformation() .addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_180/fl_layer_apply,g_south_east,x_30,y_30/if_end/c_scale,w_250")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setIf("!sale:in_stock!_in_tags").chain() .setOverlay("sale_icon").chain() .setWidth(180).setCrop("scale").chain() .setFlags("layer_apply").setGravity("south_east").setX(30).setY(30).chain() .setIf("end").chain() .setWidth(250).setCrop("scale")).generate("backpack.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .if("!sale:in_stock!_in_tags").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(180).crop("scale").chain() .flags("layer_apply").gravity("south_east").x(30).y(30).chain() .if("end").chain() .width(250).crop("scale")).generate("backpack.jpg"); ``` ```flutter cloudinary.image('backpack.jpg').transformation(Transformation() .addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_180/fl_layer_apply,g_south_east,x_30,y_30/if_end/c_scale,w_250")); ``` ```kotlin cloudinary.image { publicId("backpack.jpg") addTransformation("if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_180/fl_layer_apply,g_south_east,x_30,y_30/if_end/c_scale,w_250") }.generate() ``` ```jquery $.cloudinary.image("backpack.jpg", {transformation: [ {if: "!sale:in_stock!_in_tags"}, {overlay: new cloudinary.Layer().publicId("sale_icon")}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "south_east", x: 30, y: 30}, {if: "end"}, {width: 250, crop: "scale"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "!sale:in_stock! in tags", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("south_east")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(250)); ``` * **Conditional image overlay based on structured metadata value**: This example adds a sale icon to a product image if the stock level of the product is less than 50 (as determined by the value of the numeric structured metadata field with external ID, `stock-level`, here set as 30): ![product with conditional sale icon based on stock level](https://res.cloudinary.com/demo/video/upload/if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300/docs/sunglasses.mp4) ```nodejs cloudinary.video("docs/sunglasses", {transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: "sale_icon"}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ```python CloudinaryVideo("docs/sunglasses").video(transformation=[ {'if': "md:!stock-level!_lt_50"}, {'overlay': "sale_icon"}, {'width': 200, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30}, {'if': "end"}, {'width': 300, 'crop': "scale"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('docs/sunglasses.mp4')) ->conditional(Conditional::ifCondition("md:!stock-level! < 50",(new Transformation()) ->overlay(Overlay::source( Source::image("sale_icon") ->transformation((new Transformation()) ->resize(Resize::scale()->width(200))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ->offsetX(30) ->offsetY(30)) ))) ->resize(Resize::scale()->width(300)); ``` ```java cloudinary.url().transformation(new Transformation() .if("md:!stock-level!_lt_50").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(200).crop("scale").chain() .flags("layer_apply").gravity("north_west").x(30).y(30).chain() .if("end").chain() .width(300).crop("scale")).videoTag("docs/sunglasses"); ``` ```ruby cl_video_tag("docs/sunglasses", transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: "sale_icon"}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .If("md:!stock-level!_lt_50").Chain() .Overlay(new Layer().PublicId("sale_icon")).Chain() .Width(200).Crop("scale").Chain() .Flags("layer_apply").Gravity("north_west").X(30).Y(30).Chain() .If("end").Chain() .Width(300).Crop("scale")).BuildVideoTag("docs/sunglasses") ``` ```dart cloudinary.video('docs/sunglasses.mp4').transformation(Transformation() .addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setIf("md:!stock-level!_lt_50").chain() .setOverlay("sale_icon").chain() .setWidth(200).setCrop("scale").chain() .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30).chain() .setIf("end").chain() .setWidth(300).setCrop("scale")).generate("docs/sunglasses.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .if("md:!stock-level!_lt_50").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(200).crop("scale").chain() .flags("layer_apply").gravity("north_west").x(30).y(30).chain() .if("end").chain() .width(300).crop("scale")).resourceType("video").generate("docs/sunglasses.mp4"); ``` ```flutter cloudinary.video('docs/sunglasses.mp4').transformation(Transformation() .addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300")); ``` ```kotlin cloudinary.video { publicId("docs/sunglasses.mp4") addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300") }.generate() ``` ```jquery $.cloudinary.video("docs/sunglasses", {transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: new cloudinary.Layer().publicId("sale_icon")}, {width: 200, crop: "scale"}, {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}, {if: "end"}, {width: 300, crop: "scale"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/sunglasses.mp4") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(200)) ) ).position( new Position().gravity(compass("north_west")).offsetX(30).offsetY(30) ) ) ) ) .resize(scale().width(300)); ``` ![Product with conditional sale icon based on stock level](https://res.cloudinary.com/demo/image/upload/if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_180/fl_layer_apply,g_north_east,y_20,x_20/if_end/c_scale,w_250/backpack.jpg) ```nodejs cloudinary.image("backpack.jpg", {transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: "sale_icon"}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "north_east", y: 20, x: 20}, {if: "end"}, {width: 250, crop: "scale"} ]}) ``` ```react import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("north_east")).offsetX(20).offsetY(20) ) ) ) ) .resize(scale().width(250)); ``` ```vue import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("north_east")).offsetX(20).offsetY(20) ) ) ) ) .resize(scale().width(250)); ``` ```angular import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("north_east")).offsetX(20).offsetY(20) ) ) ) ) .resize(scale().width(250)); ``` ```js import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("north_east")).offsetX(20).offsetY(20) ) ) ) ) .resize(scale().width(250)); ``` ```python CloudinaryImage("backpack.jpg").image(transformation=[ {'if': "md:!stock-level!_lt_50"}, {'overlay': "sale_icon"}, {'width': 180, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "north_east", 'y': 20, 'x': 20}, {'if': "end"}, {'width': 250, 'crop': "scale"} ]) ``` ```php use Cloudinary\Transformation\Conditional; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('backpack.jpg')) ->conditional(Conditional::ifCondition("md:!stock-level! < 50",(new Transformation()) ->overlay(Overlay::source( Source::image("sale_icon") ->transformation((new Transformation()) ->resize(Resize::scale()->width(180))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northEast())) ->offsetX(20) ->offsetY(20)) ))) ->resize(Resize::scale()->width(250)); ``` ```java cloudinary.url().transformation(new Transformation() .if("md:!stock-level!_lt_50").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(180).crop("scale").chain() .flags("layer_apply").gravity("north_east").y(20).x(20).chain() .if("end").chain() .width(250).crop("scale")).imageTag("backpack.jpg"); ``` ```ruby cl_image_tag("backpack.jpg", transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: "sale_icon"}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "north_east", y: 20, x: 20}, {if: "end"}, {width: 250, crop: "scale"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .If("md:!stock-level!_lt_50").Chain() .Overlay(new Layer().PublicId("sale_icon")).Chain() .Width(180).Crop("scale").Chain() .Flags("layer_apply").Gravity("north_east").Y(20).X(20).Chain() .If("end").Chain() .Width(250).Crop("scale")).BuildImageTag("backpack.jpg") ``` ```dart cloudinary.image('backpack.jpg').transformation(Transformation() .addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_180/fl_layer_apply,g_north_east,y_20,x_20/if_end/c_scale,w_250")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setIf("md:!stock-level!_lt_50").chain() .setOverlay("sale_icon").chain() .setWidth(180).setCrop("scale").chain() .setFlags("layer_apply").setGravity("north_east").setY(20).setX(20).chain() .setIf("end").chain() .setWidth(250).setCrop("scale")).generate("backpack.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .if("md:!stock-level!_lt_50").chain() .overlay(new Layer().publicId("sale_icon")).chain() .width(180).crop("scale").chain() .flags("layer_apply").gravity("north_east").y(20).x(20).chain() .if("end").chain() .width(250).crop("scale")).generate("backpack.jpg"); ``` ```flutter cloudinary.image('backpack.jpg').transformation(Transformation() .addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_180/fl_layer_apply,g_north_east,y_20,x_20/if_end/c_scale,w_250")); ``` ```kotlin cloudinary.image { publicId("backpack.jpg") addTransformation("if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_180/fl_layer_apply,g_north_east,y_20,x_20/if_end/c_scale,w_250") }.generate() ``` ```jquery $.cloudinary.image("backpack.jpg", {transformation: [ {if: "md:!stock-level!_lt_50"}, {overlay: new cloudinary.Layer().publicId("sale_icon")}, {width: 180, crop: "scale"}, {flags: "layer_apply", gravity: "north_east", y: 20, x: 20}, {if: "end"}, {width: 250, crop: "scale"} ]}) ``` ```react_native import { ifCondition } from "@cloudinary/url-gen/actions/conditional"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("backpack.jpg") .conditional( ifCondition( "md:!stock-level! < 50", new Transformation().overlay( source( image("sale_icon").transformation( new Transformation().resize(scale().width(180)) ) ).position( new Position().gravity(compass("north_east")).offsetX(20).offsetY(20) ) ) ) ) .resize(scale().width(250)); ``` > **NOTE**: > > When you use variable or conditional expressions that include the `tags`, `ctx` or `md` parameters, their values are exposed publicly in the URL. If you want to prevent such values from being exposed, you can disable the **Usage of tags/context/metadata in transformation URLs** option in the **Security** Settings (enabled by default). When this setting is disabled, any URL that exposes tags, contextual metadata or structured metadata values will return an error. > **READING**: > > * [Specifying conditions](conditional_transformations): Learn how to define conditions based on image characteristics, operators, and parameters. > * [Advanced conditional transformations](advanced_conditional_transformations): Combine multiple conditions with AND/OR logic and define fallback transformations using else branches.