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

On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more