Dynamic coordinate position for text overlays

Alan Thomas

January 25, 2021 18:00

Hello All,

Is it possible to set the coordinates of text overlay position dynamically? I want my text overlay to be at the same position irrespective of the size of the base image.

If you look at the below-added images, the overlay position got changed when the base image changed. I want the position of text overlay to remain the same.

Image 1: https://res.cloudinary.com/.../wearlee_-DSC_9228-2.jpg.

Image 2: https://res.cloudinary.com/.../2/0/20fea30191-700946_1.jpg

0

• 

  Victor Li

  January 26, 2021 01:44

  Hi Alan,

  Thanks for reaching out to us! Unfortunately without the full links including the transformations you tried to apply, I can't view the examples you provided. If you'd like, you can send a ticket to us directly at https://support.cloudinary.com and you can maintain your privacy while sharing links with us.
  
  Otherwise, there are a few ways to place overlays that could be of use to you.

  1) Method 1 is to use directional gravity. Consider this example: https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue,g_north_east/sample.jpg
  
  The Cloudinary logo is placed in the northeast corner of the sample image regardless of dimensions of the sample image.

  2) Method 2 is to manually set x- and y-coordinates. Consider this example: https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue,x_100,y_100/sample.jpg
  
  The Cloudinary logo, without a gravity direction specified, starts in the center but is shifted down and to the right by 100 pixels. This can be combined with method 1 in order to place the logo towards one direction but offset by a certain amount, like so: https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue,g_north_west,x_20,y_20/sample.jpg

  3) Method 3 is to use user-defined variables. Consider this example: https://res.cloudinary.com/demo/image/upload/$width_600,$height_400,w_$width,h_$height/l_cloudinary_icon_blue,w_$width_mul_0.5,g_north_west,x_$width_div_20,y_$height_div_20/sample.jpg
  
  Here we set variables width and height to 600 and 400 respectively. We then not only resize the sample image to fit these dimensions, we set the logo's width to width multiplied by 0.5 (which equals 300) and offset vertically and horizontally by height divided by 20, and width divided by 20 respectively.
  
  For more information, please refer to the documentation articles here:
  https://cloudinary.com/documentation/image_transformations#placing_overlays
  https://cloudinary.com/documentation/user_defined_variables#user_defined_variables_overview

  Regards,
  Victor

  0

Post is closed for comments.