How to add a text overlay?

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.
Fore more information:
http://cloudinary.com/documentation/upload_images#text_layers

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

Have more questions? Submit a request

Comments

  • Avatar
    Raj Subramanian

    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?

  • Avatar
    Itay Taragano

    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

  • Avatar
    iti tomar

    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

  • Avatar
    Itay Taragano

    Can you please share the URL generated by this code so we'll be able to further understand the issue?

  • Avatar
    Frankie Kam

    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!

  • Avatar
    Siphiwe

    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>`

    Edited by Siphiwe
  • Avatar
    Roee Ben-Ari

    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

    Edited by Roee Ben-Ari
  • Avatar
    Siphiwe

    Thank you @Roee. That sorted me out

Powered by Zendesk