Multiple text overlays with relative position

Keshia Niemegeerts

April 22, 2022 15:03

Hi,

I need to add some text to an image. This text exists of 2 pieces:

Text 1:
- needs to have word wrap, so can be on multiple lines. (The length of this text can vary)

Text 2: 
- needs to be placed at the bottom of Text 1.

The issue is the placement of Text 2. The placement of this text is relative to Text 1 and I don't know how to do this.

This is what I have now:
https://res.cloudinary.com/optis/image/upload/c_scale,w_1200/c_fit,co_white,l_text:Arial_60_bold:Text%201%20which%20can%20be%20on%20multiple%20lines,w_1000/co_white,l_text:Arial_20_italic:Text%202%20which%20needs%20to%20be%20at%20the%20bottom%20of%20text%201/fl_layer_apply,g_north_west,x_0,y_150/fl_layer_apply,g_north_west,x_50,y_50/care_landscape_ygxeye.png

-> Here you can see I have hardcoded the X and Y values. As soon as Text 1 gets bigger and will result in 3 lines. Text 1 will be overlapping Text 2.

0

• Official comment

  

  Danny Valentine

  April 23, 2022 10:44

  Hi Keshia.

  Thanks for getting in touch. One way to accomplish this would be to use a user-defined variable. What we can do is take the height of line 1, save it to a variable and then offset the Y position of line 2 by this amount.

  We can do this by adding ,$lineHeight_h to the very end of line 1's transformation, which saves the line's height (h) in the variable $lineHeight. We then set the Y offset of line 2 to y_50_add_$lineHeight.

  When put together, you should get something like this:

  Single line: https://res.cloudinary.com/demo/image/upload/c_scale,w_1200/c_fit,co_white,l_text:Arial_60_bold:Text%201,w_1000,$lineHeight_h/co_white,l_text:Arial_20_italic:Text%202%20which%20needs%20to%20be%20at%20the%20bottom%20of%20text%201/fl_layer_apply,g_north_west,x_0,y_50_add_$lineHeight/fl_layer_apply,g_north_west,x_50,y_50/beach.jpg
  Two lines: https://res.cloudinary.com/demo/image/upload/c_scale,w_1200/c_fit,co_white,l_text:Arial_60_bold:Text%201%20which%20can%20be%20on%20multiple%20lines,w_1000,$lineHeight_h/co_white,l_text:Arial_20_italic:Text%202%20which%20needs%20to%20be%20at%20the%20bottom%20of%20text%201/fl_layer_apply,g_north_west,x_0,y_50_add_$lineHeight/fl_layer_apply,g_north_west,x_50,y_50/beach.jpg
  Multiple lines: https://res.cloudinary.com/demo/image/upload/c_scale,w_1200/c_fit,co_white,l_text:Arial_60_bold:Text%201%20can%20take%20up%20as%20many%20lines%20as%20you%20decide%20to%20throw%20at%20it%20and%20the%20text%202%20line%20will%20be%20moved%20automagically.%20:),w_1000,$lineHeight_h/co_white,l_text:Arial_20_italic:Text%202%20which%20needs%20to%20be%20at%20the%20bottom%20of%20text%201/fl_layer_apply,g_north_west,x_0,y_50_add_$lineHeight/fl_layer_apply,g_north_west,x_50,y_50/beach.jpg

  The examples above use our demo account, just for posterity, but if you replace the cloud name with your own, and beach.jpg with care_landscape_ygxeye.png, you'll see these same examples working on your account.

  I hope this helps. If you have any further questions, please feel free to reply here or raise a ticket via our Support Center and we'll do our best to help.

  Thanks,
  -Danny
• 

  Keshia Niemegeerts

  April 25, 2022 09:43

  Hey Danny,

  Thanks for the quick response!
  We got it working now! Awesome!

  Keshia

  0
• 

  Danny Valentine

  April 26, 2022 08:59

  You're very welcome, Keshia.

  If you have any other queries, just get in touch :)

  Thanks,
  -Danny

  0

Post is closed for comments.