This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Adding a layer to a transformation that already has an added background

Follow
Avatar
Walter van den Berg

Hi, 

I have an image that already has an added background, like so:

https://res.cloudinary.com/demo/image/upload/b_rgb:efefef,bo_1000px_solid_rgb:efefef,c_pad,w_2600/b_rgb:efefef,c_pad,dpr_1,w_590,h_810,f_auto,q_auto,fl_progressive/sample.jpg

I want to add a layer with something like a watermark, and it should get on the added background, top left, but if i try that, i can only get on the original image:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue/fl_layer_apply,g_north_west/b_rgb:efefef,bo_1000px_solid_rgb:efefef,c_pad,w_2600/b_rgb:efefef,c_pad,dpr_1,w_590,h_810,f_auto,q_auto,fl_progressive/sample.jpg

or, with some fiddling, the the watermark pushes away the original image:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue/fl_layer_apply,g_north_west,y_-1800,x_-1000/b_rgb:efefef,bo_1000px_solid_rgb:efefef,c_pad,w_2600/b_rgb:efefef,c_pad,dpr_1,w_590,h_810,f_auto,q_auto,fl_progressive/sample.jpg

How do i keep the original image in it's place an add a watermark top left in the added background?

Thanks in advance!!

 

0

Comments

7 comments

Sort by Date Votes
  • Avatar
    Danny Valentine

    Hi Walter.

    Thanks for getting in touch.

    You could add the watermark as the very last component of the transformation and this will add the overlay at its native size. You can then resize it to suit your needs. For instance:

    https://res.cloudinary.com/demo/image/upload/b_rgb:efefef,bo_1000px_solid_rgb:efefef,c_pad,w_2600/b_rgb:efefef,c_pad,dpr_1,w_590,h_810,f_auto,q_auto,fl_progressive/l_cloudinary_icon_blue,w_150/fl_layer_apply,g_north_west/sample.jpg

    I hope this helps. Please let me know if you have any followup questions.

    Thanks,
    -Danny

    0
    Comment actions Permalink
  • Avatar
    Walter van den Berg

    Ahh yes that's exactly what I need! Thanks Danny!

    0
    Comment actions Permalink
  • Avatar
    Danny Valentine

    You're very welcome, Walter :)
    You may also want to have a look at our cookbook which has lots of other great examples of different transformations.

    If you need help with anything else, feel free to post another topic here in the forums or raise a support ticket with us.

    Thanks,
    -Danny

    0
    Comment actions Permalink
  • Avatar
    Walter van den Berg

    Well, I do have a question that's interesting for the forum too; about moving on the y and x axis.

    On this page https://cloudinary.com/documentation/layers there's this:

    For example, to place a text overlay at a vertical distance of 5% from the bottom of the image (l_text:Times_100:Welcome/fl_layer_apply,g_south,y_0.05):

    But how would you move things more precise? I'm bad at math, 0.05 is for a 5 %, but can I move things 5.5 % too? If so, what's the notation?

    0
    Comment actions Permalink
  • Avatar
    Danny Valentine

    5.5% would be 0.055, however we actually only support up to two decimal places. Anything more than that, we just disregard (rather than rounding) so 0.059 would become 0.05.

    That being said, if you needed more precision, you could use pixel values by using x_ or y_ and the number of pixels you would like the offset to be.

    To demonstrate, here's the image from the layers documentation offset 20 pixels from the bottom by using y_20:
    https://res.cloudinary.com/demo/image/upload/l_text:Times_100:Welcome/fl_layer_apply,g_south,y_20/sample.jpg

    I hope that suits your use case, but if not, let us know and we'll see what else we can come up with :)

    0
    Comment actions Permalink
  • Avatar
    Walter van den Berg

    That's exactly what I needed again, thanks! 
    Perhaps you can add these pointers to the manual on the website? 

    0
    Comment actions Permalink
  • Avatar
    Danny Valentine

    We're always happy to help!

    I'll pass your feedback on to our documentation team and see if we can improve our docs.

    Give us a shout if you have any other queries.

    0
    Comment actions Permalink

Post is closed for comments.