Automatically Flip Videos

Rotating and flipping videos on Cloudinary is a cakewalk. To rotate a video to an angle you desire, set the angle parameter. To mirror a video and vertically or horizontally flip it, set vflip or hflip as the angle value. Examples:

Dog Video

Angled Dog Video

Rotate Text and Overlay on Dog Video

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:angle=>"vflip"},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>"vflip"),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'angle': "vflip"},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation angle="vflip" />
  <Transformation width="500" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation angle="vflip" />
  <cld-transformation width="500" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation angle="vflip">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle("vflip").Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAngle("vflip").chain()
  .setWidth(500).setCrop("scale")).generate("dog.mp4")
by Hadar Bejerano

Leveraging the Image-Overlay Effect for Preview of Customized Engravings

To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results—for free.

Original

Original

With Text

With Text

Round Text

Round Text
Ruby:
Copy to clipboard
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :gravity=>"center", :y=>-189, :x=>1},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "gravity"=>"center", "y"=>-189, "x"=>1),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'gravity': "center", 'y': -189, 'x': 1},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
Copy to clipboard
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" />
  <Transformation width="250" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" gravity="center" y="-189" x="1">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Gravity("center").Y(-189).X(1).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setGravity("center").setY(-189).setX(1).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
by Andrew Philips

Adding Video Watermark as an Overlay

Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps. The sections below describe the various scenarios along with examples.

Original video

Overlay image watermark

Watermark coordinates

Ruby:
Copy to clipboard
cl_video_tag("celenarae")
PHP:
Copy to clipboard
cl_video_tag("celenarae")
Python:
Copy to clipboard
CloudinaryVideo("celenarae").video()
Node.js:
Copy to clipboard
cloudinary.video("celenarae")
Java:
Copy to clipboard
cloudinary.url().videoTag("celenarae");
JS:
Copy to clipboard
cloudinary.videoTag('celenarae').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("celenarae")
React:
Copy to clipboard
<Video publicId="celenarae" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="celenarae" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="celenarae" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("celenarae")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("celenarae.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("celenarae.mp4")
by George Bontea

Render image context metadata in text overlays

Do you know that, with Cloudinary, you can access and dynamically render the context metadata stored centric to an image into a text overlay in real time? You can then can quickly output product information directly on an image to support merchandising efforts.

Original

Original

Overlaid

Overlaid

Templatized

Templatized
Ruby:
Copy to clipboard
cl_image_tag("courtfrasco.jpg", :variables=>[["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], :transformation=>[
  {:width=>200, :crop=>"scale"},
  {:overlay=>{:font_family=>"arial", :font_size=>20, :text=>"%24%28offer%29"}, :y=>0.4, :color=>"red"},
  {:overlay=>{:font_family=>"arial", :font_size=>22, :font_weight=>"bold", :text=>"%24%28title%29"}, :y=>0.28}
  ])
PHP:
Copy to clipboard
cl_image_tag("courtfrasco.jpg", array("variables"=>array("$offer"=>"ctx:!offer!", "$title"=>"ctx:!title!"), "transformation"=>array(
  array("width"=>200, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>20, "text"=>"%24%28offer%29"), "y"=>0.4, "color"=>"red"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>22, "font_weight"=>"bold", "text"=>"%24%28title%29"), "y"=>0.28)
  )))
Python:
Copy to clipboard
CloudinaryImage("courtfrasco.jpg").image(variables={"$offer": "ctx:!offer!", "$title": "ctx:!title!"}, transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': {'font_family': "arial", 'font_size': 20, 'text': "%24%28offer%29"}, 'y': 0.4, 'color': "red"},
  {'overlay': {'font_family': "arial", 'font_size': 22, 'font_weight': "bold", 'text': "%24%28title%29"}, 'y': 0.28}
  ])
Node.js:
Copy to clipboard
cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: {font_family: "arial", font_size: 20, text: "%24%28offer%29"}, y: "0.4", color: "red"},
  {overlay: {font_family: "arial", font_size: 22, font_weight: "bold", text: "%24%28title%29"}, y: "0.28"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain()
  .width(200).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).imageTag("courtfrasco.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('courtfrasco.jpg', {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"}
  ]})
React:
Copy to clipboard
<Image publicId="courtfrasco.jpg" >
  <Transformation width="200" crop="scale" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 20, text: "%24%28offer%29"}} y="0.4" color="red" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 22, fontWeight: "bold", text: "%24%28title%29"}} y="0.28" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="courtfrasco.jpg" >
  <cld-transformation width="200" crop="scale" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 20, text: "%24%28offer%29"}} y="0.4" color="red" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 22, fontWeight: "bold", text: "%24%28title%29"}} y="0.28" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="courtfrasco.jpg" >
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:arial_20:%24%28offer%29" y="0.4" color="red">
  </cl-transformation>
  <cl-transformation overlay="text:arial_22_bold:%24%28title%29" y="0.28">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(20).Text("%24%28offer%29")).Y(0.4).Color("red").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(22).FontWeight("bold").Text("%24%28title%29")).Y(0.28)).BuildImageTag("courtfrasco.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain()
  .width(200).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).generate("courtfrasco.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("text:arial_20:%24%28offer%29").setY(0.4).setColor("red").chain()
  .setOverlay("text:arial_22_bold:%24%28title%29").setY(0.28)).generate("courtfrasco.jpg")!, cloudinary: cloudinary)
by Chris Zakharoff

Text overlays flowing together irrespective of text size

You can add text dynamically to the image by using overlays with syntax l_ in the URL. Here's an example of a URL with on-the-fly generated text transformation: Dynamic style

Dynamic style

Dynamic style

sky

sky

sky

sky
Ruby:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Weather"})
PHP:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Weather")))
Python:
Copy to clipboard
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(overlay={'font_family': "Arial", 'font_size': 100, 'text': "Weather"})
Node.js:
Copy to clipboard
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: {font_family: "Arial", font_size: 100, text: "Weather"}})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
Copy to clipboard
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")})
React:
Copy to clipboard
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100:Weather">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Weather"))).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_100:Weather")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
by Aditi

Center objects using trim

Center an object within an image with a solid background. Do this by first trimming the background around the object (e_trim) and then pad (c_lpad) and resize the canvas to the image's initial width (w_iw) and height (h_ih).

Original

Original
Ruby:
Copy to clipboard
cl_image_tag("nice_bird.jpg", :transformation=>[
  {:effect=>"trim"},
  {:width=>"iw", :height=>"ih", :crop=>"lpad"},
  {:border=>"4px_solid_green"}
  ])
PHP:
Copy to clipboard
cl_image_tag("nice_bird.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("width"=>"iw", "height"=>"ih", "crop"=>"lpad"),
  array("border"=>"4px_solid_green")
  )))
Python:
Copy to clipboard
CloudinaryImage("nice_bird.jpg").image(transformation=[
  {'effect': "trim"},
  {'width': "iw", 'height': "ih", 'crop': "lpad"},
  {'border': "4px_solid_green"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('nice_bird.jpg', {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
React:
Copy to clipboard
<Image publicId="nice_bird.jpg" >
  <Transformation effect="trim" />
  <Transformation width="iw" height="ih" crop="lpad" />
  <Transformation border="4px_solid_green" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="nice_bird.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation width="iw" height="ih" crop="lpad" />
  <cld-transformation border="4px_solid_green" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="nice_bird.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation width="iw" height="ih" crop="lpad">
  </cl-transformation>
  <cl-transformation border="4px_solid_green">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Width("iw").Height("ih").Crop("lpad").Chain()
  .Border("4px_solid_green")).BuildImageTag("nice_bird.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).generate("nice_bird.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("trim").chain()
  .setWidth("iw").setHeight("ih").setCrop("lpad").chain()
  .setBorder("4px_solid_green")).generate("nice_bird.jpg")!, cloudinary: cloudinary)
by Roee Ben Ari

Custom shapes cut out

Cut out any shape from an image. Do this by having your own custom image as the mask for the cutout by setting overlay parameter as your mask image's public ID and chaining a transformation with effect parameter as cut_out and flags parameter as layer_apply (l_<public_id>/e_cut_out,fl_layer_apply in URLs).

Original

Original

Custom cut out

Custom cut out

Semi-transparency

Semi-transparency
Ruby:
Copy to clipboard
cl_image_tag("night_sky.jpg", :transformation=>[
  {:overlay=>"ring2", :radius=>"max", :width=>200, :height=>200},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
Copy to clipboard
cl_image_tag("night_sky.jpg", array("transformation"=>array(
  array("overlay"=>"ring2", "radius"=>"max", "width"=>200, "height"=>200),
  array("effect"=>"cut_out", "flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryImage("night_sky.jpg").image(transformation=[
  {'overlay': "ring2", 'radius': "max", 'width': 200, 'height': 200},
  {'effect': "cut_out", 'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("ring2")).radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).imageTag("night_sky.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('night_sky.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("ring2"), radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("ring2"), radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Image publicId="night_sky.jpg" >
  <Transformation overlay="ring2" radius="max" width="200" height="200" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="night_sky.jpg" >
  <cld-transformation overlay="ring2" radius="max" width="200" height="200" />
  <cld-transformation effect="cut_out" flags="layer_apply" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="night_sky.jpg" >
  <cl-transformation overlay="ring2" radius="max" width="200" height="200">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("ring2")).Radius("max").Width(200).Height(200).Chain()
  .Effect("cut_out").Flags("layer_apply")).BuildImageTag("night_sky.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("ring2")).radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).generate("night_sky.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("ring2").setRadius("max").setWidth(200).setHeight(200).chain()
  .setEffect("cut_out").setFlags("layer_apply")).generate("night_sky.jpg")!, cloudinary: cloudinary)
by Daniel Mendoza

Turn your pictures in to old photographs

You don't have to wait to go to a theme park to take an old-timey photograph with your family. Instead, you can use Cloudinary to quickly and easily create this effect on any of your current images.

Old timey photograph

Old timey photograph

Baby with bubbles picture

Baby with bubbles picture

Old piece of parchment

Old piece of parchment
Ruby:
Copy to clipboard
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40},
  {:effect=>"sepia"}
  ])
PHP:
Copy to clipboard
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40),
  array("effect"=>"sepia")
  )))
Python:
Copy to clipboard
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40},
  {'effect': "sepia"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).imageTag("mac-bubbles.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
React:
Copy to clipboard
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <Transformation effect="sepia" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <cld-transformation effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Effect("sepia")).BuildImageTag("mac-bubbles.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).generate("mac-bubbles.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain()
  .setEffect("sepia")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
by Josh Slivken
Tags:

Generating Video Preview Clips

Creating a dynamic and engaging animated video preview (as opposed to a static image) can have a lot of benefits:

  • Improves the ability to captures a user’s attention for the content
  • More clearly demonstrates that there is video content available
  • Provides several preview clips, allowing the user to decide if the video is relevant pre-click

Original

by Josh Slivken

Pixelate an image or a region

Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.

Original

Original

Pixeling an image

Pixeling an image

Pixeling a region

Pixeling a region
Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Color a picture

Color an image to any other color simply by setting the effect parameter to colorize (e_colorize in URLs), then set the color you want as the value of the color parameter (co in URLs). The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).

Original

Original

Solid colorizing

Solid colorizing

Custom intensity

Custom intensity
Ruby:
Copy to clipboard
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
Copy to clipboard
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
Copy to clipboard
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
Copy to clipboard
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png");
JS:
Copy to clipboard
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
Copy to clipboard
<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="smartphone.png" >
  <cld-transformation effect="colorize" color="purple" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
by Itay Taragano

Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.

Original

Original

Rotated 90°

Rotated 90°

Rotated overlay

Rotated overlay
Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :angle=>90)
PHP:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("angle"=>90))
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(angle=90)
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {angle: 90})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {angle: 90}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {angle: 90})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation angle="90" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Relative size overlays

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Main image

Main image

100% width-related

100% width-related

Including text

Including text
Ruby:
Copy to clipboard
cl_image_tag("black_bar.png")
PHP:
Copy to clipboard
cl_image_tag("black_bar.png")
Python:
Copy to clipboard
CloudinaryImage("black_bar.png").image()
Node.js:
Copy to clipboard
cloudinary.image("black_bar.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("black_bar.png");
JS:
Copy to clipboard
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("black_bar.png")
React:
Copy to clipboard
<Image publicId="black_bar.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="black_bar.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("black_bar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)
by Itay Taragano

Change image opacity

Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.

Original

Original

50% opacity

50% opacity

Flashlight effect

Flashlight effect
Ruby:
Copy to clipboard
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
Copy to clipboard
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
Copy to clipboard
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
Copy to clipboard
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
Copy to clipboard
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sheep.jpg" >
  <cld-transformation opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Overlay an image over detected faces

Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).

Original

Original

Faces overlay

Faces overlay

Funny overlay

Funny overlay
Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", :overlay=>"badge", :gravity=>"faces", :width=>30, :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", array("overlay"=>"badge", "gravity"=>"faces", "width"=>30, "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg").image(overlay="badge", gravity="faces", width=30, type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg', {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: new cloudinary.Layer().publicId("badge"), gravity: "faces", width: 30, type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <Transformation overlay="badge" gravity="faces" width="30" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cld-transformation overlay="badge" gravity="faces" width="30" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cl-transformation overlay="badge" gravity="faces" width="30">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("badge")).Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("badge")).gravity("faces").width(30)).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setOverlay("badge").setGravity("faces").setWidth(30)).generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Blur or pixelate faces

Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces. This is done by setting the effect parameter to either blur_faces or pixelate_faces (e_blur_faces or e_pixelate_faces in URLs). The level of blurring and the size of the pixel squares can customized.

Original

Original

Blur faces

Blur faces

Pixelate faces

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

Add a border to images

Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

Original

Original

Bordered

Bordered

Colored circle

Colored circle
Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation border="2px_solid_black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Original

Original

Trimmed

Trimmed

Custom level

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

Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.

Original

Original

Default level

Default level

Custom level

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

Increase fill light of photos

Fill your images with a lighting effect. This is very handy when dealing with darker images. How? Set the effect parameter to fill_light (e_fill_light in URLs). You can control the fill light level, the range is between -100 and 100. The default value is 0.

Original

Original

Default level

Default level

Custom level

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