How to add a text overlay?

Follow

Comments

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

  • 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

  • Avatar
    Siphiwe

    Thank you @Roee. That sorted me out

Please sign in to leave a comment.