Image dynamic text overlay

Kyle

October 29, 2018 19:50

I am trying to accomplish a dynamic text overlay.

I have a website that offers custom business products and I need to overlay some info like name, location, category on a product image based on the user that is logged in. My database will be able to supply the information using an ID that has been assigned to each of my customers.

I need 3 overlays and they need to size according to the amount of text characters in each field. It would be fine if a short business name didn't expand to fill the space but I do need the text size to shrink to fit the space as a name gets too long.

Anyone have any advice?

0

• 

  Kyle

  October 30, 2018 22:50

  Edit:

  Here is an example of the space and text needed.

  http://res.cloudinary.com/businessrate-co/image/upload/w_1200/g_south,x_0,y_0.215,w_900,c_fit,l_text:Arial_42_center:Parsed_Locality%20Top%2010/g_south,x_0,y_0.175,c_fit,l_text:Arial_42_center:Main_Category/g_south,x_0,y_0.13,c_fit,l_text:Arial_42_center:Business_Name/v1540846914/awardimageblur.png

  0
• 

  Raz Ziv

  November 01, 2018 12:10

  Hi Kyle,

  In order to limit the width of the overlay text so it will automatically shrink if needed, you can use c_limit,w_[desired_width] for each of the overlays.

  As your transformation components already use percentage values for `y`, I would suggest that you use the same for `w` as you cannot mix percentage values with absolute sizes in the same component. For example, in the URL that you've shared, you use `y_0.215,w_900`. In this case, w_900 is translated into 90000%, which is definitely not your desired behavior.

  Based on your example image, please find below a basic solution which you can modify according to your requirements:
  http://res.cloudinary.com/businessrate-co/image/upload/w_1200/g_south,x_0,y_0.215,w_0.7,c_limit,l_text:Arial_42_center:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPParsed_Locality%20Top%2010/g_south,x_0,y_0.175,w_0.7,c_limit,l_text:Arial_42_center:Main_Category/g_south,x_0,y_0.13,w_7,c_limit,l_text:Arial_42_center:Business_Name/v1540846914/awardimageblur.png

  Best,
  Raz

  0
• 

  Kyle

  November 16, 2018 17:33

  Thanks for the help. How do I modify this to allow for my website to pull the text in the 3 fields from a database?

  0
• 

  Raz Ziv

  November 19, 2018 15:03

  Kyle, you can first define variables and populate them with the text retrieved from your database, then replace the text part in your URL by concatenating the variables to the URL string in the right places.

  If you use our SDKs to generate your delivery URLs,  you can do the same for the value of the 'overlay' parameters that you pass when calling the relevant method.

  If you need additional assistance with the implementation, please open a new support ticket at https://support.cloudinary.com/hc/en-us/requests/new

  0

Post is closed for comments.