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

  • Avatar
    Co.tribute Cloudinary

    Hi Friends!

    Is it possible to do an image overlay, then text on top of that overlay?  Would we simply have to order the transformations to match the layer order we'd like to use?



  • Avatar
    Daniel Mendoza

    Hi @Co.tribute Cloudinary

    You are correct, the order in the transformation would need to match the layer order.

    I have included an example that adds an image overlay, followed by a text overlay:!,co_red/sample.jpg

Please sign in to leave a comment.