If we open this URL in a browser, we’ll see the text overlaid on the image:Ĭredit: ipet photo Position the text overlay on an image using Cloudinary If the font you’d like to use isn’t available by default, you can upload custom fonts for use with Cloudinary text overlays as well. Heads up! Cloudinary supports several fonts by default - there’s no list available, so you’ll have to just try a font out and see if it works. ![]() Ready%20to%20party is the URL-encoded text we want to display.arial_64: configures the text overlay to use Arial at 64pt.l_text: tells Cloudinary that we’re going to do a text overlay. ![]() The change here is this string: /l_text:arial_64:Ready%20to%20Party 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: Add a text overlay to an image using Cloudinary This will display the corgi image at 800px wide because we use the w_800 transform in the URL. All of these transformations are added in the URL of our image.Īs a simplified example, let’s add some text to a picture of a corgi: ![]() We can combine those with other transforms to place text anywhere on an image. How do text overlays work with Cloudinary?Ĭloudinary has a whole set of APIs to add overlays to images. Heads up! If this article helps you, you can sign up for Cloudinary with this link - you’ll get a free Cloudinary account, and I get a little bonus cash to help cover the costs of running this site.
0 Comments
Leave a Reply. |