Getting the original image ratio without adding it to the GROQ query in Sanity.io
14 replies
Last updated: Mar 30, 2021
T
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:
but this doesn’t seem very scalable. Is there a way to get the ratio of the image by using, for example, the
const query = `*[_type == "solutions-singleton"] {
...,
"platformsImage": fields.platforms.platformsImage.asset->{
url,
metadata {
dimensions
}
},
}`@sanity/image-urlhelper?
Mar 29, 2021, 10:20 AM
T
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
T
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
T
Doesn’t work very well with Typescript as well, since the response is different from the
SolutionsSingletontype generated by
sanity-codegen
Mar 30, 2021, 6:49 AM
T
So the response would be something like:
type Response = SolutionsSingleton & {
platformsImage: {
url: string
metadata: {
dimensions: string
}
}
}Mar 30, 2021, 6:50 AM
T
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
T
yeah I feel you, my approach is not too different than yours. I put the common fragments into a string & a type, i.e
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
const imageFragment = ({ fields }) => `${fields}.asset -> { alt, url, etc }`
export type ImageResult = { alt: string, url: string, etc: ... }Mar 30, 2021, 6:55 AM
T
Thanks for the snippet, I’ll check 👍
Mar 30, 2021, 6:56 AM
T
The
so you should be able to get the aspect ratio by just looking at it
🙂
_idof the asset document that the image field has a reference to is on the format
image-<sha1hash>-<width>x<height>.<extension>
🙂
Mar 30, 2021, 1:50 PM
T
Wow, that's a neat trick!
Mar 30, 2021, 2:11 PM
T
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
T
Woa, that’s nice, thanks!
Mar 30, 2021, 2:43 PM
T
There is no out-of-the-box option included in
@sanity/image-urlto retrieve the ratio of the image though right? Would be a really handy feature!
Mar 30, 2021, 2:43 PM
T
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
T
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.