How to add a text overlay?




  • 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?:,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:

  • Avatar
    iti tomar



    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"})


    it is showing the overlay image but not showimng up in the UI any idea why????



  • 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:
    Hope this helps!

  • Avatar

    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 -

  • Avatar

    Thank you @Roee. That sorted me out

Please sign in to leave a comment.