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

Cloudinary can generate an image from a text string. This is done dynamically on-the-fly in the cloud. You can either dynamically generate the text style, or define and name a text style in advance and use it later in your transformations.

Here's an original image example:

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

URL:

https://res.cloudinary.com/demo/image/upload/site_bg_bright_small.jpg

Ruby:

cl_image_tag("site_bg_bright_small.jpg")

PHP:

cl_image_tag("site_bg_bright_small.jpg")

Python:

CloudinaryImage("site_bg_bright_small.jpg").image()

Node.js:

cloudinary.image("site_bg_bright_small.jpg")

Java:

cloudinary.url().imageTag("site_bg_bright_small.jpg");

JS:

cloudinary.imageTag('site_bg_bright_small.jpg').toHtml();

jQuery:

$.cloudinary.image("site_bg_bright_small.jpg")

React:

<Image publicId="site_bg_bright_small.jpg" >

</Image>

Vue.js:

<cld-image publicId="site_bg_bright_small.jpg" >

</cld-image>

Angular:

<cl-image public-id="site_bg_bright_small.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("site_bg_bright_small.jpg")

Android:

MediaManager.get().url().generate("site_bg_bright_small.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)

Dynamically generate a text style:

You can generate a text style dynamically, setting its font family, size, decoration and weight.

Here's an example of a URL with an on-the-fly generated text style:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js 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>

Vue.js:

<cld-image publicId="site_bg_bright_small.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 24, fontWeight: "bold", text: "Dynamic%20style"}} />
</cld-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)

You can also set the color parameter (co in URLs) to dynamically color the font to any required color:

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

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_24_bold:Colored text,co_rgb:B90FAE/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=>"Colored%20text"}, :color=>"#B90FAE")

PHP:

cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>24, "font_weight"=>"bold", "text"=>"Colored%20text"), "color"=>"#B90FAE"))

Python:

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

Node.js:

cloudinary.image("site_bg_bright_small.jpg", {overlay: {font_family: "Arial", font_size: 24, font_weight: "bold", text: "Colored%20text"}, color: "#B90FAE"})

Java:

cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Colored%20text")).color("#B90FAE")).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("Colored%20text"), color: "#B90FAE"}).toHtml();

jQuery:

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

React:

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

Vue.js:

<cld-image publicId="site_bg_bright_small.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 24, fontWeight: "bold", text: "Colored%20text"}} color="#B90FAE" />
</cld-image>

Angular:

<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Colored%20text" color="#B90FAE">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(24).FontWeight("bold").Text("Colored%20text")).Color("#B90FAE")).BuildImageTag("site_bg_bright_small.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(24).fontWeight("bold").text("Colored%20text")).color("#B90FAE")).generate("site_bg_bright_small.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_24_bold:Colored%20text").setColor("#B90FAE")).generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)

Pre-defining a text style:

You can generate a text style in advance, give it a nice, SEO friendly name, and re-use it for your future transformations. When generating a text style, in additional to its basic settings (font family, size, decoration and weight), you can also specify many additional parameters.
Text styles can be easily generated via the API with our integration libraries. For example:

Ruby PHP Python Node.js Java .Net All

Ruby:

Cloudinary::Uploader.text("Sample Name",
                          :public_id => "dark_name",
                          :font_family => "Arial", :font_size => 12,
                          :font_color => 'black', :opacity => 90)

PHP:

\Cloudinary\Uploader::text("Sample Name",
                          array(
                           "public_id" => "dark_name",
                           "font_family" => "Arial", "font_size" => 12,
                           "font_color" => "black", "opacity" => 90));

Python:

cloudinary.uploader.text("Sample Name",
                         public_id = 'dark_name',
                         font_family = 'Arial', font_size = 12,
                         font_color = 'black', opacity = 90)

Node.js:

cloudinary.uploader.text("Sample Name", function(result) { console.log(result) },
                          {
                            public_id: "dark_name",
                            font_family: "Arial", font_size: 12,
                            font_color: "black", opacity: 90
                          });

Java:

Map textParams = Cloudinary.asMap(
  "public_id", "dark_name",
  "font_family", "Arial",
  "font_size", 12,
  "font_color", "black",
  "opacity", "90"
);
Map textResult = cloudinary.uploader.text("some text", textParams);

.Net:

var textParams = new TextParams("Sample Name")
{
  PublicId = "dark_name",
  FontFamily = "Arial",
  FontSize = 12,
  FontColor = "black",
  Opacity = "90"
};
var textResult = cloudinary.Text(textParams);

After the text style has been created, any custom text string can be generated as a text overlay.

Here's an example of having a custom text string used by the helv_bd_24_blue pre-defined text style:

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

URL:

https://res.cloudinary.com/demo/image/upload/l_text:helv_bd_24_blue:Pre-defined style/site_bg_bright_small.jpg

Ruby:

cl_image_tag("site_bg_bright_small.jpg", :overlay=>{:font_family=>"bd", :font_size=>24, :text=>"Pre-defined%20style"})

PHP:

cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>array("font_family"=>"bd", "font_size"=>24, "text"=>"Pre-defined%20style")))

Python:

CloudinaryImage("site_bg_bright_small.jpg").image(overlay={'font_family': "bd", 'font_size': 24, 'text': "Pre-defined%20style"})

Node.js:

cloudinary.image("site_bg_bright_small.jpg", {overlay: {font_family: "bd", font_size: 24, text: "Pre-defined%20style"}})

Java:

cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("bd").fontSize(24).text("Pre-defined%20style"))).imageTag("site_bg_bright_small.jpg");

JS:

cloudinary.imageTag('site_bg_bright_small.jpg', {overlay: new cloudinary.TextLayer().fontFamily("bd").fontSize(24).text("Pre-defined%20style")}).toHtml();

jQuery:

$.cloudinary.image("site_bg_bright_small.jpg", {overlay: new cloudinary.TextLayer().fontFamily("bd").fontSize(24).text("Pre-defined%20style")})

React:

<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay={{fontFamily: "bd", fontSize: 24, text: "Pre-defined%20style"}} />
</Image>

Vue.js:

<cld-image publicId="site_bg_bright_small.jpg" >
  <cld-transformation overlay={{fontFamily: "bd", fontSize: 24, text: "Pre-defined%20style"}} />
</cld-image>

Angular:

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

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("bd").FontSize(24).Text("Pre-defined%20style"))).BuildImageTag("site_bg_bright_small.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("bd").fontSize(24).text("Pre-defined%20style"))).generate("site_bg_bright_small.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:helv_bd_24_blue:Pre-defined%20style")).generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)

Have a look at the following blog posts for more information about adding overlays (texts and images) with Cloudinary:
Adding watermarks, credits, badges and text overlays to images
How to overlay text on image easily, pixel perfect and with no CSS/HTML