Add Text Overlays to Images Using Cloudinary
In this post, learn how to use Cloudinary to add text overlays to images using URL-based APIs.
In many cases, it’s helpful to add text overlays to images. Sharing content on social media, for example, can be more effective with a sharing image including information about the content.
In this post, we’ll look at how we can use Cloudinary to add text overlays to images using URL-based APIs.
How do text overlays work with Cloudinary?
Cloudinary has a whole set of APIs to add overlays to images. We can combine those with other transforms to place text anywhere on an image. All of these transformations are added in the URL of our image.
As a simplified example, let’s add some text to a picture of a corgi:
The URL for this image is:
https://res.cloudinary.com/jlengstorf/image/upload/w_800/corgi.jpg
This will display the corgi image at 800px wide because we use the w_800 transform in the URL.
Add a text overlay to an image using Cloudinary
To add text, we’re going to add a second transform — transforms in Cloudinary are separated by forward slashes (/) — that tells Cloudinary to add a text overlay using the font Arial at 64pt size:
https://res.cloudinary.com/jlengstorf/image/upload/w_800/l_text:arial_64:Ready%20to%20party/corgi.jpg
The change here is this string:
/l_text:arial_64:Ready%20to%20Party
l_text:tells Cloudinary that we’re going to do a text overlayarial_64:configures the text overlay to use Arial at 64ptReady%20to%20partyis the URL-encoded text we want to display
If we open this URL in a browser, we’ll see the text overlaid on the image:
Position the text overlay on an image using Cloudinary
Our image looks okay, but it would be better if the text wasn’t on top of our doggo. Fortunately, Cloudinary allows us to position text using additional transforms.
First, let’s set the “gravity” of the text so it’s anchored to the bottom-left corner. This is done using directions for whatever reason, so bottom and left are considered south and west.
Add g_south_west to the text overlay transformation section of the URL, separating it with a comma:
https://res.cloudinary.com/jlengstorf/image/upload/w_800/g_south_west,l_text:arial_64:Ready%20to%20party/corgi.jpg
Now the image looks like this:
This is better, but now the text is crammed against the edge of the photo — not great.
Add X and Y offsets to text overlays in Cloudinary
We can adjust this by changing the X and Y offsets, though. The offsets start from wherever the gravity is set, so in this case our X offset will be from the left edge and the Y offset will be from the bottom.
These are set as x_40,y_40 in the text overlay transformation section:
https://res.cloudinary.com/jlengstorf/image/upload/w_800/g_south_west,x_40,y_40,l_text:arial_64:Ready%20to%20party/corgi.jpg
Now the image is offset from the edge of the image by 40px at the left and bottom:
Almost there!
Set text overlays to wrap at a specified width in Cloudinary
Now let’s get the text to wrap so it doesn’t overlay the corgi at all. We can do this by setting a width and telling the text to “fit” using the crop settings.
These are set as w_250,c_fit in the transformation section:
https://res.cloudinary.com/jlengstorf/image/upload/w_800/g_south_west,x_40,y_40,w_250,c_fit,l_text:arial_64:Ready%20to%20party/corgi.jpg
Now it looks pretty good!
What to do next
To take your text overlays to the next level, try: