Text centered within an area

Miguel Angel Salcedo

December 07, 2017 22:05

Hi, im trying to auto resize or at least center the text inside an area. Im doing this and want that the lastname of the user (wich is dynamic) to be centered on the jersey. 

Here is the example:

https://res.cloudinary.com/noir/image/upload/l_JerseyCAFC,w_1000,h_1000,c_scale/l_text:PT%20Sans_85_bold_center_letter_spacing_1:Salcedo,x_250,y_-150,co_rgb:ffffff/JerseyCAFC.png

So what i want is the text to be centered within an area and also if there is the possibility to crop the text if its larger than the area defined to fix this issues:

https://res.cloudinary.com/noir/image/upload/l_JerseyCAFC,w_1000,h_1000,c_scale/l_text:PT%20Sans_85_bold_center_letter_spacing_1:Ibarguengoitia,x_250,y_-150,co_rgb:ffffff/JerseyCAFC.png

Thanks!

0

• 

  Iggy van Lith

  November 01, 2021 14:51

  It's an old question but for people coming here after a Google search, like me, to find out how to get something like this working this is how.

  You can do it with a combination of g_center, centering the text and applying a width to the text layer with w_{number}.

  With x_{number} you can manually find the correct x-position for the center of your text.

  For the behaviour of the text you can use c_fit for example to wrap it to multiple lines when too long.

  Taking the image from the OP, it could be something like this:

  https://res.cloudinary.com/noir/image/upload/l_JerseyCAFC,w_1000,h_1000,c_scale/g_center,l_text:PT%20Sans_85_bold_center_letter_spacing_1:Any%20text,x_290,y_-140,w_400,c_fit,co_rgb:ffffff/JerseyCAFC.png

  Note multi lines doesn't work that nicely yet with current settings. That would need some more tweaking, but you can keep the x and y fixed and changing the text is enough.

  1
• 

  Ryan Dee

  November 15, 2021 22:38

  This is one possible approach... use https://cloudinary.com/documentation/cloudinary_ai_content_analysis_addon to get the shirt position on upload, then set the x,y accordingly.  You would have to experiment with this, but let us know if you get stuck or have questions.

  Ryan Dee

  1
• 

  Miguel Angel Salcedo

  December 07, 2017 22:27

  I suppose the logic to do this is to create the text inside an image, then overlay that image in the position i want on the jersey. Can somebody help me?

  Thanks!

  0
• 

  Raya Straus

  December 12, 2017 09:48

  Hi Miguel,

  Thank you for contacting us.

  The best approach to center and fit the text to the image is to dynamically change the text size and the x and y positioning of each name. 

  Please take a look at the following examples:

  https://res.cloudinary.com/noir/image/upload/l_JerseyCAFC,w_1000,h_1000,c_scale/l_text:PT%20Sans_85_bold_center_letter_spacing_1:Salcedo,x_290,y_-150,co_rgb:ffffff/JerseyCAFC.png

   

  https://res.cloudinary.com/noir/image/upload/l_JerseyCAFC,w_1000,h_1000,c_scale/l_text:PT%20Sans_65_bold_center_letter_spacing_1:Ibarguengoitia,x_287,y_-150,co_rgb:ffffff/JerseyCAFC.png

   

  Hope this helps, please let me know if you have any further questions.

  Thanks,
  Raya

  0
• 

  Miguel Angel Salcedo

  December 12, 2017 15:49

  Hi Raya, i know that solution, what im asking is how to do that automatically and dynamic. because manually its easy.

  What i was thinking is to first render the text inside an empty png graphic with a defined width, then center it and automatically resize the text to fit inside that empty png, then overlay the png in a sattic position, something like this:

   

  user writes text, then the text renders inside a png of 200px so that way it automatically fits inside the png

  User input ---------> [Render text inside png] that way automatically the text fits the png --------> PNG overlay in a static position over the jersey.

  Is there a way to do that?

  0
• 

  Raya Straus

  December 13, 2017 09:43

  Hi Miguel,

  Thank you for the clarification.

  Currently positioning a text overlay cannot be done automatically. However, this is an interesting use case that I will forward to our product team for future consideration.

  Thanks,

  Raya 

   

   

   

  0

Post is closed for comments.