Overlay - Text and Images

Sriram
Sriram Member Posts: 1 ✭
edited September 12 in Developer APIs

I need help adding a text overlay with a specific background shape to my base image, similar to the example image I've provided. Here are the details:

  1. Text with Background Shape: I want to overlay text on my image with a specific background shape (e.g., a circle or a triangle). The background shape should be customizable in terms of color based on the user's choice.
  2. Auto-Fitting Text: The text should automatically fit within the chosen shape.

I can easily add image overlays like a logo at any position, but I'm struggling with adding text overlays that have a specific shape in the background.

Has anyone done this before and can provide guidance on how to achieve this using the upload method?

image.png

Tagged:

Comments

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 103

    Hi @Sriram ,

    You can overlay a black circle image and add a text layer to be relative to that image.
    Here is an example:

    https://res.cloudinary.com/demo/image/upload/l_black_circle/l_text:Arial_28_center:250%20p,co_rgb:FFFFFF,w_0.7,fl_relative/fl_layer_apply/w_0.15,fl_relative/fl_layer_apply,g_north_west,y_16,x_25/cld-sample-5.jpg

    Screenshot 2024-07-31 at 14.15.46.png



    If the text is larger, it will fit the black image circle due to fl_relative the flag. Here is an example:

    https://res.cloudinary.com/demo/image/upload/l_black_circle/l_text:Arial_28_center:250%20$$$$$,co_rgb:FFFFFF,w_0.7,fl_relative/fl_layer_apply/w_0.15,fl_relative/fl_layer_apply,g_north_west,y_16,x_25/cld-sample-5.jpg

    Screenshot 2024-07-31 at 14.20.18.png


    I hope you find it useful.
    Please let me know if you have additional questions.

    Best Regards,

    Wissam

Categories