Recipes of the Text tag
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
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
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"} ])
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") )))
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"} ])
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"} ]})
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");
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();
$.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"} ]})
<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>
<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>
<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>
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")
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");
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)
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
Face detection
With initials
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") )))
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"} ])
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");
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();
$.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"} ]})
<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>
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")
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");
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)
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
,co_white,g_center,y_-189,x_1/w_250/scout-chrono.png "With Text")
Round Text
,co_white,e_distort:arc:60,g_center,y_-189,x_1/w_250/scout-chrono.png "Round Text")
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"} ])
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") )))
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"} ])
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"} ]})
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");
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();
$.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"} ]})
<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>
<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>
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")
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");
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)
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
,y_0.4,co_red/$title_ctx:!title!/l_text:arial_22_bold:$(title),y_0.28/courtfrasco.jpg "Overlaid")
Templatized
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} ])
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) )))
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} ])
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"} ]})
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");
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();
$.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"} ]})
<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>
<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>
<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>
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")
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");
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)
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
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
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
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
