Cloudinary Cookbook recipes about Text

Find recipes by 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

Text texture

Fetch + texture

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

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)

by Itay Taragano Jun 11, 2014

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

User's thumbnail

Avatar meter

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

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)

by Itay Taragano Jul 28, 2014

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

With Text

Round Text

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

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)

by Andrew Philips Jan 08, 2019

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

Overlaid

Templatized

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

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)

by Chris Zakharoff Jan 08, 2019

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

sky

sky

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

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)

by Aditi Aug 03, 2018

Tags:

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

Rotated

Adding text

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif

Ruby:

cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")

PHP:

cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))

Python:

CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")

Node.js:

cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");

JS:

cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

React:

<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>

Angular:

<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)

by Itay Taragano Aug 05, 2014

Tags:

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

South gravity

Custom position

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20/face_center.jpg

Ruby:

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:

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:

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:

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:

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:

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:

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

<Image publicId="face_center.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</Image>

Angular:

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

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:

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:

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 Jun 11, 2014

Tags:

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

Colored text

Pre-defined style

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_24_bold:Dynamic style/site_bg_bright_small.jpg

Ruby:

cl_image_tag("site_bg_bright_small.jpg", :overlay=>{:font_family=>"Arial", :font_size=>24, :font_weight=>"bold", :text=>"Dynamic%20style"})

PHP:

cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>24, "font_weight"=>"bold", "text"=>"Dynamic%20style")))

Python:

CloudinaryImage("site_bg_bright_small.jpg").image(overlay={'font_family': "Arial", 'font_size': 24, 'font_weight': "bold", 'text': "Dynamic%20style"})

Node.js:

cloudinary.image("site_bg_bright_small.jpg", {overlay: {font_family: "Arial", font_size: 24, font_weight: "bold", text: "Dynamic%20style"}})

Java:

cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style"))).imageTag("site_bg_bright_small.jpg");

JS:

cloudinary.imageTag('site_bg_bright_small.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style")}).toHtml();

jQuery:

$.cloudinary.image("site_bg_bright_small.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Dynamic%20style")})

React:

<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 24, fontWeight: "bold", text: "Dynamic%20style"}} />
</Image>

Angular:

<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Dynamic%20style">
  </cl-transformation>
</cl-image>

.Net:

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:

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:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 15, 2014

Tags: