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

19 replies
Last updated: Jul 27, 2022
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!
Jul 18, 2022, 11:55 AM
Is it such a stupid question, that nobody wants to answer or does this nobody know, didn't find any useful resources online 😅
Jul 18, 2022, 5:13 PM
Hey
user C
! 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?
Jul 18, 2022, 5:27 PM
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
Jul 18, 2022, 5:35 PM
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.
Jul 18, 2022, 5:39 PM
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.
Jul 18, 2022, 5:56 PM
But i will double check to be sure, i‘m not overriding anything with css
Jul 18, 2022, 6:00 PM
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.
Jul 18, 2022, 6:23 PM
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
Jul 18, 2022, 6:32 PM
I still struggle with the image url builder, tbh 😅
Jul 18, 2022, 6:33 PM
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 😅
Jul 18, 2022, 6:38 PM
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.
Jul 18, 2022, 7:43 PM
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…
Jul 19, 2022, 1:43 PM
Yes i thought about next-sanity-image too, but i got upstream dependency conflicts.
Jul 20, 2022, 7:57 AM
user C
could you send us the groq data you receive?We think we might know what it could be, but need to check
Jul 21, 2022, 1:37 PM
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
Jul 21, 2022, 2:00 PM
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.
Jul 26, 2022, 11:36 AM
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!
Jul 26, 2022, 11:53 AM
pleasure… your problem was you did too much work 😉 so it was pretty easy to solve
Jul 26, 2022, 7:11 PM
Yes definitely, the plugin is awesome, didn't think that the plugin handles everything automatically 😅
Jul 27, 2022, 5:44 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.