After you've created the required text overlay, you can easily add text overlays to any of your Cloudinary images. i.e.:
https://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:helv_bd_24_blue:Hello/couple.jpg
Using texts that are too long may result the text to go out of the image's boundaries, i.e.:
You can either adjust the text's size, by specifying the required width while using the 'scale' crop mode:
You can set the width by percentage of the original text's size, for example 50% (width => 0.5):
You can set the image's size to be as a relative percentage of the image's dimensions. This is done by setting the flags parameter to relative (fl_relative in URLs). For example, having the text to be 90% of the image (width => 0.9):
You can use the newline character ('\n') to manually set new lines (by using the URL escaped version - '%0A'):
You can also use the 'fit' crop mode alongside the required width in order to automatically wrap the text:
Note that wrapping doesn't work with percents width.
For more information:
https://cloudinary.com/documentation/image_transformations#adding_multi_line_text
Comments
11 comments
Can the alignment be specified with last example of word wrap? Can it be center-aligned for instance instead of left-aligned?
This specific text style ("helv_bd_24_blue") was pre-defined with the default alignment (left).
You can either pre-define a text style with the required alignment, for example in PHP:
\Cloudinary\Uploader::text("Sample Name",
array(
"public_id" => "dark_name",
"font_family" => "Arial", "font_size" => 12,
"font_color" => "black", "text_align" => "center"));
Or you can dynamically set the required text style, including alignment, as explained here.
For example:
http://res.cloudinary.com/demo/image/upload/w_200,o_30/w_200,c_fit,l_text:Helvetica_24_bold_center:This%20is%20an%20example%20of%20a%20long%20text,co_blue/couple.jpg
Thanks, Itay! That worked!
Another question, can we do anything about the line spacing? Shrink it? Widen it? I tried playing with the 'height' property but that just scales up/down everything. I just want the spacing between each line to be smaller.
That worked as expected .... I came across another situation.
Q. HOW DO WE INCLUDE SPECIAL CHARACTERS, LIKE ',' (Comma) ?
Tried replacing commas will Url Encoded characters (%2C), still no luck.
Thank You
That worked as expected .... I came across another situation.
Q. HOW DO WE INCLUDE SPECIAL CHARACTERS, LIKE ',' (Comma) ?
Tried replacing commas will Url Encoded characters (%2C), still no luck.
Thank You
http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_black_box_corbn7,g_south_west,w_220,h_110,o_60/l_text:Ubuntu_65_bold:Run%20Jump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg
Regarding your questions:
Ariel - Currently line spacing configuration isn't supported. It is on our road map to support it as well.
Thiru - The issue with the comma is that it collides with Cloudinary's functionality. Specifically commas in Cloudinary URLs are used for separating between different transformation parameters (e.g.,
w_100,h_100...). So if the regular comma (or even its%2Cescaped version) is used, Cloudinary thinks that the next parameter is entered rather than the rest of the text string.Therefore, you can double escape the comma (
%252C):http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_text:Ubuntu_65_bold:Run%252C%20Jump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg
Alternatively, you can use a special encoding of another comma (
%E2%80%9A):http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_text:Ubuntu_65_bold:Run%E2%80%9A%20Jump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg
Thank You Itay Taragano. You had it answered on http://support.cloudinary.com/entries/28800832-Using-special-characters-in-Text-overlaying- ... :)
UPDATE
We now support controlling the letter spacing of text overlays.
A new
letter_spacingparameter is now supported, followed by the spacing value.For example:
http://res.cloudinary.com/demo/image/upload/l_text:Arial_40_bold_letter_spacing_10.5:Hello%20World,co_white/sample.jpg
UPDATE
We now support defining line spacing too for text overlays.
You can now set the
line_spacingparameter.For example:
http://res.cloudinary.com/demo/image/upload/l_text:Arial_40_bold_line_spacing_20:Hello%0AWorld,co_white/sample.jpg
Found a bit of an issue with the line_spacing parameter - when I feed it a NEGATIVE (such as -15) value, it truncates after 2 lines adding '...' to the end, but when I give it a value of 0+ it properly flows onto the 3rd line.
Example snippet from my url:
c_fit,co_rgb:000,g_north_west,l_text:Martel%20Sans_24_line_spacing_0:We%20have%20some%20up%20and%20coming%20professionals%20here%20with%20a%20brand%20new%20college%20degree%20these%20folks%20are%20ready%20to%20enter%20the%20work%20force%21%21%21,w_500,x_50,y_810/
UPDATE: I figured out how to get it to not do '...' after 2 lines - where with default or positive line spacing it will automatically expand the height as needed to fit additional lines, if you provide an explicitly stated "HEIGHT" = ### value then it works properly.
Please sign in to leave a comment.