Text centered within an area
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:
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:
Thanks!
-
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 -
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:
Hope this helps, please let me know if you have any further questions.
Thanks,
Raya0 -
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 -
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 -
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:
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 -
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
Post is closed for comments.
Comments
6 comments