Can a text overlay be auto wrapped?

After you've created the required text overlay, you can easily add text overlays to any of your Cloudinary images. i.e.,:

http://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.,:

http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:helv_bd_24_blue:This%20is%20an%20example%20of%20a%20long%20text/couple.jpg

  

You can either adjust the text's size, by specifying the required width while using  the 'scale' crop mode:

http://res.cloudinary.com/demo/image/upload/w_200,o_30/w_200,c_scale,l_text:helv_bd_24_blue:This%20is%20an%20example%20of%20a%20long%20text/couple.jpg

 

You can set the width by percentage of the original text's size, for example 50% (width => 0.5):

http://res.cloudinary.com/demo/image/upload/w_200,o_30/w_0.5,c_scale,l_text:helv_bd_24_blue:This%20is%20an%20example%20of%20a%20long%20text/couple.jpg

 

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):

http://res.cloudinary.com/demo/image/upload/w_200,o_30/w_0.9,c_scale,fl_relative,l_text:helv_bd_24_blue:This%20is%20an%20example%20of%20a%20long%20text/couple.jpg

 

You can use the newline character ('\n') to manually set new lines (by using the URL escaped version - '%0A'):

http://res.cloudinary.com/demo/image/upload/w_200,o_30/l_text:helv_bd_24_blue:This%20is%20an%20%0Aexample%20of%20%0Aa%20long%20text/couple.jpg


You can also use the 'fit' crop mode alongside the required width in order to automatically wrap the text:

http://res.cloudinary.com/demo/image/upload/w_200,o_30/w_200,c_fit,l_text:helv_bd_24_blue:This%20is%20an%20example%20of%20a%20long%20text/couple.jpg

Note that wrapping doesn't work with percents width.

For more information:
http://cloudinary.com/documentation/image_transformations#adding_multi_line_text

Have more questions? Submit a request

Comments

Powered by Zendesk