Skip to main content

Adding Text Overlays to Images with Cloudinary's Management Console

Sam Brace
Updated

This tutorial shows how to overlay text captions onto a base image using Cloudinary's transformations. The steps are demonstrated with Cloudinary's Management Console and its user-interface, instead of its APIs. For further details and options with text overlays, we recommend reviewing Cloudinary's official documentation on the subject.

Tutorial Sections

Watch a Video 

Go back to the top of the tutorial.

Access the Management Console's Transformation Editor

To access the Management Console's Transformation Editor for a particular asset, you will need to take the following steps:

1. Log into the Console.

Cloudinary Management Console

2. Click on the Media Library option in the top navigation.

3. Hover over the desired asset, which will display several options. Choose the Edit icon.

Cloudinary Media Libary Edit Asset Icon

Go back to the top of the tutorial.

Applying Text Overlays

Once you are in the Management Console's Transformation Editor, take these steps to apply a text overlay to your image:

1. Select the Add overlay and watermark option.

Cloudinary Transformation Editor Overlay and Watermark Option

2. Find the Image ID field, then type "text" and then a colon (:). This is telling Cloudinary you are going to be applying text, instead of an image, for your overlay.

Cloudinary Text Overlay Step 1 

3. Type in the name of the font you want to use, such as "arial" or "montserrat", followed by an underscore (_).

Cloudinary Text Overlay Step 2 

4. Type a number for your desired font-size, such as "50" or "60", followed by a colon.

Cloudinary Text Overlay Step 3 

5. Type whatever you want the text to be overlaid on your image, such as "Sale!" or "Register Today".

Cloudinary Text Overlay Step 4

At this point, you should be able to select the Refresh Preview button on your image to see the overlay.

Cloudinary Refresh Preview Button

From there, you can select the URL with the applied transformations to see the image and its new overlay in your browser.

Cloudinary Text Overlay URL

You can further define your overlay if you chose by applying a certain style of a font-family, such as Monserrat Light. Simply add an underscore after the font-size, then type "style" and the style's name.

Cloudinary Text Overlay Font Style

Other options for defining the font family, size and styling are available in our documentation.

Go back to the top of the tutorial.

Adjusting the Text Overlay's Positioning

Text overlays will be placed in the center of your image by default. You can change this by adding some transformations to the transformation set associated with the overlaid text.

One option is to use our Gravity transformations. This allows you to move the text to a certain spot of the image through compass-style directions, such as North, South, South West and North East. 

Cloudinary Gravity Transformations with Text Overlay

Further details about gravity transformations can be found in our tutorials, documentation and blog posts.

You can also adjust the placement of the text by adjusting its X- and Y-coordinates with your desired number. 

Cloudinary X and Y Coordinate Transformations with Text Overlay

Our documentation has more details about other ways to apply the X and Y-coordinate transformations.

This is just a sampling of options for changing the positioning of your overlay. You can find many more in our documentation.

Go back to the top of the tutorial.

Further Resources

If you are not already a Cloudinary user, you can sign up for your free account and try out some of the features demonstrated in this tutorial.

You can also dive our full documentation on text overlays, as well as cookbook recipes and Knowledge Base articles.

Go back to the top of the tutorial.

 

Related articles

Comments

4 comments

Date Votes
  • Luis Mendes

    This is great Sam, thanks. Is there any way to adjust for padding top and bottom if I'm using an overlay which has a border and background? I'd like it to be vertically centered over a white background with rounded corners.

    thx!

    0
  • Danny Valentine

    Hi Luis.

    There are a few ways to accomplish what you're trying to do. Could you please confirm if this is an image or text you're trying to overlay?

    You're welcome to raise a support ticket with us directly if you'd like us to use examples from your own cloud. To do so, you can fill out the form at this link.

    Thanks,
    -Danny

    0
  • Luis Mendes

    Hi Danny,

    I am not using an image, no because the string length will vary. I am currently using :

    l_text:MarkPro-Medium.otf_24:NEW,g_north_west,y_22,x_30,b_white,r_40,co_black/

    ...which creates a rounded corner box behind the text with radius corners, but I cannot add more "padding" to the wire box top and bottom to provide more white area behind the text.

    I want this — 

    But can only get this using the method above — 

    The only workaround I've found is to use white text at a larger font size to make the white background, and then overlay the black text. But the fit is never as accurate as having "padding"... I would use something like "-splice" in Imagemagick to achieve this otherwise but need it done in Cloudinary, as text.

    Thanks!
    -Luis

    0
  • Eric Pasos

    Hi Luis,

    While the text transformation styling parameter does not support padding (i.e. like in CSS), Cloudinary does support the layering of components that would fit your use case requirements. Like the way you've already implemented, your need could be answered with that approach and, alternatively, I would recommend having an image that you could further manipulate as an overlay, for example:

    http://res.cloudinary.com/demo/image/upload/l_container.jpg/h_100,r_150,w_300/fl_layer_apply/fl_text_no_trim,l_text:Arial_50_bold_italic:Smile%2521/fl_layer_apply/sample.jpg

    The transformation URL above contains at least 3 components, which include the main image (sample.jpg), text background image (container.jpg), and the text (smile!).

    The following sample code using Cloudinary Python SDK is used to generate the delivery URL above:

    # Note: sample.jpg is the main image
    CloudinaryImage("sample.jpg").image(transformation=[
          # Overlay 1
          {'overlay': "container.jpg"},
          {'height': 100, 'width': 300, 'radius': 150},
          {'flags': "layer_apply"},

          # Overlay 2
          {'overlay': {
                        'font_family': "Arial", 
                        'font_size': 50, 
                        'font_weight': "bold", 
                        'font_style': "italic",
                        'text': "Smile%21",
                      },
           'flags': "text_no_trim",
           },
           {'flags': "layer_apply"}
           ])

    The code is just an example in order to provide a better way of viewing how the dynamic URL was generated.

    You may refer to the following links for more information:
    https://cloudinary.com/documentation/layers#styling_parameters
    https://cloudinary.com/cookbook/relative_size_overlays
    https://cloudinary.com/documentation/transformation_reference

    Best regards,
    Eric

    0

Please sign in to leave a comment.