Cloudinary Blog

Introducing a Text-Overlay Creator

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Let me showcase below a simple tool that I recently built for easily creating text overlays, including those with multiple lines and fonts.

Building Overlays in the Current Way

To create text overlays for an image in Cloudinary, you normally do that by editing the URL, as in this example:

Ruby:
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Arial", :font_size=>80, :text=>"Flowers"}}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>80, "text"=>"Flowers"))
  )))
PHP v2:
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(Source::text('Flowers', (new TextStyle('Arial', 80)))));
Python:
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Arial", 'font_size': 80, 'text': "Flowers"}}
  ])
Node.js:
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Arial", font_size: 80, text: "Flowers"}}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers"))).imageTag("flowers.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")}
  ]})
React:
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 80, text: "Flowers"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 80, text: 'Flowers'}" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_80:Flowers">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(80).Text("Flowers"))).BuildImageTag("flowers.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers"))).generate("flowers.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Arial_80:Flowers")).generate("flowers.jpg")!, cloudinary: cloudinary)
Flowers

The above URL contains the following parameters:

  • flowers.jpg: the image name
  • w_500: the width of the overlay on the image
  • l_text: the type of the overlay, in this case text
    • Arial: the font face
    • 80: the font size

The above setup is a cinch to master. However, creating a text overlay, e.g., Happy New Year!, with a custom font takes more steps:

  1. Encode the text for the URL, i.e., Happy%20New%20Year%21.
  2. Locate your font file. Let’s say it’s fonts/Roboto-Thin.ttf.
  3. Build the full URL in the correct syntax, as follows:

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :overlay=>{:public_id=>"fonts", :text=>"Roboto-Thin.ttf_30"})
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("overlay"=>array("public_id"=>"fonts", "text"=>"Roboto-Thin.ttf_30")))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(Source::text('Roboto-Thin.ttf_30', (new TextStyle('fonts')))));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(overlay={'public_id': "fonts", 'text': "Roboto-Thin.ttf_30"})
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {overlay: {public_id: "fonts", text: "Roboto-Thin.ttf_30"}})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"))).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay={{text: "Roboto-Thin.ttf_30", publicId: "fonts"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation :overlay="{text: 'Roboto-Thin.ttf_30', publicId: 'fonts'}" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text("Roboto-Thin.ttf_30").PublicId("fonts"))).BuildImageTag("sample.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"))).generate("sample.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21")).generate("sample.jpg")!, cloudinary: cloudinary)
Sample

To color the text yellow and position the overlay in the top-left corner, make the URL read like this:

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :overlay=>{:public_id=>"fonts", :text=>"Roboto-Thin.ttf_30"}, :gravity=>"north_west", :color=>"#FFF000")
PHP v1:
Copy to clipboard
cl_image_tag("sample.jpg", array("overlay"=>array("public_id"=>"fonts", "text"=>"Roboto-Thin.ttf_30"), "gravity"=>"north_west", "color"=>"#FFF000"))
PHP v2:
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(
      Overlay::source(Source::text('Roboto-Thin.ttf_30', (new TextStyle('fonts')))
        ->textColor(Color::rgb('FFF000')))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northWest()))
  ));
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(overlay={'public_id': "fonts", 'text': "Roboto-Thin.ttf_30"}, gravity="north_west", color="#FFF000")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {overlay: {public_id: "fonts", text: "Roboto-Thin.ttf_30"}, gravity: "north_west", color: "#FFF000"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")).gravity("north_west").color("#FFF000")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"), gravity: "north_west", color: "#FFF000"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"), gravity: "north_west", color: "#FFF000"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay={{text: "Roboto-Thin.ttf_30", publicId: "fonts"}} gravity="north_west" color="#FFF000" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation :overlay="{text: 'Roboto-Thin.ttf_30', publicId: 'fonts'}" gravity="north_west" color="#FFF000" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21" gravity="north_west" color="#FFF000">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text("Roboto-Thin.ttf_30").PublicId("fonts")).Gravity("north_west").Color("#FFF000")).BuildImageTag("sample.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")).gravity("north_west").color("#FFF000")).generate("sample.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21").setGravity("north_west").setColor("#FFF000")).generate("sample.jpg")!, cloudinary: cloudinary)
Sample 2

To add an overlay with multiple lines, you must construct chained transformations with multiple components, each implementing a specific section of the overlay. The more requirements for the overlay, the more complex the related image URL. Even though the Media Library UI offers shortcuts, becoming adept with the procedure takes time and practice. Also, nontechnical professionals, who are often tasked with creating text overlays, might take longer to familiarize with the URL format and the UI.


Sign up for Cloudinary free today!


Creating Overlays With an Intuitive Tool

For a simpler alternative, leverage this text-overlay tool, an HTML-JavaScript app through which you can input the following details for an overlay:

  • The text
  • The font face
  • The font size
  • The position of the text line

You can set up a maximum of three such overlays, each one with its own text, font face, font size, and position.

Example

Suppose you’d like to create a three-line text overlay with the following properties for an image and position the lines at different places of the image:

Text Color (RGB) Size
Have no fear. . . FFF000 (yellow) 30
A COVID-19 vaccine is here! 000FFF (blue) 35
Let’s hope 2021 will turn out to be better than 2020. F0F0F0 (gray) 30

Step 1: Identify the Image

Choose an image from your Cloudinary account’s Media Library by clicking INSERT IMAGE at the top, which then takes you to the library, in which you can search or navigate to the image. See the demo below.

Step 2: Input the Text Lines and Specify Their Font Details

Type the text to be overlaid in the text fields. Note that those fields are optional, i.e., you can input between one to three lines of text.

Afterwards, choose the font face and enter the font size you desire.

Step 3: Position the Overlay

Specify the position of the overlay by clicking the PICK button. Alternatively, enter the X and Y coordinates. In this example, the top-left corner is the original position (X=0,Y=0).

In the demo below, I selected the position for the first text line by clicking the image. I then adjusted the position and, with that as the basis, set the position of the second and third text lines.

Step 4: Preview the Image

Verify the setup by clicking the PREVIEW button. To make changes, click CLEAR and edit the settings.

Step 5: Generate the Image With Overlay

Once you are happy with the result, click GENERATE to create the image with the overlay. As reference, the tool displays the Cloudinary URL, with which you can embed the image into a webpage or marketing material.

Cloudinary URL

Wrapping Up

With the simple tool described above, you can see your multiline or multifont overlay settings at a glance, configure or edit them with ease, and avoid the complex and often time-consuming process of programmatically creating transformations. Since I built the tool on the existing widgets, I’ll enhance it or add features to it from time to time to improve its usability and robustness. If you like what you've seen, please vote for this tool in our Product Roadmap.

Do give the tool a try. Any problems, please open an issue on GitHub.

Recent Blog Posts

Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more
Why Audio in Video Matters

Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.

Read more

For Developers: the HTML <picture> Element Explained

By Amarachi Amaechi
For Developers: the HTML <picture> Element Explained

We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.

Read more