Using the Image Hot-Spot Feature in a Next.js Project

Hello,
i’m trying to find out how to use the image hot-spot feature in my next-js project.
How can i display the image on my nextjs page the same way as the Sanity studio already displays the image underneath?

Is it just set with css (object-position:) or how can i make use of the hot-spot cropping?

Thank!

Is it such a stupid question, that nobody wants to answer or does this nobody know, didn't find any useful resources online 😅

Hey ! Not a stupid question at all. Most likely no one was able to look at this until now. To clarify, are you trying to display all of those crop options or a single one you set in the Studio?

Thanks for your response, i‘m trying to recreate something similar like the preview in sanity studio. So for example the editor sets the focus point onto the person like in the example in the screenshot, and when the image gets responsive scaled the focus point gets moved into view, or stay in view

Most of that is going to need to be handled inside of the component in your frontend. However, you can use the Image URL Builder to fetch the images as those sizes directly.

Yes i‘m using this image url builder, so far it works very good with NextImage but it seems its not respecting the focus point, so i‘m not quite sure, how to use it in the frontend.

But i will double check to be sure, i‘m not overriding anything with css

When you build out the URL it won't automatically apply those, you need to pass your focal point and crops in. If you've set them on the image in the Studio, they'll be available in your asset's metadata.

Ahh.. now i get the point! I know what you mean! That was the missing part i didn't understand i think. Thanks i will try that

I still struggle with the image url builder, tbh 😅

Yeah its completely logical if you think about, but i don't know why, i didn't think about to pass the meta data from sanity into the urlbuilder, for no reason my brain thought the sanity response and url builder is the same, like passing the crop settings in to find out what are the crop settings 😅

Sorry me again, i still don’t get it what values i have to use for the urlbuilder, i checked the preview in Sanity Studio (which is using the correct crop settings from sanity lol) the url parameters are like this: rect=1716,50,3244,3244&w=35&h=35&fit=crop&dpr=2 | But when i inspect the data i get from sanity, my values are in the 0.xxx area (as you can see in the screenshot). how is this rect values calculated for example if sanity delivers completly different values.

Would you like to try next-sanity-image? I love their functionality and so far it worked fine.I will have a look later this week but we are a bit shortstaffed bc of holidays, so things might take a bit longer…

Yes i thought about next-sanity-image too, but i got upstream dependency conflicts.

could you send us the groq data you receive?We think we might know what it could be, but need to check

Sure, here is how i query the data, the type interface and the result. Or do you need it in a file (not screenshots)? Thanks

We think we know what’s wrong: you’re incorrectly calling the

rect

method, which is what you’d do to manually specify a crop in pixels and overrides the crop/hotspot settings in the studio.
Instead, you should be passing the entire image object (including crop and hotspot) when calling

urlFor

. It will do the rest, when you set a width and height.
These are the relevant parts of
the docs .

When constructing the URL:

In order for hotspot/crop processing to be applied, the

image

record must be supplied, as well as both width and height.

The

rect

method should only be used when you want to override the default image crop, specifying a new crop in pixels:

Specify the crop in pixels. Overrides any crop/hotspot in the image record.

Oh Yes 🥳 thanks now it works! I only passed width into the url parameter without height. such a simple change with such a big improvment. Thank you for your help!

pleasure… your problem was you did too much work 😉 so it was pretty easy to solve

Yes definitely, the plugin is awesome, didn't think that the plugin handles everything automatically 😅