Watch a live product demo 👀 See how Sanity powers richer commerce experiences

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

19 replies
Last updated: Jul 27, 2022
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?

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
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 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
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
. 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
record must be supplied, as well as both width and height.
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– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing