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.
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:
This will display the corgi image at 800px wide because we use the
w_800 transform in the URL.
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:
The change here is this string:
l_text:tells Cloudinary that we're going to do a text overlay
arial_64:configures the text overlay to use Arial at 64pt
Ready%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:
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.
g_south_west to the text overlay transformation section of the URL, separating it with a comma:
Now the image looks like this:
This is better, but now the text is crammed against the edge of the photo — not great.
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:
Now the image is offset from the edge of the image by 40px at the left and bottom:
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:
Now it looks pretty good!
To take your text overlays to the next level, try: