Watermark using .url?

[reintroducing]

I'm trying to port some jQuery code using cloudinary over into our new React app and using the core package. I'm generating dynamic URLs based on some props and just realized I have no clue how to apply the watermark and its properties.

Prior code:

$.cloudinary.url(image.id, {
    transformation: [{
            width: 100,
            height: 100,
            crop: 'fill',
            ...etc
        }, {
            overlay: 'watermark-name',
            crop: 'scale',
            gravity: 'south_east',
            width: 80,
            x: 15,
            y: 15,
            opacity: 60
        }]
});

So the watermark properties were set on the transformation array as the second argument. How is this done now?

[nadavofi]

Hi, please see if the code below helps:

var cl = cloudinary.Cloudinary.new( { cloud_name: "demo"});

cl.url("sample", {
    transformation: [{
            width: 100,
            height: 100,
            crop: 'fill',
        }, {
            overlay: 'cloudinary_icon',
            crop: 'scale',
            gravity: 'south_east',
            width: 80,
            x: 15,
            y: 15,
            opacity: 60
        }]})

Output URL: http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_100/c_scale,g_south_east,l_cloudinary_icon,o_60,w_80,x_15,y_15/sample

[reintroducing]

That worked, thanks. You should probably add this to the docs somewhere so the next person like myself looking for it can find it easier.

As a general note, a lot of your docs point to the jQuery plugin on how to do things. Since this is not jQuery dependent anymore you guys should probably update these to reflect the new changes and ways to do things without using jQuery. Would really help a lot of people, including myself, out. There is a big shift of people moving to frameworks like React and others so I would urge you to do that. :)