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.
- Watch a Video
- Access the Management Console's Transformation Editor
- Applying Text Overlays
- Adjusting the Text Overlay's Positioning
- Further Resources
Watch a Video
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:
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.
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.
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.
3. Type in the name of the font you want to use, such as "arial" or "montserrat", followed by an underscore (_).
4. Type a number for your desired font-size, such as "50" or "60", followed by a colon.
5. Type whatever you want the text to be overlaid on your image, such as "Sale!" or "Register Today".
At this point, you should be able to select the Refresh Preview button on your image to see the overlay.
From there, you can select the URL with the applied transformations to see the image and its new overlay in your browser.
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.
Other options for defining the font family, size and styling are available in our documentation.
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.
You can also adjust the placement of the text by adjusting its X- and Y-coordinates with your desired number.
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.
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.