Cloudinary cookbook background

Cloudinary Cookbook

← View popular recipes
Find recipes by tags:
View all 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>.

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
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:
cl.imageTag('site_bg_bright_small.jpg').toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg")
React:
<Image publicId="site_bg_bright_small.jpg" >

</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")
Original

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
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=>"text:Arial_24_bold:Dynamic%20style")
PHP:
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:Arial_24_bold:Dynamic%20style"))
Python:
CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:Arial_24_bold:Dynamic%20style")
Node.js:
cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).imageTag("site_bg_bright_small.jpg")
JS:
cl.imageTag('site_bg_bright_small.jpg', {overlay: "text:Arial_24_bold:Dynamic%20style"}).toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
React:
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:Arial_24_bold: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("text:Arial_24_bold:Dynamic%20style")).BuildImageTag("site_bg_bright_small.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg")
Dynamic style

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
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=>"text:Arial_24_bold:Colored%20text", :color=>"#B90FAE")
PHP:
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:Arial_24_bold:Colored%20text", "color"=>"#B90FAE"))
Python:
CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:Arial_24_bold:Colored%20text", color="#B90FAE")
Node.js:
cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Colored%20text", color: "#B90FAE"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_24_bold:Colored%20text").color("#B90FAE")).imageTag("site_bg_bright_small.jpg")
JS:
cl.imageTag('site_bg_bright_small.jpg', {overlay: "text:Arial_24_bold:Colored%20text", color: "#B90FAE"}).toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Colored%20text", color: "#B90FAE"})
React:
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:Arial_24_bold:Colored%20text" color="#B90FAE" />
</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("text:Arial_24_bold:Colored%20text").Color("#B90FAE")).BuildImageTag("site_bg_bright_small.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_24_bold:Colored%20text").color("#B90FAE")).generate("site_bg_bright_small.jpg")
Colored text

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:

RubyPHPPythonNode.jsJava.NetAll
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
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=>"text:helv_bd_24_blue:Pre-defined%20style")
PHP:
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:helv_bd_24_blue:Pre-defined%20style"))
Python:
CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:helv_bd_24_blue:Pre-defined%20style")
Node.js:
cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:helv_bd_24_blue:Pre-defined%20style"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:helv_bd_24_blue:Pre-defined%20style")).imageTag("site_bg_bright_small.jpg")
JS:
cl.imageTag('site_bg_bright_small.jpg', {overlay: "text:helv_bd_24_blue:Pre-defined%20style"}).toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:helv_bd_24_blue:Pre-defined%20style"})
React:
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:helv_bd_24_blue:Pre-defined%20style" />
</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("text:helv_bd_24_blue:Pre-defined%20style")).BuildImageTag("site_bg_bright_small.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:helv_bd_24_blue:Pre-defined%20style")).generate("site_bg_bright_small.jpg")
Pre-defined style

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

by Itay Taragano
Tags: