Cloudinary cookbook background

Cloudinary Cookbook

Most popular cookbook recipes

Find recipes by tags:
View all tags

Create your own Duotone filter

A cool new design trend popularized by Spotify is Duotone imagery. There’s a good post on the Shopify blog covering this and some other trends so you can read that there if curious (4 Trendy Visual Design Trends - Shopify Blog). In the spirit of Cloudinary Cookbooks, we’re going to get right down to business.

Original

Original

Duotone Red

Duotone Red

Blue/Yellow

Blue/Yellow
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/e_grayscale/e_tint:50:red/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:50:red"}
  ])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:50:red")
  )))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {'quality': "auto"},
  {'effect': "grayscale"},
  {'effect': "tint:50:red"}
  ])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:50:red" />
</Image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation effect="tint:50:red">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
Read more
by Robert Moseley
Tags:

Custom shapes cropping

You can crop an image based on any custom shape. Do this by having your own custom image as a mask for cropping, setting the overlay parameter as your mask image's public ID and setting the flags parameter to cutter (in URLs: l_<mask_image>,fl_cutter).

Original

Original

Custom shaped

Custom shaped

Semi-transparency

Semi-transparency
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_173,h_200,c_fill/l_hexagon_sample,fl_cutter/pasta.png
Ruby:
cl_image_tag("pasta.png", :transformation=>[
  {:width=>173, :height=>200, :crop=>"fill"},
  {:overlay=>"hexagon_sample", :flags=>"cutter"}
  ])
PHP:
cl_image_tag("pasta.png", array("transformation"=>array(
  array("width"=>173, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"hexagon_sample", "flags"=>"cutter")
  )))
Python:
CloudinaryImage("pasta.png").image(transformation=[
  {'width': 173, 'height': 200, 'crop': "fill"},
  {'overlay': "hexagon_sample", 'flags': "cutter"}
  ])
Node.js:
cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("hexagon_sample")).flags("cutter")).imageTag("pasta.png");
JS:
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]})
React:
<Image publicId="pasta.png" >
  <Transformation width="173" height="200" crop="fill" />
  <Transformation overlay="hexagon_sample" flags="cutter" />
</Image>
Angular:
<cl-image public-id="pasta.png" >
  <cl-transformation width="173" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="hexagon_sample" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("hexagon_sample")).Flags("cutter")).BuildImageTag("pasta.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("hexagon_sample")).flags("cutter")).generate("pasta.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(173).setHeight(200).setCrop("fill").chain()
  .setOverlay("hexagon_sample").setFlags("cutter")).generate("pasta.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Use images as text textures

Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).

Original image

Original image

Text texture

Text texture

Fetch + texture

Fetch + texture
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Coustard_200_bold:Flowers,fl_cutter/yellow_tulip.png
Ruby:
cl_image_tag("yellow_tulip.png", :overlay=>{:font_family=>"Coustard", :font_size=>200, :font_weight=>"bold", :text=>"Flowers"}, :flags=>"cutter")
PHP:
cl_image_tag("yellow_tulip.png", array("overlay"=>array("font_family"=>"Coustard", "font_size"=>200, "font_weight"=>"bold", "text"=>"Flowers"), "flags"=>"cutter"))
Python:
CloudinaryImage("yellow_tulip.png").image(overlay={'font_family': "Coustard", 'font_size': 200, 'font_weight': "bold", 'text': "Flowers"}, flags="cutter")
Node.js:
cloudinary.image("yellow_tulip.png", {overlay: {font_family: "Coustard", font_size: 200, font_weight: "bold", text: "Flowers"}, flags: "cutter"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).imageTag("yellow_tulip.png");
JS:
cloudinary.imageTag('yellow_tulip.png', {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"}).toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.png", {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"})
React:
<Image publicId="yellow_tulip.png" >
  <Transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Coustard").FontSize(200).FontWeight("bold").Text("Flowers")).Flags("cutter")).BuildImageTag("yellow_tulip.png")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).generate("yellow_tulip.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Coustard_200_bold:Flowers").setFlags("cutter")).generate("yellow_tulip.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Generate a profile completeness meter

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

Badge meter

Badge meter

User's thumbnail

User's thumbnail

Avatar meter

Avatar meter
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/e_colorize,co_white/b_rgb:D0CDCD/l_avatar,e_trim,w_1.0,h_0.6,c_crop,g_south/fl_layer_apply,g_south/l_text:Playball_40:60%25,co_white,y_80/w_200,c_scale/avatar.jpg
Ruby:
cl_image_tag("avatar.jpg", :transformation=>[
  {:effect=>"trim"},
  {:effect=>"colorize", :color=>"white"},
  {:background=>"#D0CDCD"},
  {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"},
  {:flags=>"layer_apply", :gravity=>"south"},
  {:overlay=>{:font_family=>"Playball", :font_size=>40, :text=>"60%2525"}, :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])
PHP:
cl_image_tag("avatar.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("effect"=>"colorize", "color"=>"white"),
  array("background"=>"#D0CDCD"),
  array("overlay"=>"avatar", "effect"=>"trim", "width"=>1.0, "height"=>0.6, "gravity"=>"south", "crop"=>"crop"),
  array("flags"=>"layer_apply", "gravity"=>"south"),
  array("overlay"=>array("font_family"=>"Playball", "font_size"=>40, "text"=>"60%2525"), "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))
Python:
CloudinaryImage("avatar.jpg").image(transformation=[
  {'effect': "trim"},
  {'effect': "colorize", 'color': "white"},
  {'background': "#D0CDCD"},
  {'overlay': "avatar", 'effect': "trim", 'width': 1.0, 'height': 0.6, 'gravity': "south", 'crop': "crop"},
  {'flags': "layer_apply", 'gravity': "south"},
  {'overlay': {'font_family': "Playball", 'font_size': 40, 'text': "60%2525"}, 'color': "white", 'y': 80},
  {'width': 200, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: {font_family: "Playball", font_size: 40, text: "60%2525"}, color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg");
JS:
cloudinary.imageTag('avatar.jpg', {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
React:
<Image publicId="avatar.jpg" >
  <Transformation effect="trim" />
  <Transformation effect="colorize" color="white" />
  <Transformation background="#D0CDCD" />
  <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <Transformation flags="layer_apply" gravity="south" />
  <Transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>
Angular:
<cl-image public-id="avatar.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation effect="colorize" color="white">
  </cl-transformation>
  <cl-transformation background="#D0CDCD">
  </cl-transformation>
  <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south">
  </cl-transformation>
  <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Effect("colorize").Color("white").Chain()
  .Background("#D0CDCD").Chain()
  .Overlay(new Layer().PublicId("avatar")).Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay(new TextLayer().FontFamily("Playball").FontSize(40).Text("60%2525")).Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("trim").chain()
  .setEffect("colorize").setColor("white").chain()
  .setBackground("#D0CDCD").chain()
  .setOverlay("avatar").setEffect("trim").setWidth(1.0).setHeight(0.6).setGravity("south").setCrop("crop").chain()
  .setFlags("layer_apply").setGravity("south").chain()
  .setOverlay("text:Playball_40:60%2525").setColor("white").setY(80).chain()
  .setWidth(200).setCrop("scale")).generate("avatar.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Using content aware padding

There are many cases where you need to adjust the background of your images.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_800,h_400,c_pad,b_green/waterfall.jpg
Ruby:
cl_image_tag("waterfall.jpg", :width=>800, :height=>400, :background=>"green", :crop=>"pad")
PHP:
cl_image_tag("waterfall.jpg", array("width"=>800, "height"=>400, "background"=>"green", "crop"=>"pad"))
Python:
CloudinaryImage("waterfall.jpg").image(width=800, height=400, background="green", crop="pad")
Node.js:
cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).imageTag("waterfall.jpg");
JS:
cloudinary.imageTag('waterfall.jpg', {width: 800, height: 400, background: "green", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("waterfall.jpg", {width: 800, height: 400, background: "green", crop: "pad"})
React:
<Image publicId="waterfall.jpg" >
  <Transformation width="800" height="400" background="green" crop="pad" />
</Image>
Angular:
<cl-image public-id="waterfall.jpg" >
  <cl-transformation width="800" height="400" background="green" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(800).Height(400).Background("green").Crop("pad")).BuildImageTag("waterfall.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(800).height(400).background("green").crop("pad")).generate("waterfall.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(800).setHeight(400).setBackground("green").setCrop("pad")).generate("waterfall.jpg")!, cloudinary: cloudinary)
Read more
by ido
Tags:

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

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

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/$text_!Sample Text!/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_white,g_center,y_-189,x_1/w_250/scout-chrono.png
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Andrew Philips
Tags:

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/celenarae.mp4
Ruby:
cl_video_tag("celenarae")
PHP:
cl_video_tag("celenarae")
Python:
CloudinaryVideo("celenarae").video()
Node.js:
cloudinary.video("celenarae")
Java:
cloudinary.url().videoTag("celenarae");
JS:
cloudinary.videoTag('celenarae').toHtml();
jQuery:
$.cloudinary.video("celenarae")
React:
<Video publicId="celenarae" >

</Video>
Angular:
<cl-video public-id="celenarae" >

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

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_200/$offer_ctx:!offer!/l_text:arial_20:$(offer),y_0.4,co_red/$title_ctx:!title!/l_text:arial_22_bold:$(title),y_0.28/courtfrasco.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Chris Zakharoff
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Arial_100:Weather/photo-1430609098125-581618d0482f_xvayby
Ruby:
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Weather"})
PHP:
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Weather")))
Python:
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(overlay={'font_family': "Arial", 'font_size': 100, 'text': "Weather"})
Node.js:
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: {font_family: "Arial", font_size: 100, text: "Weather"}})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")}).toHtml();
jQuery:
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")})
React:
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</Image>
Angular:
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100:Weather">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Weather"))).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_100:Weather")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
Read more
by Aditi
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/c_lpad,w_iw,h_ih/bo_4px_solid_green/nice_bird.jpg
Ruby:
cl_image_tag("nice_bird.jpg", :transformation=>[
  {:effect=>"trim"},
  {:width=>"iw", :height=>"ih", :crop=>"lpad"},
  {:border=>"4px_solid_green"}
  ])
PHP:
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:
CloudinaryImage("nice_bird.jpg").image(transformation=[
  {'effect': "trim"},
  {'width': "iw", 'height': "ih", 'crop': "lpad"},
  {'border': "4px_solid_green"}
  ])
Node.js:
cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
cloudinary.imageTag('nice_bird.jpg', {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
React:
<Image publicId="nice_bird.jpg" >
  <Transformation effect="trim" />
  <Transformation width="iw" height="ih" crop="lpad" />
  <Transformation border="4px_solid_green" />
</Image>
Angular:
<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:
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:
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:
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)
Read more
by Roee Ben Ari
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_ring2,r_max,w_200,h_200/e_cut_out,fl_layer_apply/night_sky.jpg
Ruby:
cl_image_tag("night_sky.jpg", :transformation=>[
  {:overlay=>"ring2", :radius=>"max", :width=>200, :height=>200},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
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:
CloudinaryImage("night_sky.jpg").image(transformation=[
  {'overlay': "ring2", 'radius': "max", 'width': 200, 'height': 200},
  {'effect': "cut_out", 'flags': "layer_apply"}
  ])
Node.js:
cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
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:
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:
$.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:
<Image publicId="night_sky.jpg" >
  <Transformation overlay="ring2" radius="max" width="200" height="200" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Angular:
<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:
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:
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:
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)
Read more
by Daniel Mendoza
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/e_sepia/mac-bubbles.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
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

Read more
by Josh Slivken
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/fetch/e_pixelate/http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_colorize,co_purple/smartphone.png
Ruby:
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png");
JS:
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>
Angular:
<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/a_90/sea_shell.jpg
Ruby:
cl_image_tag("sea_shell.jpg", :angle=>90)
PHP:
cl_image_tag("sea_shell.jpg", array("angle"=>90))
Python:
CloudinaryImage("sea_shell.jpg").image(angle=90)
Node.js:
cloudinary.image("sea_shell.jpg", {angle: 90})
Java:
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg");
JS:
cloudinary.imageTag('sea_shell.jpg', {angle: 90}).toHtml();
jQuery:
$.cloudinary.image("sea_shell.jpg", {angle: 90})
React:
<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>
Angular:
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sea_shell.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/black_bar.png
Ruby:
cl_image_tag("black_bar.png")
PHP:
cl_image_tag("black_bar.png")
Python:
CloudinaryImage("black_bar.png").image()
Node.js:
cloudinary.image("black_bar.png")
Java:
cloudinary.url().imageTag("black_bar.png");
JS:
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
$.cloudinary.image("black_bar.png")
React:
<Image publicId="black_bar.png" >

</Image>
Angular:
<cl-image public-id="black_bar.png" >

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

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/o_50/sheep.jpg
Ruby:
cl_image_tag("sheep.jpg", :opacity=>50)
PHP:
cl_image_tag("sheep.jpg", array("opacity"=>50))
Python:
CloudinaryImage("sheep.jpg").image(opacity=50)
Node.js:
cloudinary.image("sheep.jpg", {opacity: 50})
Java:
cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");
JS:
cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();
jQuery:
$.cloudinary.image("sheep.jpg", {opacity: 50})
React:
<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>
Angular:
<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/fetch/l_badge,g_faces,w_30/http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Itay Taragano
Tags:
More recipes