x/y offset for tiling

Alinea Interactive

February 25, 2021 12:10 Edited

I can tile an overlay image using the steps mentioned here:

https://support.cloudinary.com/hc/en-us/articles/207161715-How-to-add-the-tiling-repeating-watermark-effect-to-your-images-

But I would then like overlay the same image with an x offset so that the new image overlays appear in between the existing overlay images.

The desired effect would be similar to this: The heart is shifted left by 50% of it's width before it is tiled.

Adding an x_<> transform doesn't work:

https://res.cloudinary.com/demo/image/upload/
l_cloudinary_icon,w_1.5,c_lpad,e_brightness:200,o_50/w_0.3,fl_relative/fl_layer_apply.tiled/
l_cloudinary_icon,w_1.5,c_lpad,e_brightness:200,o_50/w_0.3,fl_relative/fl_layer_apply.tiled,x_200/
kitten_fighting.gif

0

• 

  Mo Ip

  February 26, 2021 02:54

  Hi,

  Would this be what you are looking for?

  https://res.cloudinary.com/eyalkatzt/image/upload/$w_w/l_1px/l_cloudinary_icon,w_1.5,c_pad,e_brightness:200,o_50/w_$w_mul_0.3/fl_layer_apply/l_cloudinary_icon,w_1.5,c_pad,e_brightness:200,o_50,e_colorize,co_pink/w_$w_mul_0.3/fl_layer_apply,x_75/fl_layer_apply.tiled/sample

  Best,

  Mo

  0
• 

  Alinea Interactive

  February 26, 2021 20:10

  Thanks Mo, that looks like exactly what I'm looking for.

  0
• 

  Mo Ip

  February 26, 2021 20:59

  Great Alinea,

  Glad I could help.

  Let us know if you need any further assistance.

  Best,

  Mo

  0
• 

  Alinea Interactive

  March 04, 2021 09:55

  Hi Mo, I'm back!

  I managed to get your example working with text layers:

  https://res.cloudinary.com/eyalkatzt/image/upload/$w_w/l_1px/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply,x_100/fl_layer_apply.tiled/sample

  Which I was really pleased with until I removed /$w_w/l_1px/ which stopped it from working and I don't know why!

  However, that's not the main reason for coming back to you (although I'd still like to know the answer to increase my Cloudinary knowledge):

  I took the url above and tried to get it to work on my account:

  https://res.cloudinary.com/ffspud/image/upload/$w_w/l_1px/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply,x_100/fl_layer_apply.tiled/
  v1614164281/website/development/swirls-WATERMARKBASE.jpg

  But it didn't work, so I tried to use the basic sample image in my account: https://res.cloudinary.com/ffspud/image/upload/sample

  https://res.cloudinary.com/ffspud/image/upload/$w_w/l_1px/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply,x_100/fl_layer_apply.tiled/sample

  But that also didn't work.

  Can you tell me where I'm going to wrong please.

   

   

  0
• 

  Itay Taragano

  March 06, 2021 02:14

  Hi Alinea,

  The reason the transformation failed when you removed /$w_w/l_1px/ was because when that overlay (l_1px) was removed, then there was an unnecessary /fl_layer_apply/ (a bit later in the URL). Removing that one would make it work:
  https://res.cloudinary.com/eyalkatzt/image/upload/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply,x_100/fl_layer_apply.tiled/sample

  The reason why it failed on your account is that this transformation did include the `l_1px` part, which could only work if your account had a resource with the public_id of `1px`, and since that doesn't seem to be the case at the moment, that's why the transformation failed. Fortunately, it seems like that part is actually unnecessary, and therefore you should be able to safely remove it, similar to the example above:
  https://res.cloudinary.com/ffspud/image/upload/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/l_text:Arial_25:INTERNAL%20USE%20ONLY,a_-45,co_black,o_20/fl_layer_apply,x_100/fl_layer_apply.tiled/v1614164281/website/development/swirls-WATERMARKBASE.jpg

  Let me know if this works for you?

  Thanks,
  Itay

  0

Post is closed for comments.