Adding text overlays to images is a powerful way to include watermarks, captions, branding, or custom labels. Cloudinary offers two methods for applying text overlays:
1. Pre-defined text styles – Create and reuse text styles for consistency.
2. Dynamically generated text styles – Define text styles on the fly within the image URL.
1. Using Pre-defined Text Styles
Pre-defined text styles allow you to create a reusable text format with an SEO-friendly name. This ensures consistency across multiple images without redefining the style each time.
Step 1: Generate a Text Style
You can create a pre-defined text style using Cloudinary’s API. 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
});
💡 What This Does:
• Creates a reusable text style with the name “dark_name”
• Sets the font to Arial, size 12, and color black
• Sets the text opacity to 90%
Step 2: Apply the Pre-defined Text Style
Once the text style is created, you can overlay any text using the defined style:
🔗 Example (Using pre-defined text style in an image transformation):
2. Generating Text Overlays Dynamically
Instead of creating a pre-defined text style, you can define text styling directly within the transformation URL.
- Basic Syntax:
https://res.cloudinary.com/<cloud_name>/image/upload/l_text:<font_family>_<font_size>:<text>/<public_id>.<extension>
Example: On-the-Fly Text Overlay
🔗 Basic text overlay example (Adds “Hello World” in Arial, size 35 bold over an image):
https://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World/sample.jpg
🌟 Output: The text “Hello World” is overlaid onto the image.
- Adding Color to the Text Overlay
You can specify the text color using the co (color) parameter.
🔗 Example: Adding a blue text overlay
https://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World,co_blue/sample.jpg
🌟 Output: The text “Hello World” appears in blue.
3. Experiment with Text Overlays
Cloudinary offers numerous transformation options for text overlays, including positioning, background effects, and animation.
💡 Try it out: Use the CodeSandbox example below to explore different text overlay transformations.
🚀 Want more advanced text styling? Check out Cloudinary’s official Text Overlay Documentation.
Comments
10 comments
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?
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
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!
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>`
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
Thank you @Roee. That sorted me out
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
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
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.
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).
Please sign in to leave a comment.