Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.
Let me showcase below a simple tool that I recently built for easily creating text overlays, including those with multiple lines and fonts.
To create text overlays for an image in Cloudinary, you normally do that by editing the URL, as in this example:
Ruby:
cl_image_tag("flowers.jpg", :transformation=>[
{:width=>500, :crop=>"scale"},
{:overlay=>{:font_family=>"Arial", :font_size=>80, :text=>"Flowers"}}
])
PHP v1:
cl_image_tag("flowers.jpg", array("transformation"=>array(
array("width"=>500, "crop"=>"scale"),
array("overlay"=>array("font_family"=>"Arial", "font_size"=>80, "text"=>"Flowers"))
)))
PHP v2:
(new ImageTag('flowers.jpg'))
->resize(Resize::scale()->width(500))
->overlay(Overlay::source(Source::text('Flowers', (new TextStyle('Arial', 80)))));
Python:
CloudinaryImage("flowers.jpg").image(transformation=[
{'width': 500, 'crop': "scale"},
{'overlay': {'font_family': "Arial", 'font_size': 80, 'text': "Flowers"}}
])
Node.js:
cloudinary.image("flowers.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: {font_family: "Arial", font_size: 80, text: "Flowers"}}
]})
Java:
cloudinary.url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers"))).imageTag("flowers.jpg");
JS:
cloudinary.imageTag('flowers.jpg', {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")}
]}).toHtml();
jQuery:
$.cloudinary.image("flowers.jpg", {transformation: [
{width: 500, crop: "scale"},
{overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")}
]})
React:
<Image publicId="flowers.jpg" >
<Transformation width="500" crop="scale" />
<Transformation overlay={{fontFamily: "Arial", fontSize: 80, text: "Flowers"}} />
</Image>
Vue.js:
<cld-image publicId="flowers.jpg" >
<cld-transformation width="500" crop="scale" />
<cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 80, text: 'Flowers'}" />
</cld-image>
Angular:
<cl-image public-id="flowers.jpg" >
<cl-transformation width="500" crop="scale">
</cl-transformation>
<cl-transformation overlay="text:Arial_80:Flowers">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(500).Crop("scale").Chain()
.Overlay(new TextLayer().FontFamily("Arial").FontSize(80).Text("Flowers"))).BuildImageTag("flowers.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.width(500).crop("scale").chain()
.overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers"))).generate("flowers.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(500).setCrop("scale").chain()
.setOverlay("text:Arial_80:Flowers")).generate("flowers.jpg")!, cloudinary: cloudinary)
The above URL contains the following parameters:
flowers.jpg: the image namew_500: the width of the overlay on the imagel_text: the type of the overlay, in this case text
Arial: the font face80: the font size
The above setup is a cinch to master. However, creating a text overlay, e.g., Happy New Year!, with a custom font takes more steps:
- Encode the text for the URL, i.e.,
Happy%20New%20Year%21.
- Locate your font file. Let’s say it’s
fonts/Roboto-Thin.ttf.
- Build the full URL in the correct syntax, as follows:
Ruby:
cl_image_tag("sample.jpg", :overlay=>{:public_id=>"fonts", :text=>"Roboto-Thin.ttf_30"})
PHP v1:
cl_image_tag("sample.jpg", array("overlay"=>array("public_id"=>"fonts", "text"=>"Roboto-Thin.ttf_30")))
PHP v2:
(new ImageTag('sample.jpg'))
->overlay(Overlay::source(Source::text('Roboto-Thin.ttf_30', (new TextStyle('fonts')))));
Python:
CloudinaryImage("sample.jpg").image(overlay={'public_id': "fonts", 'text': "Roboto-Thin.ttf_30"})
Node.js:
cloudinary.image("sample.jpg", {overlay: {public_id: "fonts", text: "Roboto-Thin.ttf_30"}})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"))).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")})
React:
<Image publicId="sample.jpg" >
<Transformation overlay={{text: "Roboto-Thin.ttf_30", publicId: "fonts"}} />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation :overlay="{text: 'Roboto-Thin.ttf_30', publicId: 'fonts'}" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation overlay="text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text("Roboto-Thin.ttf_30").PublicId("fonts"))).BuildImageTag("sample.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"))).generate("sample.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21")).generate("sample.jpg")!, cloudinary: cloudinary)
To color the text yellow and position the overlay in the top-left corner, make the URL read like this:
Ruby:
cl_image_tag("sample.jpg", :overlay=>{:public_id=>"fonts", :text=>"Roboto-Thin.ttf_30"}, :gravity=>"north_west", :color=>"#FFF000")
PHP v1:
cl_image_tag("sample.jpg", array("overlay"=>array("public_id"=>"fonts", "text"=>"Roboto-Thin.ttf_30"), "gravity"=>"north_west", "color"=>"#FFF000"))
PHP v2:
(new ImageTag('sample.jpg'))
->overlay(
Overlay::source(Source::text('Roboto-Thin.ttf_30', (new TextStyle('fonts')))
->textColor(Color::rgb('FFF000')))
->position((new Position())
->gravity(Gravity::compass(Compass::northWest()))
));
Python:
CloudinaryImage("sample.jpg").image(overlay={'public_id': "fonts", 'text': "Roboto-Thin.ttf_30"}, gravity="north_west", color="#FFF000")
Node.js:
cloudinary.image("sample.jpg", {overlay: {public_id: "fonts", text: "Roboto-Thin.ttf_30"}, gravity: "north_west", color: "#FFF000"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")).gravity("north_west").color("#FFF000")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"), gravity: "north_west", color: "#FFF000"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {overlay: new cloudinary.TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts"), gravity: "north_west", color: "#FFF000"})
React:
<Image publicId="sample.jpg" >
<Transformation overlay={{text: "Roboto-Thin.ttf_30", publicId: "fonts"}} gravity="north_west" color="#FFF000" />
</Image>
Vue.js:
<cld-image publicId="sample.jpg" >
<cld-transformation :overlay="{text: 'Roboto-Thin.ttf_30', publicId: 'fonts'}" gravity="north_west" color="#FFF000" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
<cl-transformation overlay="text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21" gravity="north_west" color="#FFF000">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text("Roboto-Thin.ttf_30").PublicId("fonts")).Gravity("north_west").Color("#FFF000")).BuildImageTag("sample.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text("Roboto-Thin.ttf_30").publicId("fonts")).gravity("north_west").color("#FFF000")).generate("sample.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21").setGravity("north_west").setColor("#FFF000")).generate("sample.jpg")!, cloudinary: cloudinary)
To add an overlay with multiple lines, you must construct chained transformations with multiple components, each implementing a specific section of the overlay. The more requirements for the overlay, the more complex the related image URL. Even though the Media Library UI offers shortcuts, becoming adept with the procedure takes time and practice. Also, nontechnical professionals, who are often tasked with creating text overlays, might take longer to familiarize with the URL format and the UI.
For a simpler alternative, leverage this text-overlay tool, an HTML-JavaScript app through which you can input the following details for an overlay:
- The text
- The font face
- The font size
- The position of the text line
You can set up a maximum of three such overlays, each one with its own text, font face, font size, and position.
Suppose you’d like to create a three-line text overlay with the following properties for an image and position the lines at different places of the image:
| Text |
Color (RGB) |
Size |
| Have no fear. . .
| FFF000 (yellow) |
30 |
A COVID-19 vaccine is here! |
000FFF (blue) |
35 |
Let’s hope 2021 will turn out to be better than 2020. |
F0F0F0 (gray) |
30 |
Choose an image from your Cloudinary account’s Media Library by clicking INSERT IMAGE at the top, which then takes you to the library, in which you can search or navigate to the image. See the demo below.
Type the text to be overlaid in the text fields. Note that those fields are optional, i.e., you can input between one to three lines of text.
Afterwards, choose the font face and enter the font size you desire.
Specify the position of the overlay by clicking the PICK button. Alternatively, enter the X and Y coordinates. In this example, the top-left corner is the original position (X=0,Y=0).
In the demo below, I selected the position for the first text line by clicking the image. I then adjusted the position and, with that as the basis, set the position of the second and third text lines.
Verify the setup by clicking the PREVIEW button. To make changes, click CLEAR and edit the settings.
Once you are happy with the result, click GENERATE to create the image with the overlay. As reference, the tool displays the Cloudinary URL, with which you can embed the image into a webpage or marketing material.
With the simple tool described above, you can see your multiline or multifont overlay settings at a glance, configure or edit them with ease, and avoid the complex and often time-consuming process of programmatically creating transformations. Since I built the tool on the existing widgets, I’ll enhance it or add features to it from time to time to improve its usability and robustness. If you like what you've seen, please vote for this tool in our Product Roadmap.
Do give the tool a try. Any problems, please open an issue on GitHub.
