Conditional image transformations

Cloudinary supports conditional transformations for images, where a transformation is only applied if a specified condition is met, for example, if an image's width is greater than 300 pixels, apply a certain transformation.

See also: Conditional transformations for video.

Specifying conditions

To specify a condition to be met before applying a transformation, use the if parameter (also if in URLs). The if parameter accepts a string value detailing the condition to evaluate, and is specified in the URL in the following format:

if_<image characteristic>_<operator>_<image characteristic value>

Where:

• image characteristic: The image parameter representing the characteristic to evaluate, for example w (or width in SDKs).
• operator: The comparison operator for the comparison, for example lt for 'less than' (or < in SDKs).
• image characteristic value: A hard coded value to check against, a supported user-defined variable containing a value to check against, or a different image characteristic you want to compare to.

  For example, if you only want to apply a transformation to non-square images, you could check if the width characteristic of your image is not equal to its height characteristic: if_w_ne_h

See examples below.

Supported image characteristics

Supported operators

When working with the Cloudinary SDKs, you can specify the condition using the SDK characteristic names and operator symbols, or you can specify it using the URL format. For example, both of the following are valid:

• { if: "w_gt_1000"},...
• { if: "width > 1000"},...

Using the in and nin operators

The in and nin operators compare two sets of strings. The : delimiter between strings denotes AND. String sets can include tags, contextual metadata or structured metadata values, for example:

• To determine if sale and in_stock are present in the tags of a particular asset, use:
  if_!sale:in_stock!_in_tags.
• To determine if the key named color exists in the contextual metadata of a particular asset, use:
  if_!color!_in_ctx.
• To determine if a structured metadata field with external ID, color-id, has been set for a particular asset, use:
  if_!color-id!_in_md.
• To determine if a list value with external ID, green-id, has been selected from a multiple-selection structured metadata field with external ID, colors-id, for a particular asset, use:
  if_!green-id!_in_md!colors-id!.

For TIFF files:

• To determine if a TIFF file contains a layer called Shadow, use:
  if_!Shadow!_in_pgnames.

Supported conditional image transformation parameters and flags

• All image transformation parameters can be assigned in conditions except:

  • You cannot assign transformation parameters for the format, fetch_format, default_image, color_space, or delay parameters.
  • The page (pg in URLs) parameter cannot be assigned for animated images
    (page can be used in conditions for PSD, PDF, or TIFF documents).
  • The quality parameter cannot be set to jpegmini.
  • The angle parameter cannot be set to ignore.

• Only the following flags are supported inside conditional image transformations:
  layer_apply, region_relative, relative, progressive, cutter, png8, attachment, awebp, lossy

Notes

• For the w, h, cp and ar parameters, the values refer to the current image status in the transformation chain (i.e., if transformations have already been applied to the image), while iw, ih, fc and pc always refer to the original image.
• dpr is not supported as a conditional transformation with the cp and ar characteristics. Additionally, w and h are supported with dpr as long as they are still equal to iw or ih when the condition is evaluated. If dpr is specified in the transformation as a whole, and one of the conditional branches includes a resizing transformation, you need to specify a resize transformation in all the other branches too.
• The ar (aspect ratio) parameter should be compared using 'greater than' or 'less than' rather than with 'equals'. This is because the width and height values are given as integers and not floating point values, leading to an "almost exact" calculated aspect ratio.

Specifying transformations for a condition

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 transformation, both images are are scaled to a width of 500px. Afterwards, the same 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 only applied to the ladybug image.

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"}
  ])

cl_image_tag("docs/autumn_woods.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("if"=>"ar_lt_1.0"),
  array("background"=>"auto", "height"=>300, "width"=>500, "crop"=>"pad"),
  array("if"=>"end")
  )))

(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())
  )));

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"}
  ])

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"}
  ]})

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");

cloudinary.imageTag('docs/autumn_woods.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "auto", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]}).toHtml();

$.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"}
  ]})

<Image publicId="docs/autumn_woods.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation if="ar_lt_1.0" />
  <Transformation background="auto" height="300" width="500" crop="pad" />
  <Transformation if="end" />
</Image>

<cld-image publicId="docs/autumn_woods.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="ar_lt_1.0" />
  <cld-transformation background="auto" height="300" width="500" crop="pad" />
  <cld-transformation if="end" />
</cld-image>

<cl-image public-id="docs/autumn_woods.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation if="ar_lt_1.0">
  </cl-transformation>
  <cl-transformation background="auto" height="300" width="500" crop="pad">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>

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")

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)

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");

cloudinary.image {
publicId("docs/autumn_woods.jpg")
resize(Resize.scale() {
width(500)
})
conditional(Conditional.ifCondition("aspect_ratio < 1.0", Transformation {
resize(Resize.pad() {
width(500)
height(300)
background(Background.auto())
})
}))}.generate()

cl_image_tag("ladybug_top.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:if=>"ar_lt_1.0"},
  {:background=>"auto", :height=>300, :width=>500, :crop=>"pad"},
  {:if=>"end"}
  ])

cl_image_tag("ladybug_top.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("if"=>"ar_lt_1.0"),
  array("background"=>"auto", "height"=>300, "width"=>500, "crop"=>"pad"),
  array("if"=>"end")
  )))

(new ImageTag('ladybug_top.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())
  )));

CloudinaryImage("ladybug_top.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'if': "ar_lt_1.0"},
  {'background': "auto", 'height': 300, 'width': 500, 'crop': "pad"},
  {'if': "end"}
  ])

cloudinary.image("ladybug_top.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "auto", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

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("ladybug_top.jpg");

cloudinary.imageTag('ladybug_top.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "auto", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]}).toHtml();

$.cloudinary.image("ladybug_top.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "auto", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

<Image publicId="ladybug_top.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation if="ar_lt_1.0" />
  <Transformation background="auto" height="300" width="500" crop="pad" />
  <Transformation if="end" />
</Image>

<cld-image publicId="ladybug_top.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="ar_lt_1.0" />
  <cld-transformation background="auto" height="300" width="500" crop="pad" />
  <cld-transformation if="end" />
</cld-image>

<cl-image public-id="ladybug_top.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation if="ar_lt_1.0">
  </cl-transformation>
  <cl-transformation background="auto" height="300" width="500" crop="pad">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>

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("ladybug_top.jpg")

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("ladybug_top.jpg")!, cloudinary: cloudinary)

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("ladybug_top.jpg");

cloudinary.image {
publicId("ladybug_top.jpg")
resize(Resize.scale() {
width(500)
})
conditional(Conditional.ifCondition("aspect_ratio < 1.0", Transformation {
resize(Resize.pad() {
width(500)
height(300)
background(Background.auto())
})
}))}.generate()

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 600px, you can conditionally add a blurred background for images whose width is less than 600px, along with a text overlay:

cl_image_tag("small_dinosaur.jpg", :transformation=>[
  {:if=>"w_lt_600"},
  {:color=>"white", :overlay=>{:font_family=>"Arial", :font_size=>20, :text=>"Image%2520shown%2520in%2520full%2520scale"}},
  {:flags=>"layer_apply", :gravity=>"south_east"},
  {:underlay=>"small_dinosaur"},
  {:width=>600, :crop=>"scale"},
  {:effect=>"blur:400"},
  {:flags=>"layer_apply"},
  {:if=>"end"}
  ])

cl_image_tag("small_dinosaur.jpg", array("transformation"=>array(
  array("if"=>"w_lt_600"),
  array("color"=>"white", "overlay"=>array("font_family"=>"Arial", "font_size"=>20, "text"=>"Image%2520shown%2520in%2520full%2520scale")),
  array("flags"=>"layer_apply", "gravity"=>"south_east"),
  array("underlay"=>"small_dinosaur"),
  array("width"=>600, "crop"=>"scale"),
  array("effect"=>"blur:400"),
  array("flags"=>"layer_apply"),
  array("if"=>"end")
  )))

(new ImageTag('small_dinosaur.jpg'))
  ->conditional(
      Conditional::ifCondition('width < 600', (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('small_dinosaur')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::scale()->width(600))
                  ->effect(Effect::blur()->strength(400))
          
            
          )))));

CloudinaryImage("small_dinosaur.jpg").image(transformation=[
  {'if': "w_lt_600"},
  {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 20, 'text': "Image%2520shown%2520in%2520full%2520scale"}},
  {'flags': "layer_apply", 'gravity': "south_east"},
  {'underlay': "small_dinosaur"},
  {'width': 600, 'crop': "scale"},
  {'effect': "blur:400"},
  {'flags': "layer_apply"},
  {'if': "end"}
  ])

cloudinary.image("small_dinosaur.jpg", {transformation: [
  {if: "w_lt_600"},
  {color: "white", overlay: {font_family: "Arial", font_size: 20, text: "Image%2520shown%2520in%2520full%2520scale"}},
  {flags: "layer_apply", gravity: "south_east"},
  {underlay: "small_dinosaur"},
  {width: 600, crop: "scale"},
  {effect: "blur:400"},
  {flags: "layer_apply"},
  {if: "end"}
  ]})

cloudinary.url().transformation(new Transformation()
  .if("w_lt_600").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("small_dinosaur")).chain()
  .width(600).crop("scale").chain()
  .effect("blur:400").chain()
  .flags("layer_apply").chain()
  .if("end")).imageTag("small_dinosaur.jpg");

cloudinary.imageTag('small_dinosaur.jpg', {transformation: [
  {if: "w_lt_600"},
  {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("small_dinosaur")},
  {width: 600, crop: "scale"},
  {effect: "blur:400"},
  {flags: "layer_apply"},
  {if: "end"}
  ]}).toHtml();

$.cloudinary.image("small_dinosaur.jpg", {transformation: [
  {if: "w_lt_600"},
  {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("small_dinosaur")},
  {width: 600, crop: "scale"},
  {effect: "blur:400"},
  {flags: "layer_apply"},
  {if: "end"}
  ]})

<Image publicId="small_dinosaur.jpg" >
  <Transformation if="w_lt_600" />
  <Transformation color="white" overlay={{fontFamily: "Arial", fontSize: 20, text: "Image%2520shown%2520in%2520full%2520scale"}} />
  <Transformation flags="layer_apply" gravity="south_east" />
  <Transformation underlay="small_dinosaur" />
  <Transformation width="600" crop="scale" />
  <Transformation effect="blur:400" />
  <Transformation flags="layer_apply" />
  <Transformation if="end" />
</Image>

<cld-image publicId="small_dinosaur.jpg" >
  <cld-transformation if="w_lt_600" />
  <cld-transformation color="white" :overlay="{fontFamily: 'Arial', fontSize: 20, text: 'Image%2520shown%2520in%2520full%2520scale'}" />
  <cld-transformation flags="layer_apply" gravity="south_east" />
  <cld-transformation :underlay="small_dinosaur" />
  <cld-transformation width="600" crop="scale" />
  <cld-transformation effect="blur:400" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation if="end" />
</cld-image>

<cl-image public-id="small_dinosaur.jpg" >
  <cl-transformation if="w_lt_600">
  </cl-transformation>
  <cl-transformation color="white" overlay="text:Arial_20:Image%2520shown%2520in%2520full%2520scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south_east">
  </cl-transformation>
  <cl-transformation underlay="small_dinosaur">
  </cl-transformation>
  <cl-transformation width="600" crop="scale">
  </cl-transformation>
  <cl-transformation effect="blur:400">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("w_lt_600").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("small_dinosaur")).Chain()
  .Width(600).Crop("scale").Chain()
  .Effect("blur:400").Chain()
  .Flags("layer_apply").Chain()
  .If("end")).BuildImageTag("small_dinosaur.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("w_lt_600").chain()
  .setColor("white").setOverlay("text:Arial_20:Image%2520shown%2520in%2520full%2520scale").chain()
  .setFlags("layer_apply").setGravity("south_east").chain()
  .setUnderlay("small_dinosaur").chain()
  .setWidth(600).setCrop("scale").chain()
  .setEffect("blur:400").chain()
  .setFlags("layer_apply").chain()
  .setIf("end")).generate("small_dinosaur.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .if("w_lt_600").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("small_dinosaur")).chain()
  .width(600).crop("scale").chain()
  .effect("blur:400").chain()
  .flags("layer_apply").chain()
  .if("end")).generate("small_dinosaur.jpg");

cloudinary.image {
publicId("small_dinosaur.jpg")
conditional(Conditional.ifCondition("width < 600", Transformation {
overlay(Overlay.source(Source.text("Image%20shown%20in%20full%20scale", TextStyle("Arial", 20)) {
textColor(Color.WHITE)
}) {
position(Position {
gravity(Gravity.compass(Compass.southEast()))
})
})
underlay(Underlay.source(Source.image("small_dinosaur") {
transformation(ImageTransformation {
resize(Resize.scale() {
width(600)
})
effect(Effect.blur() {
strength(400)
})
})
}))
}))}.generate()

Multiple AND | OR conditions

You can specify multiple conditions to evaluate by joining the conditions with AND or OR conjunction operators.

For example, to crop the sample image to a width of 300 pixels and a height of 200 pixels, only if the aspect ratio is greater than 3:4, the width is greater than 300, and the height is greater than 200 (if_ar_gt_3:4_and_w_gt_300_and_h_gt_200):

cl_image_tag("sample.jpg", :if=>"ar_gt_3:4_and_w_gt_300_and_h_gt_200", :width=>300, :height=>200, :crop=>"crop")

cl_image_tag("sample.jpg", array("if"=>"ar_gt_3:4_and_w_gt_300_and_h_gt_200", "width"=>300, "height"=>200, "crop"=>"crop"))

(new ImageTag('sample.jpg'))
  ->conditional(
      Conditional::ifCondition('aspect_ratio > 3:4 && width > 300 && height > 200', (new Transformation())
        ->resize(Resize::crop()->width(300)->height(200))
  ));

CloudinaryImage("sample.jpg").image(if="ar_gt_3:4_and_w_gt_300_and_h_gt_200", width=300, height=200, crop="crop")

cloudinary.image("sample.jpg", {if: "ar_gt_3:4_and_w_gt_300_and_h_gt_200", width: 300, height: 200, crop: "crop"})

cloudinary.url().transformation(new Transformation().if("ar_gt_3:4_and_w_gt_300_and_h_gt_200").width(300).height(200).crop("crop")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {if: "ar_gt_3:4_and_w_gt_300_and_h_gt_200", width: 300, height: 200, crop: "crop"}).toHtml();

$.cloudinary.image("sample.jpg", {if: "ar_gt_3:4_and_w_gt_300_and_h_gt_200", width: 300, height: 200, crop: "crop"})

<Image publicId="sample.jpg" >
  <Transformation if="ar_gt_3:4_and_w_gt_300_and_h_gt_200" width="300" height="200" crop="crop" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation if="ar_gt_3:4_and_w_gt_300_and_h_gt_200" width="300" height="200" crop="crop" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation if="ar_gt_3:4_and_w_gt_300_and_h_gt_200" width="300" height="200" crop="crop">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().If("ar_gt_3:4_and_w_gt_300_and_h_gt_200").Width(300).Height(200).Crop("crop")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setIf("ar_gt_3:4_and_w_gt_300_and_h_gt_200").setWidth(300).setHeight(200).setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().if("ar_gt_3:4_and_w_gt_300_and_h_gt_200").width(300).height(200).crop("crop")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
conditional(Conditional.ifCondition("aspect_ratio > 3:4 && width > 300 && height > 200", Transformation {
resize(Resize.crop() {
width(300)
height(200)
})
}))}.generate()

Else branch transformations

You can specify a transformation that is applied in the case that the initial condition is evaluated as false (and hence the transformations associated with the condition are not applied), by using the if_else parameter to specify this fallback transformation.

For example, to fill an image to a width of 80 pixels and a height of 120 pixels if the original image has a width less than or equal to 200 pixels (the condition: if_iw_lte_200,c_fill,h_120,w_80), and to fill the image to a width of 100 pixels and a height of 150 pixels if the original image has a width greater than 200 pixels (the fallback: if_else,c_fill,h_90,w_100):

cl_image_tag("sample.jpg", :transformation=>[
  {:if=>"iw_lte_200"},
  {:height=>120, :width=>80, :crop=>"fill"},
  {:if=>"else"},
  {:height=>90, :width=>100, :crop=>"fill"},
  {:if=>"end"}
  ])

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("if"=>"iw_lte_200"),
  array("height"=>120, "width"=>80, "crop"=>"fill"),
  array("if"=>"else"),
  array("height"=>90, "width"=>100, "crop"=>"fill"),
  array("if"=>"end")
  )))

(new ImageTag('sample.jpg'))
  ->conditional(
      Conditional::ifCondition('iw_lte_200', (new Transformation())
        ->resize(Resize::fill()->width(80)->height(120)))
      ->otherwise((new Transformation())
        ->resize(Resize::fill()->width(100)->height(90))
  ));

CloudinaryImage("sample.jpg").image(transformation=[
  {'if': "iw_lte_200"},
  {'height': 120, 'width': 80, 'crop': "fill"},
  {'if': "else"},
  {'height': 90, 'width': 100, 'crop': "fill"},
  {'if': "end"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {if: "iw_lte_200"},
  {height: 120, width: 80, crop: "fill"},
  {if: "else"},
  {height: 90, width: 100, crop: "fill"},
  {if: "end"}
  ]})

cloudinary.url().transformation(new Transformation()
  .if("iw_lte_200").chain()
  .height(120).width(80).crop("fill").chain()
  .if("else").chain()
  .height(90).width(100).crop("fill").chain()
  .if("end")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: [
  {if: "iw_lte_200"},
  {height: 120, width: 80, crop: "fill"},
  {if: "else"},
  {height: 90, width: 100, crop: "fill"},
  {if: "end"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {if: "iw_lte_200"},
  {height: 120, width: 80, crop: "fill"},
  {if: "else"},
  {height: 90, width: 100, crop: "fill"},
  {if: "end"}
  ]})

<Image publicId="sample.jpg" >
  <Transformation if="iw_lte_200" />
  <Transformation height="120" width="80" crop="fill" />
  <Transformation if="else" />
  <Transformation height="90" width="100" crop="fill" />
  <Transformation if="end" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation if="iw_lte_200" />
  <cld-transformation height="120" width="80" crop="fill" />
  <cld-transformation if="else" />
  <cld-transformation height="90" width="100" crop="fill" />
  <cld-transformation if="end" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation if="iw_lte_200">
  </cl-transformation>
  <cl-transformation height="120" width="80" crop="fill">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation height="90" width="100" crop="fill">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("iw_lte_200").Chain()
  .Height(120).Width(80).Crop("fill").Chain()
  .If("else").Chain()
  .Height(90).Width(100).Crop("fill").Chain()
  .If("end")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("iw_lte_200").chain()
  .setHeight(120).setWidth(80).setCrop("fill").chain()
  .setIf("else").chain()
  .setHeight(90).setWidth(100).setCrop("fill").chain()
  .setIf("end")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .if("iw_lte_200").chain()
  .height(120).width(80).crop("fill").chain()
  .if("else").chain()
  .height(90).width(100).crop("fill").chain()
  .if("end")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
conditional(Conditional.ifCondition("iw_lte_200", Transformation {
resize(Resize.fill() {
width(80)
height(120)
})
}) {
otherwise(Transformation {
resize(Resize.fill() {
width(100)
height(90)
})
})
})}.generate()

In cases where the if condition is not in the preceding transformation component, then the if_else parameter also acts as an if_end parameter: all chained transformation components until the one with if_else are only applied if the previous condition holds true. Multiple conditional transformations can also be applied by adding an if_end parameter to the last transformation component in the chain, and to avoid ambiguity, the component with the if_else parameter should not have additional transformation instructions.

For example, if the width is less than or equal to 400 pixels then fill the image to 220x180 and add a red effect, else if the width is greater than 400 pixels then fill the image to 190x300 and add an oil painting effect:

cl_image_tag("sample.jpg", :transformation=>[
  {:if=>"w_lte_400"},
  {:height=>220, :width=>180, :crop=>"fill"},
  {:effect=>"red"},
  {:if=>"else"},
  {:height=>190, :width=>300, :crop=>"fill"},
  {:effect=>"oil_paint"},
  {:if=>"end"}
  ])

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("if"=>"w_lte_400"),
  array("height"=>220, "width"=>180, "crop"=>"fill"),
  array("effect"=>"red"),
  array("if"=>"else"),
  array("height"=>190, "width"=>300, "crop"=>"fill"),
  array("effect"=>"oil_paint"),
  array("if"=>"end")
  )))

(new ImageTag('sample.jpg'))
  ->conditional(
      Conditional::ifCondition('w_lte_400', (new Transformation())
        ->resize(Resize::fill()->width(180)->height(220))
        ->adjust(Adjust::red()))
      ->otherwise((new Transformation())
        ->resize(Resize::fill()->width(300)->height(190))
        ->effect(Effect::oilPaint())
  ));

CloudinaryImage("sample.jpg").image(transformation=[
  {'if': "w_lte_400"},
  {'height': 220, 'width': 180, 'crop': "fill"},
  {'effect': "red"},
  {'if': "else"},
  {'height': 190, 'width': 300, 'crop': "fill"},
  {'effect': "oil_paint"},
  {'if': "end"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {if: "w_lte_400"},
  {height: 220, width: 180, crop: "fill"},
  {effect: "red"},
  {if: "else"},
  {height: 190, width: 300, crop: "fill"},
  {effect: "oil_paint"},
  {if: "end"}
  ]})

cloudinary.url().transformation(new Transformation()
  .if("w_lte_400").chain()
  .height(220).width(180).crop("fill").chain()
  .effect("red").chain()
  .if("else").chain()
  .height(190).width(300).crop("fill").chain()
  .effect("oil_paint").chain()
  .if("end")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: [
  {if: "w_lte_400"},
  {height: 220, width: 180, crop: "fill"},
  {effect: "red"},
  {if: "else"},
  {height: 190, width: 300, crop: "fill"},
  {effect: "oil_paint"},
  {if: "end"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {if: "w_lte_400"},
  {height: 220, width: 180, crop: "fill"},
  {effect: "red"},
  {if: "else"},
  {height: 190, width: 300, crop: "fill"},
  {effect: "oil_paint"},
  {if: "end"}
  ]})

<Image publicId="sample.jpg" >
  <Transformation if="w_lte_400" />
  <Transformation height="220" width="180" crop="fill" />
  <Transformation effect="red" />
  <Transformation if="else" />
  <Transformation height="190" width="300" crop="fill" />
  <Transformation effect="oil_paint" />
  <Transformation if="end" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation if="w_lte_400" />
  <cld-transformation height="220" width="180" crop="fill" />
  <cld-transformation effect="red" />
  <cld-transformation if="else" />
  <cld-transformation height="190" width="300" crop="fill" />
  <cld-transformation effect="oil_paint" />
  <cld-transformation if="end" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation if="w_lte_400">
  </cl-transformation>
  <cl-transformation height="220" width="180" crop="fill">
  </cl-transformation>
  <cl-transformation effect="red">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation height="190" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation effect="oil_paint">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("w_lte_400").Chain()
  .Height(220).Width(180).Crop("fill").Chain()
  .Effect("red").Chain()
  .If("else").Chain()
  .Height(190).Width(300).Crop("fill").Chain()
  .Effect("oil_paint").Chain()
  .If("end")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setIf("w_lte_400").chain()
  .setHeight(220).setWidth(180).setCrop("fill").chain()
  .setEffect("red").chain()
  .setIf("else").chain()
  .setHeight(190).setWidth(300).setCrop("fill").chain()
  .setEffect("oil_paint").chain()
  .setIf("end")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .if("w_lte_400").chain()
  .height(220).width(180).crop("fill").chain()
  .effect("red").chain()
  .if("else").chain()
  .height(190).width(300).crop("fill").chain()
  .effect("oil_paint").chain()
  .if("end")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
conditional(Conditional.ifCondition("w_lte_400", Transformation {
resize(Resize.fill() {
width(180)
height(220)
})
adjust(Adjust.red())
}) {
otherwise(Transformation {
resize(Resize.fill() {
width(300)
height(190)
})
effect(Effect.oilPaint())
})
})}.generate()

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):
  

  URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

  URL:

  Copy to clipboard

  https://res.cloudinary.com/demo/image/upload/c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Image scaled down to 300px/fl_layer_apply,g_south_east/if_end/sample.jpg

  Ruby:

  Copy to clipboard

  cl_image_tag("sample.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=>"south_east"},
    {:if=>"end"}
    ])

  PHP v1:

  Copy to clipboard

  cl_image_tag("sample.jpg", array("transformation"=>array(
    array("width"=>300, "crop"=>"limit"),
    array("if"=>"iw_gt_300"),
    array("color"=>"white", "overlay"=>array("font_family"=>"Arial", "font_size"=>15, "font_weight"=>"bold", "text"=>"Image%20scaled%20down%20to%20300px")),
    array("flags"=>"layer_apply", "gravity"=>"south_east"),
    array("if"=>"end")
    )))

  PHP v2:

  Copy to clipboard

  (new ImageTag('sample.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::southEast()))
            
              
              ))));

  Python:

  Copy to clipboard

  CloudinaryImage("sample.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': "south_east"},
    {'if': "end"}
    ])

  Node.js:

  Copy to clipboard

  cloudinary.image("sample.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: "south_east"},
    {if: "end"}
    ]})

  Java:

  Copy to clipboard

  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("south_east").chain()
    .if("end")).imageTag("sample.jpg");

  JS:

  Copy to clipboard

  cloudinary.imageTag('sample.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: "south_east"},
    {if: "end"}
    ]}).toHtml();

  jQuery:

  Copy to clipboard

  $.cloudinary.image("sample.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: "south_east"},
    {if: "end"}
    ]})

  React:

  Copy to clipboard

  <Image publicId="sample.jpg" >
    <Transformation width="300" crop="limit" />
    <Transformation if="iw_gt_300" />
    <Transformation color="white" overlay={{fontFamily: "Arial", fontSize: 15, fontWeight: "bold", text: "Image%20scaled%20down%20to%20300px"}} />
    <Transformation flags="layer_apply" gravity="south_east" />
    <Transformation if="end" />
  </Image>

  Vue.js:

  Copy to clipboard

  <cld-image publicId="sample.jpg" >
    <cld-transformation width="300" crop="limit" />
    <cld-transformation if="iw_gt_300" />
    <cld-transformation color="white" :overlay="{fontFamily: 'Arial', fontSize: 15, fontWeight: 'bold', text: 'Image%20scaled%20down%20to%20300px'}" />
    <cld-transformation flags="layer_apply" gravity="south_east" />
    <cld-transformation if="end" />
  </cld-image>

  Angular:

  Copy to clipboard

  <cl-image public-id="sample.jpg" >
    <cl-transformation width="300" crop="limit">
    </cl-transformation>
    <cl-transformation if="iw_gt_300">
    </cl-transformation>
    <cl-transformation color="white" overlay="text:Arial_15_bold:Image%20scaled%20down%20to%20300px">
    </cl-transformation>
    <cl-transformation flags="layer_apply" gravity="south_east">
    </cl-transformation>
    <cl-transformation if="end">
    </cl-transformation>
  </cl-image>

  .NET:

  Copy to clipboard

  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("south_east").Chain()
    .If("end")).BuildImageTag("sample.jpg")

  iOS:

  Copy to clipboard

  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("south_east").chain()
    .setIf("end")).generate("sample.jpg")!, cloudinary: cloudinary)

  Android:

  Copy to clipboard

  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("south_east").chain()
    .if("end")).generate("sample.jpg");

  Kotlin:

  Copy to clipboard

  cloudinary.image {
  publicId("sample.jpg")
  resize(Resize.limitFit() {
  width(300)
  })
  conditional(Conditional.ifCondition("initial_width > 300", Transformation {
  overlay(Overlay.source(Source.text("Image scaled down to 300px", TextStyle("Arial", 15) {
  fontWeight(FontWeight.bold())
  }) {
  textColor(Color.WHITE)
  }) {
  position(Position {
  gravity(Gravity.compass(Compass.southEast()))
  })
  })
  }))}.generate()

  
  
  

• Conditional cropping mode based on illustration score This example ensures that uploaded graphics such as logos are never cut off, even if the art design changes its aspect ratio, but photos will always fill the full space available. Using the ils conditional characteristic, the cloudinary_icon_blue logo is cropped using the pad method and the sample photo is cropped using the fill method:
  

  URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

  URL:

  Copy to clipboard

  https://res.cloudinary.com/demo/image/upload/if_ils_gt_0.5/c_pad,h_150,w_120/if_else/c_fill,h_150,w_120/if_end/cloudinary_icon_blue.jpg

  Ruby:

  Copy to clipboard

  cl_image_tag("cloudinary_icon_blue.jpg", :transformation=>[
    {:if=>"ils_gt_0.5"},
    {:height=>150, :width=>120, :crop=>"pad"},
    {:if=>"else"},
    {:height=>150, :width=>120, :crop=>"fill"},
    {:if=>"end"}
    ])

  PHP v1:

  Copy to clipboard

  cl_image_tag("cloudinary_icon_blue.jpg", array("transformation"=>array(
    array("if"=>"ils_gt_0.5"),
    array("height"=>150, "width"=>120, "crop"=>"pad"),
    array("if"=>"else"),
    array("height"=>150, "width"=>120, "crop"=>"fill"),
    array("if"=>"end")
    )))

  PHP v2:

  Copy to clipboard

  (new ImageTag('cloudinary_icon_blue.jpg'))
    ->conditional(
        Conditional::ifCondition('ils > 0.5', (new Transformation())
          ->resize(Resize::pad()->width(120)->height(150)))
        ->otherwise((new Transformation())
          ->resize(Resize::fill()->width(120)->height(150))
    ));

  Python:

  Copy to clipboard

  CloudinaryImage("cloudinary_icon_blue.jpg").image(transformation=[
    {'if': "ils_gt_0.5"},
    {'height': 150, 'width': 120, 'crop': "pad"},
    {'if': "else"},
    {'height': 150, 'width': 120, 'crop': "fill"},
    {'if': "end"}
    ])

  Node.js:

  Copy to clipboard

  cloudinary.image("cloudinary_icon_blue.jpg", {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]})

  Java:

  Copy to clipboard

  cloudinary.url().transformation(new Transformation()
    .if("ils_gt_0.5").chain()
    .height(150).width(120).crop("pad").chain()
    .if("else").chain()
    .height(150).width(120).crop("fill").chain()
    .if("end")).imageTag("cloudinary_icon_blue.jpg");

  JS:

  Copy to clipboard

  cloudinary.imageTag('cloudinary_icon_blue.jpg', {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]}).toHtml();

  jQuery:

  Copy to clipboard

  $.cloudinary.image("cloudinary_icon_blue.jpg", {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]})

  React:

  Copy to clipboard

  <Image publicId="cloudinary_icon_blue.jpg" >
    <Transformation if="ils_gt_0.5" />
    <Transformation height="150" width="120" crop="pad" />
    <Transformation if="else" />
    <Transformation height="150" width="120" crop="fill" />
    <Transformation if="end" />
  </Image>

  Vue.js:

  Copy to clipboard

  <cld-image publicId="cloudinary_icon_blue.jpg" >
    <cld-transformation if="ils_gt_0.5" />
    <cld-transformation height="150" width="120" crop="pad" />
    <cld-transformation if="else" />
    <cld-transformation height="150" width="120" crop="fill" />
    <cld-transformation if="end" />
  </cld-image>

  Angular:

  Copy to clipboard

  <cl-image public-id="cloudinary_icon_blue.jpg" >
    <cl-transformation if="ils_gt_0.5">
    </cl-transformation>
    <cl-transformation height="150" width="120" crop="pad">
    </cl-transformation>
    <cl-transformation if="else">
    </cl-transformation>
    <cl-transformation height="150" width="120" crop="fill">
    </cl-transformation>
    <cl-transformation if="end">
    </cl-transformation>
  </cl-image>

  .NET:

  Copy to clipboard

  cloudinary.Api.UrlImgUp.Transform(new Transformation()
    .If("ils_gt_0.5").Chain()
    .Height(150).Width(120).Crop("pad").Chain()
    .If("else").Chain()
    .Height(150).Width(120).Crop("fill").Chain()
    .If("end")).BuildImageTag("cloudinary_icon_blue.jpg")

  iOS:

  Copy to clipboard

  imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
    .setIf("ils_gt_0.5").chain()
    .setHeight(150).setWidth(120).setCrop("pad").chain()
    .setIf("else").chain()
    .setHeight(150).setWidth(120).setCrop("fill").chain()
    .setIf("end")).generate("cloudinary_icon_blue.jpg")!, cloudinary: cloudinary)

  Android:

  Copy to clipboard

  MediaManager.get().url().transformation(new Transformation()
    .if("ils_gt_0.5").chain()
    .height(150).width(120).crop("pad").chain()
    .if("else").chain()
    .height(150).width(120).crop("fill").chain()
    .if("end")).generate("cloudinary_icon_blue.jpg");

  Kotlin:

  Copy to clipboard

  cloudinary.image {
  publicId("cloudinary_icon_blue.jpg")
  conditional(Conditional.ifCondition("ils > 0.5", Transformation {
  resize(Resize.pad() {
  width(120)
  height(150)
  })
  }) {
  otherwise(Transformation {
  resize(Resize.fill() {
  width(120)
  height(150)
  })
  })
  })}.generate()

  
  URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

  URL:

  Copy to clipboard

  https://res.cloudinary.com/demo/image/upload/if_ils_gt_0.5/c_pad,h_150,w_120/if_else/c_fill,h_150,w_120/if_end/sample.jpg

  Ruby:

  Copy to clipboard

  cl_image_tag("sample.jpg", :transformation=>[
    {:if=>"ils_gt_0.5"},
    {:height=>150, :width=>120, :crop=>"pad"},
    {:if=>"else"},
    {:height=>150, :width=>120, :crop=>"fill"},
    {:if=>"end"}
    ])

  PHP v1:

  Copy to clipboard

  cl_image_tag("sample.jpg", array("transformation"=>array(
    array("if"=>"ils_gt_0.5"),
    array("height"=>150, "width"=>120, "crop"=>"pad"),
    array("if"=>"else"),
    array("height"=>150, "width"=>120, "crop"=>"fill"),
    array("if"=>"end")
    )))

  PHP v2:

  Copy to clipboard

  (new ImageTag('sample.jpg'))
    ->conditional(
        Conditional::ifCondition('ils > 0.5', (new Transformation())
          ->resize(Resize::pad()->width(120)->height(150)))
        ->otherwise((new Transformation())
          ->resize(Resize::fill()->width(120)->height(150))
    ));

  Python:

  Copy to clipboard

  CloudinaryImage("sample.jpg").image(transformation=[
    {'if': "ils_gt_0.5"},
    {'height': 150, 'width': 120, 'crop': "pad"},
    {'if': "else"},
    {'height': 150, 'width': 120, 'crop': "fill"},
    {'if': "end"}
    ])

  Node.js:

  Copy to clipboard

  cloudinary.image("sample.jpg", {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]})

  Java:

  Copy to clipboard

  cloudinary.url().transformation(new Transformation()
    .if("ils_gt_0.5").chain()
    .height(150).width(120).crop("pad").chain()
    .if("else").chain()
    .height(150).width(120).crop("fill").chain()
    .if("end")).imageTag("sample.jpg");

  JS:

  Copy to clipboard

  cloudinary.imageTag('sample.jpg', {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]}).toHtml();

  jQuery:

  Copy to clipboard

  $.cloudinary.image("sample.jpg", {transformation: [
    {if: "ils_gt_0.5"},
    {height: 150, width: 120, crop: "pad"},
    {if: "else"},
    {height: 150, width: 120, crop: "fill"},
    {if: "end"}
    ]})

  React:

  Copy to clipboard

  <Image publicId="sample.jpg" >
    <Transformation if="ils_gt_0.5" />
    <Transformation height="150" width="120" crop="pad" />
    <Transformation if="else" />
    <Transformation height="150" width="120" crop="fill" />
    <Transformation if="end" />
  </Image>

  Vue.js:

  Copy to clipboard

  <cld-image publicId="sample.jpg" >
    <cld-transformation if="ils_gt_0.5" />
    <cld-transformation height="150" width="120" crop="pad" />
    <cld-transformation if="else" />
    <cld-transformation height="150" width="120" crop="fill" />
    <cld-transformation if="end" />
  </cld-image>

  Angular:

  Copy to clipboard

  <cl-image public-id="sample.jpg" >
    <cl-transformation if="ils_gt_0.5">
    </cl-transformation>
    <cl-transformation height="150" width="120" crop="pad">
    </cl-transformation>
    <cl-transformation if="else">
    </cl-transformation>
    <cl-transformation height="150" width="120" crop="fill">
    </cl-transformation>
    <cl-transformation if="end">
    </cl-transformation>
  </cl-image>

  .NET:

  Copy to clipboard

  cloudinary.Api.UrlImgUp.Transform(new Transformation()
    .If("ils_gt_0.5").Chain()
    .Height(150).Width(120).Crop("pad").Chain()
    .If("else").Chain()
    .Height(150).Width(120).Crop("fill").Chain()
    .If("end")).BuildImageTag("sample.jpg")

  iOS:

  Copy to clipboard

  imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
    .setIf("ils_gt_0.5").chain()
    .setHeight(150).setWidth(120).setCrop("pad").chain()
    .setIf("else").chain()
    .setHeight(150).setWidth(120).setCrop("fill").chain()
    .setIf("end")).generate("sample.jpg")!, cloudinary: cloudinary)

  Android:

  Copy to clipboard

  MediaManager.get().url().transformation(new Transformation()
    .if("ils_gt_0.5").chain()
    .height(150).width(120).crop("pad").chain()
    .if("else").chain()
    .height(150).width(120).crop("fill").chain()
    .if("end")).generate("sample.jpg");

  Kotlin:

  Copy to clipboard

  cloudinary.image {
  publicId("sample.jpg")
  conditional(Conditional.ifCondition("ils > 0.5", Transformation {
  resize(Resize.pad() {
  width(120)
  height(150)
  })
  }) {
  otherwise(Transformation {
  resize(Resize.fill() {
  width(120)
  height(150)
  })
  })
  })}.generate()

  
  
  

• Conditional resize based on a contextual metadata value This example resizes an image to a 200*200 square image (using g_auto cropping) if it has a contextual metadata key named 'productType' with the value 'shoes'.
  

  URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

  URL:

  Copy to clipboard

  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

  Ruby:

  Copy to clipboard

  cl_image_tag("sunset_shoes.jpg", :transformation=>[
    {:if=>"ctx:!productType!_eq_!shoes!"},
    {:aspect_ratio=>"1:1", :gravity=>"auto", :width=>200, :crop=>"fill"},
    {:if=>"end"}
    ])

  PHP v1:

  Copy to clipboard

  cl_image_tag("sunset_shoes.jpg", array("transformation"=>array(
    array("if"=>"ctx:!productType!_eq_!shoes!"),
    array("aspect_ratio"=>"1:1", "gravity"=>"auto", "width"=>200, "crop"=>"fill"),
    array("if"=>"end")
    )))

  PHP v2:

  Copy to clipboard

  (new ImageTag('sunset_shoes.jpg'))
    ->conditional(
        Conditional::ifCondition('ctx:!productType! = !shoes!', (new Transformation())
          ->resize(Resize::fill()->width(200)
            ->aspectRatio(AspectRatio::ar1X1())
            ->gravity(Gravity::autoGravity())
    )));

  Python:

  Copy to clipboard

  CloudinaryImage("sunset_shoes.jpg").image(transformation=[
    {'if': "ctx:!productType!_eq_!shoes!"},
    {'aspect_ratio': "1:1", 'gravity': "auto", 'width': 200, 'crop': "fill"},
    {'if': "end"}
    ])

  Node.js:

  Copy to clipboard

  cloudinary.image("sunset_shoes.jpg", {transformation: [
    {if: "ctx:!productType!_eq_!shoes!"},
    {aspect_ratio: "1:1", gravity: "auto", width: 200, crop: "fill"},
    {if: "end"}
    ]})

  Java:

  Copy to clipboard

  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");

  JS:

  Copy to clipboard

  cloudinary.imageTag('sunset_shoes.jpg', {transformation: [
    {if: "ctx:!productType!_eq_!shoes!"},
    {aspectRatio: "1:1", gravity: "auto", width: 200, crop: "fill"},
    {if: "end"}
    ]}).toHtml();

  jQuery:

  Copy to clipboard

  $.cloudinary.image("sunset_shoes.jpg", {transformation: [
    {if: "ctx:!productType!_eq_!shoes!"},
    {aspect_ratio: "1:1", gravity: "auto", width: 200, crop: "fill"},
    {if: "end"}
    ]})

  React:

  Copy to clipboard

  <Image publicId="sunset_shoes.jpg" >
    <Transformation if="ctx:!productType!_eq_!shoes!" />
    <Transformation aspectRatio="1:1" gravity="auto" width="200" crop="fill" />
    <Transformation if="end" />
  </Image>

  Vue.js:

  Copy to clipboard

  <cld-image publicId="sunset_shoes.jpg" >
    <cld-transformation if="ctx:!productType!_eq_!shoes!" />
    <cld-transformation aspectRatio="1:1" gravity="auto" width="200" crop="fill" />
    <cld-transformation if="end" />
  </cld-image>

  Angular:

  Copy to clipboard

  <cl-image public-id="sunset_shoes.jpg" >
    <cl-transformation if="ctx:!productType!_eq_!shoes!">
    </cl-transformation>
    <cl-transformation aspect-ratio="1:1" gravity="auto" width="200" crop="fill">
    </cl-transformation>
    <cl-transformation if="end">
    </cl-transformation>
  </cl-image>

  .NET:

  Copy to clipboard

  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")

  iOS:

  Copy to clipboard

  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:

  Copy to clipboard

  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");

  Kotlin:

  Copy to clipboard

  cloudinary.image {
  publicId("sunset_shoes.jpg")
  conditional(Conditional.ifCondition("ctx:!productType! = !shoes!", Transformation {
  resize(Resize.fill() {
  width(200)
  aspectRatio(AspectRatio.ar1X1())
  gravity(Gravity.autoGravity())
  })
  }))}.generate()

  

• 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:

  URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

  URL:

  Copy to clipboard

  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

  Ruby:

  Copy to clipboard

  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"}
    ])

  PHP v1:

  Copy to clipboard

  cl_image_tag("backpack.jpg", array("transformation"=>array(
    array("if"=>"!sale:in_stock!_in_tags"),
    array("overlay"=>"sale_icon"),
    array("width"=>180, "crop"=>"scale"),
    array("flags"=>"layer_apply", "gravity"=>"south_east", "x"=>30, "y"=>30),
    array("if"=>"end"),
    array("width"=>250, "crop"=>"scale")
    )))

  PHP v2:

  Copy to clipboard

  (new ImageTag('backpack.jpg'))
    ->conditional(
        Conditional::ifCondition('!sale:in_stock! in tags', (new Transformation())
          ->overlay(
              Overlay::source(Source::image('sale_icon')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::scale()->width(180))))
              ->position((new Position())
                ->gravity(Gravity::compass(Compass::southEast()))
                ->offsetX(30)->offsetY(30)))))
            ->resize(Resize::scale()->width(250));

  Python:

  Copy to clipboard

  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"}
    ])

  Node.js:

  Copy to clipboard

  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"}
    ]})

  Java:

  Copy to clipboard

  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");

  JS:

  Copy to clipboard

  cloudinary.imageTag('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"}
    ]}).toHtml();

  jQuery:

  Copy to clipboard

  $.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:

  Copy to clipboard

  <Image publicId="backpack.jpg" >
    <Transformation if="!sale:in_stock!_in_tags" />
    <Transformation overlay="sale_icon" />
    <Transformation width="180" crop="scale" />
    <Transformation flags="layer_apply" gravity="south_east" x="30" y="30" />
    <Transformation if="end" />
    <Transformation width="250" crop="scale" />
  </Image>

  Vue.js:

  Copy to clipboard

  <cld-image publicId="backpack.jpg" >
    <cld-transformation if="!sale:in_stock!_in_tags" />
    <cld-transformation :overlay="sale_icon" />
    <cld-transformation width="180" crop="scale" />
    <cld-transformation flags="layer_apply" gravity="south_east" x="30" y="30" />
    <cld-transformation if="end" />
    <cld-transformation width="250" crop="scale" />
  </cld-image>

  Angular:

  Copy to clipboard

  <cl-image public-id="backpack.jpg" >
    <cl-transformation if="!sale:in_stock!_in_tags">
    </cl-transformation>
    <cl-transformation overlay="sale_icon">
    </cl-transformation>
    <cl-transformation width="180" crop="scale">
    </cl-transformation>
    <cl-transformation flags="layer_apply" gravity="south_east" x="30" y="30">
    </cl-transformation>
    <cl-transformation if="end">
    </cl-transformation>
    <cl-transformation width="250" crop="scale">
    </cl-transformation>
  </cl-image>

  .NET:

  Copy to clipboard

  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")

  iOS:

  Copy to clipboard

  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:

  Copy to clipboard

  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");

  Kotlin:

  Copy to clipboard

  cloudinary.image {
  publicId("backpack.jpg")
  conditional(Conditional.ifCondition("!sale:in_stock! in tags", Transformation {
  overlay(Overlay.source(Source.image("sale_icon") {
  transformation(ImageTransformation {
  resize(Resize.scale() {
  width(180)
  })
  })
  }) {
  position(Position {
  gravity(Gravity.compass(Compass.southEast()))
  offsetX(30)
  offsetY(30)
  })
  })
  }))
  resize(Resize.scale() {
  width(250)
  })}.generate()