Overlay a fetched image over itself (with transfor

Question

I would like to generate an image with to versions of the same fetch image, like this one:

Here are the two versions:

The background: https://res.cloudinary.com/nho/image/fetch/w_1024,h_512,c_thumb,g_auto,q_auto,f_auto/e_brightness:80/e_blur:3000/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg

The overlay: https://res.cloudinary.com/nho/image/fetch/w_1024,h_512,c_fit,q_auto,f_auto/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg

I don't understand how to do that with the documentation for overlays and for chained transformations.

Answer 1

Cloudinary does not currently support using fetched images for overlay purposes. If the source for these images (e.g. https://nicolas-hoizey.com) is known in advance then automatic-upload may be preferable.

Then, achieving the desired effect is done with the following transformation sequence: http://res.cloudinary.com/demo/image/upload/w_500/u_upload:2016:08:a-bridge-not-so-far,ar_2:1,c_scale,e_blur:2000,o_70,w_0.7,c_crop/h_1.0,fl_relative.layer_apply/2016/08/a-bridge-not-so-far.jpg

UPDATE: Cloudinary just announced a new support for overlaying dynamically fetched images. This is done by encoding the remote URL to Base64, e.g. (rails):

Base64.urlsafe_encode64("https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg")
 => "aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNi8wOC9hLWJyaWRnZS1ub3Qtc28tZmFyLmpwZw=="

Then the transformation URL will look something like: https://res.cloudinary.com/demo/image/fetch/w_500/u_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNi8wOC9hLWJyaWRnZS1ub3Qtc28tZmFyLmpwZw==,ar_2:1,c_scale,e_blur:2000,o_70,w_0.7,c_crop/h_1.0,fl_relative.layer_apply/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg