Skip to content
🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Get help on Slack

Getting the original image ratio without adding it to the GROQ query in Sanity.io

14 replies
Last updated: Mar 30, 2021
Hi guys, i was wondering if there is a way to get the original image ratio without adding it to the GROQ query. I’d like to know the ratio of the image without restricting the content managers too much by fixing them in the schema. We’ve used the GROQ way before, like this:
const query = `*[_type == "solutions-singleton"] {
  ...,
  "platformsImage": fields.platforms.platformsImage.asset->{
    url,
    metadata {
      dimensions
    }	
  },
}`
but this doesn’t seem very scalable. Is there a way to get the ratio of the image by using, for example, the 
@sanity/image-url
helper?
Mar 29, 2021, 10:20 AM
Hi Jorrit, not sure if there’s any other way to get the image ratio… but why is the GROQ approach not scalable? If it’s just the syntax, you can turn it into a reusable string and use it whenever you need to query for images.
Mar 30, 2021, 6:46 AM
Well, say I have a page with 10+ images of which I’d like to know the ratio. I’ll have to specify each image into the GROQ query, right?
Mar 30, 2021, 6:47 AM
Doesn’t work very well with Typescript as well, since the response is different from the 
SolutionsSingleton
type generated by 
sanity-codegen
Mar 30, 2021, 6:49 AM
So the response would be something like:

type Response = SolutionsSingleton & {
  platformsImage: {
    url: string
    metadata: {
      dimensions: string
    }
  }
}
Mar 30, 2021, 6:50 AM
So you’d have to customize the typed response for every page. It can work, just doesn’t seem really ideal to me
Mar 30, 2021, 6:51 AM
yeah I feel you, my approach is not too different than yours. I put the common fragments into a string & a type, i.e
const imageFragment = ({ fields }) => `${fields}.asset -> { alt, url, etc }`

export type ImageResult = { alt: string, url: string, etc: ... }
And just include them where I needed. Not ideal ideal, but it’s not too painful either. Until we get a codegen that can generate types per query, I think this is as good as it gets
Mar 30, 2021, 6:55 AM
Thanks for the snippet, I’ll check 👍
Mar 30, 2021, 6:56 AM
The 
_id
of the asset document that the image field has a reference to is on the format
image-<sha1hash>-<width>x<height>.<extension>
so you should be able to get the aspect ratio by just looking at it
🙂
Mar 30, 2021, 1:50 PM
Wow, that's a neat trick!
Mar 30, 2021, 2:11 PM
Yeah 🙂 we use this in 
@sanity/image-url
, btw, so if you use that one you should be good already
Mar 30, 2021, 2:21 PM
Woa, that’s nice, thanks!
Mar 30, 2021, 2:43 PM
There is no out-of-the-box option included in 
@sanity/image-url
to retrieve the ratio of the image though right? Would be a really handy feature!
Mar 30, 2021, 2:43 PM
yeah, you're right. Looks like it just uses it internally but doesn't expose it. Feel free to open an issue (or even better, a PR) for it in the github repo 🙂
Mar 30, 2021, 2:48 PM
Will have a look at it, thanks 🖐️
Mar 30, 2021, 2:49 PM

Sanity– build remarkable experiences at scale

Sanity is a 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.

Get started for freeExplore the demo

Was this answer helpful?