Skip to main content

How to Add a Text Overlay?

Tamara Yulevich
Updated

A text overlay can be created in two ways:

  1. Pre-defined text style (e.g., font family, size, color)
  2. Dynamically defined text style

Pre-defining a text style:

You can generate a text style in advance, give it a nice SEO-friendly name, and reuse it for your future transformations. For more information, read here.
Text styles can be easily generated via the API with our integration libraries. For example in 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 });

After the text style has been created, any custom text string can be generated as a text overlay:
http://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images

 

Dynamically generate a text style:

You can also generate a text style on-the-fly, including font family, size, decoration, and more. The final URL will look similar to this: https://res.cloudinary.com/<cloud_name>/image/upload/l_text:<font_family>_<font_size>:<text>/<public_id>.<extension>.

Here's an example of a URL with an on-the-fly generated text style:
http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World/sample.jpg

You can also set the color parameter (co in URLs) to dynamically color the font to your required color:
http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World,co_blue/sample.jpg

 

Take advantage of the CodeSandbox provided below to explore various image text overlay transformations. Keep in mind that the possibilities for applying effects to your image are not limited to this example.

Related articles

Comments

10 comments

Date Votes
  • Raj Subramanian

    This is super helpful. Is there a way to do add a images and a text one below the other? So, an image, then some text and then another image below it and so on?

    0
  • Itay Taragano

    Hi Raj,

    Were you referring to something similar to the following?:

    http://res.cloudinary.com/demo/image/upload/w_200/l_text:Arial_20_bold:My%20text,y_-25,g_south/l_sample,g_south,w_200,y_-140/sample.jpg

    If so, you can have a look at the following for more information about text custom positioning:

    http://cloudinary.com/cookbook/text_overlay_positioning

    0
  • Frankie Kam

    For the web browser URL code to enable overlay text that use Google Fonts with text outline or text shadow, go here: http://cloudinary.com/cookbook/add_a_text_to_an_image
    Hope this helps!

    0
  • Siphiwe
    Edited

    Hi there. In the angular 2 api, is it possible to add the overlay text dynamically? I tried with interpolation (as per code snippet below) but I get "Unhandled Promise rejection: Template parse errors: Can't bind to 'overlay' since it isn't a known property of 'cl-transformation'."

    This is what generates the error:

    `<cl-transformation overlay = "text:Verdana_75_bold_underline_letter_spacing_14:'{{myText}}'"></cl-transformation>`

    0
  • Roee Ben Ari
    Edited

    Hi @Siphiwe. Please use attribute binding, such as: 

    <cl-transformation attr.overlay="text:Verdana_75_bold_underline_letter_spacing_14:{{myText}}"></cl-transformation> 

    See example here - https://plnkr.co/edit/z5rnRI?p=preview

    0
  • Siphiwe

    Thank you @Roee. That sorted me out

    0
  • Cotribute Cloudinary

    Hi Friends!

    Is it possible to do an image overlay, then text on top of that overlay?  Would we simply have to order the transformations to match the layer order we'd like to use?

    Thanks!

    Andrew 

    0
  • Daniel Mendoza

    Hi @Co.tribute Cloudinary

    You are correct, the order in the transformation would need to match the layer order.

    I have included an example that adds an image overlay, followed by a text overlay: http://res.cloudinary.com/demo/image/upload/l_couple/l_text:Arial_100:Smile!,co_red/sample.jpg

    1
  • Cotribute Cloudinary

    Thanks @Daniel!  

    Quick follow-up: can you dynamically change the font size to fit a container?  E.g. 50 characters = 12pt font, 100 characters = 6pt font?

    If so, please direct us where to submit all hugs and boxes of chocolates. 

    0
  • Daniel Mendoza

    Hi @Co.tribute Cloudinary,

    I apologize for the late response.

    There currently isn't a way to dynamically resize the font to fit in a container; however, this could effect could be achieved through a different way. The possible solution would be to create a text overlay that has a large font and then resize the text to fit in the container. This approach has some limitations like having to know the width and height of the image and adjusting the font size.

    Here is an example:

    http://res.cloudinary.com/demo/image/upload/l_text:Arial_150_bold:HELLO%0ASomething,h_500,w_800/sample.jpg

    Note, you'll need to use URL encoding's to create a newline (%0A).

    0

Please sign in to leave a comment.