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
Ruby:
Copy to clipboard
cl_image_tag("yellow_tulip.png", :overlay=>{:font_family=>"Coustard", :font_size=>200, :font_weight=>"bold", :text=>"Flowers"}, :flags=>"cutter")
PHP:
Copy to clipboard
cl_image_tag("yellow_tulip.png", array("overlay"=>array("font_family"=>"Coustard", "font_size"=>200, "font_weight"=>"bold", "text"=>"Flowers"), "flags"=>"cutter"))
Python:
Copy to clipboard
CloudinaryImage("yellow_tulip.png").image(overlay={'font_family': "Coustard", 'font_size': 200, 'font_weight': "bold", 'text': "Flowers"}, flags="cutter")
Node.js:
Copy to clipboard
cloudinary.image("yellow_tulip.png", {overlay: {font_family: "Coustard", font_size: 200, font_weight: "bold", text: "Flowers"}, flags: "cutter"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).imageTag("yellow_tulip.png");
JS:
Copy to clipboard
cloudinary.imageTag('yellow_tulip.png', {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("yellow_tulip.png", {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"})
React:
Copy to clipboard
<Image publicId="yellow_tulip.png" >
  <Transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="yellow_tulip.png" >
  <cld-transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Coustard").FontSize(200).FontWeight("bold").Text("Flowers")).Flags("cutter")).BuildImageTag("yellow_tulip.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).generate("yellow_tulip.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Coustard_200_bold:Flowers").setFlags("cutter")).generate("yellow_tulip.png")!, cloudinary: cloudinary)
by Itay Taragano

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
Ruby:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="avatar.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation effect="colorize" color="white" />
  <cld-transformation background="#D0CDCD" />
  <cld-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <cld-transformation flags="layer_apply" gravity="south" />
  <cld-transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <cld-transformation width="200" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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)
by Itay Taragano

Rounded profile picture with initials

Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.

Original

Original

Face detection

Face detection

With initials

With initials
Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>{:font_family=>"Arial", :font_size=>50, :font_weight=>"bold", :text=>"DB"}, :color=>"white"}
  ])
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white")
  )))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"},
  {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: {font_family: "Arial", font_size: 50, font_weight: "bold", text: "DB"}, color: "white"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_50_bold:DB" color="white">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation()
  .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain()
  .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)
by Itay Taragano

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

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

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Original

Rotated

Rotated

Adding text

Adding text
Ruby:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
Copy to clipboard
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
by Itay Taragano

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

Default - center

South gravity

South gravity

Custom position

Custom position
Ruby:
Copy to clipboard
cl_image_tag("face_center.jpg", :overlay=>{:font_family=>"Arial", :font_size=>45, :font_weight=>"bold", :text=>"Hello%20World"}, :gravity=>"north_west", :x=>20, :y=>20)
PHP:
Copy to clipboard
cl_image_tag("face_center.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>45, "font_weight"=>"bold", "text"=>"Hello%20World"), "gravity"=>"north_west", "x"=>20, "y"=>20))
Python:
Copy to clipboard
CloudinaryImage("face_center.jpg").image(overlay={'font_family': "Arial", 'font_size': 45, 'font_weight': "bold", 'text': "Hello%20World"}, gravity="north_west", x=20, y=20)
Node.js:
Copy to clipboard
cloudinary.image("face_center.jpg", {overlay: {font_family: "Arial", font_size: 45, font_weight: "bold", text: "Hello%20World"}, gravity: "north_west", x: 20, y: 20})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).imageTag("face_center.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_center.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_center.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20})
React:
Copy to clipboard
<Image publicId="face_center.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_center.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(45).FontWeight("bold").Text("Hello%20World")).Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).generate("face_center.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45_bold:Hello%20World").setGravity("north_west").setX(20).setY(20)).generate("face_center.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Add a text to an image

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font. Embed the text by setting the overlay parameter (l in URLs) to text<text_params>.

Dynamic style

Dynamic style

Colored text

Colored text

Pre-defined style

Pre-defined style
Ruby:
Copy to clipboard
cl_image_tag("site_bg_bright_small.jpg", :overlay=>{:font_family=>"Arial", :font_size=>24, :font_weight=>"bold", :text=>"Dynamic%20style"})
PHP:
Copy to clipboard
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>24, "font_weight"=>"bold", "text"=>"Dynamic%20style")))
Python:
Copy to clipboard
CloudinaryImage("site_bg_bright_small.jpg").image(overlay={'font_family': "Arial", 'font_size': 24, 'font_weight': "bold", 'text': "Dynamic%20style"})
Node.js:
Copy to clipboard
cloudinary.image("site_bg_bright_small.jpg", {overlay: {font_family: "Arial", font_size: 24, font_weight: "bold", text: "Dynamic%20style"}})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style"))).imageTag("site_bg_bright_small.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('site_bg_bright_small.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style")})
React:
Copy to clipboard
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 24, fontWeight: "bold", text: "Dynamic%20style"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="site_bg_bright_small.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 24, fontWeight: "bold", text: "Dynamic%20style"}} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Dynamic%20style">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(24).FontWeight("bold").Text("Dynamic%20style"))).BuildImageTag("site_bg_bright_small.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style"))).generate("site_bg_bright_small.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)
by Itay Taragano