Is there a way to crop custom coordinates using the React/NextJS SDK?

devsatnakuru

Hi!

We use the nextJS component for displaying cloudinary images which works great. We want to build in the ability for admins to crop and move images around for profile pictures, which gives us a "zoom/scale" value and an x/y coordinate. It looks like both are supported via API, but not clear how we'd do this in our react components. Any ideas?

It looks like we can use zoom with custom coordinates here — https://next.cloudinary.dev/cldimage/configuration#zoom

Cheers

DannyFromCloudinary

Hey @devsatnakuru ! Thanks for the question.

I can't speak for the Next SDK because it's actually a community built library, rather than one we've made ourselves and officially released, but in React you'd do .gravity(focusOn(custom())).

Here's an example on my account:

import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { custom } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("training/zelda-profile.jpg").resize(
  crop()
    .width(1000)
    .height(1250)
    .gravity(focusOn(custom()))
);

https://res.cloudinary.com/dannyv/image/upload/c_crop,g_custom,h_1250,w_1000/training/zelda-profile.jpg

I hope this helps! Please let us know if you have any questions.

Thanks,
-Danny

devsatnakuru

Ah thanks for the help. How would the zoom work in your above example? For example, adding z_2 in the crop doesn't seem to do anything.

e.g. a 1500x1500 image that's coordinates more to the middle but then zoomed in by two

https://res.cloudinary.com/dannyv/image/upload/c_crop,h_1500,w_1500,x_500,y_500,z_2/training/zelda-profile.jpg

DannyFromCloudinary

You're very welcome.

When using c_crop, zoom will only work if the width and height parameters aren't provided. For instance:

• Zoom with dimensions: https://res.cloudinary.com/dannyv/image/upload/c_crop,g_custom,h_500,w_500,z_0.125/training/zelda-profile.jpg
• Zoom without dimensions: https://res.cloudinary.com/dannyv/image/upload/c_crop,g_custom,z_0.125/training/zelda-profile.jpg

Alternatively, you could use c_thumb

• https://res.cloudinary.com/dannyv/image/upload/c_thumb,g_custom,h_300,w_200,z_0.25/training/zelda-profile.jpg
• https://res.cloudinary.com/dannyv/image/upload/c_thumb,g_custom,h_300,w_200,z_0.13/training/zelda-profile.jpg

For more information and further examples, please see the section on the zoom parameter here in our Transformation API docs: https://cloudinary.com/documentation/transformation_reference#z_zoom

Of course, if you have any further questions, please don't hesitate to ask. I or another member of the team will be happy to help :)

-Danny

devsatnakuru

None of the above examples seem to support custom coordinates? e.g. x_0,y_0. I can't seem to find a combination that allows me to control Zoom AND X/Y coordinates. The link i sent above allows me to specify coordinates, but then zoom doesn't work. Your links allows me to control zoom but then I can't get coordinates to work.

Any ideas on the magic combo I can use that allows me to control both?

For example:

• x_100
• y_100
• w_200
• h_200,
• z_2

devsatnakuru

Note. have managed to resolve this on my own :) Thanks for all your help!