In order to create a text overlay, you can either pre-define a text style by your preference (e.g., font family, size, color, and more), or dynamically define one.
Pre-defining a text style:
You can create a text style by your choice of font family, size, color and many more parameters.
For more information:
https://cloudinary.com/documentation/image_transformations#using_custom_fonts_for_text_overlays
Text styles can be generated via the API with our integration libraries as well. For example in PHP:
\Cloudinary\Uploader::text("Sample Name",
array(
"public_id" => "dark_name",
"font_family" => "Arial", "font_size" => 12,
"font_color" => "black", "opacity" => 90));
After the text style has been created, any custom text string can be generated as a text overlay:
http://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images
Also, you can dynamically change the font's color:
http://support.cloudinary.com/entries/25570452-Can-I-dynamically-change-my-text-color-
Dynamically generate a text style:
You can generate a text style by your requirements on-the-fly, including font family, size, decoration and more.
Here's an example of a URL with an on-the-fly generated text style:
http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World/sample.jpg
You can also set the color parameter (co in URLs) to dynamically color the font to your required color:
http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:Arial_35_bold:Hello%20World,co_blue/sample.jpg
Comments
12 comments
This is super helpful. Is there a way to do add a images and a text one below the other? So, an image, then some text and then another image below it and so on?
Hi Raj,
Were you referring to something similar to the following?:
http://res.cloudinary.com/demo/image/upload/w_200/l_text:Arial_20_bold:My%20text,y_-25,g_south/l_sample,g_south,w_200,y_-140/sample.jpg
If so, you can have a look at the following for more information about text custom positioning:
http://cloudinary.com/cookbook/text_overlay_positioning
Hi,
I have added <img src="" data-src="sample.jpg" class="dynamic\_image" /> in my html and in my javascript
$.cloudinary.image("sample.jpg", {overlay: "text:Arial_45_bold:Hello%20sdfdfdfdfdf", gravity: "south"})
$(".dynamic_image").cloudinary();
it is showing the overlay image but not showimng up in the UI any idea why????
Iti
Can you please share the URL generated by this code so we'll be able to further understand the issue?
For the web browser URL code to enable overlay text that use Google Fonts with text outline or text shadow, go here: http://cloudinary.com/cookbook/add_a_text_to_an_image
Hope this helps!
Hi there. In the angular 2 api, is it possible to add the overlay text dynamically? I tried with interpolation (as per code snippet below) but I get "Unhandled Promise rejection: Template parse errors: Can't bind to 'overlay' since it isn't a known property of 'cl-transformation'."
This is what generates the error:
`<cl-transformation overlay = "text:Verdana_75_bold_underline_letter_spacing_14:'{{myText}}'"></cl-transformation>`
Hi @Siphiwe. Please use attribute binding, such as:
<cl-transformation attr.overlay="text:Verdana_75_bold_underline_letter_spacing_14:{{myText}}"></cl-transformation>
See example here - https://plnkr.co/edit/z5rnRI?p=preview
Thank you @Roee. That sorted me out
Hi Friends!
Is it possible to do an image overlay, then text on top of that overlay? Would we simply have to order the transformations to match the layer order we'd like to use?
Thanks!
Andrew
Hi @Co.tribute Cloudinary
You are correct, the order in the transformation would need to match the layer order.
I have included an example that adds an image overlay, followed by a text overlay: http://res.cloudinary.com/demo/image/upload/l_couple/l_text:Arial_100:Smile!,co_red/sample.jpg
Thanks @Daniel!
Quick follow-up: can you dynamically change the font size to fit a container? E.g. 50 characters = 12pt font, 100 characters = 6pt font?
If so, please direct us where to submit all hugs and boxes of chocolates.
Hi @Co.tribute Cloudinary,
I apologize for the late response.
There currently isn't a way to dynamically resize the font to fit in a container; however, this could effect could be achieved through a different way. The possible solution would be to create a text overlay that has a large font and then resize the text to fit in the container. This approach has some limitations like having to know the width and height of the image and adjusting the font size.
Here is an example:
http://res.cloudinary.com/demo/image/upload/l_text:Arial_150_bold:HELLO%0ASomething,h_500,w_800/sample.jpg
Note, you'll need to use URL encoding's to create a newline (%0A).
Please sign in to leave a comment.