Sorting out a `groq` query for resolved image URL and dimensions
15 replies
Last updated: Sep 27, 2021
J
Hi, I'm trying to sort out a
But that doesn't seem to work with the latest version of the API. Would also still need a way to get the width and height of the image.
groqquery that would give me a resolved image url, along with the image width and height. I noticed I could get some of what I want with the V1 version of the api like so:
*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{'headshot': {'url': headshot.image.asset->url, 'alt': headshot.alt}, ...} Sep 27, 2021, 6:34 PM
That should work. Btw, the image width and height is part of its
_ref/
_id
// "image-3ff0bac8a44b902c4ba9548ba0a18ac215f14857-2880x1920-png"
const [assetType, _id, dimensions, filetype] = headshot.image.asset._ref.split('-')
const [width, height] = dimensions.split('x')Sep 27, 2021, 6:38 PM
What do you get when you query?
Sep 27, 2021, 6:39 PM
That should work. Btw, the image width and height is part of its
_ref/
_id
// "image-3ff0bac8a44b902c4ba9548ba0a18ac215f14857-2880x1920-png"
const [assetType, _id, dimensions, filetype] = headshot.image.asset._ref.split('-')
const [width, height] = dimensions.split('x')Sep 27, 2021, 6:38 PM
J
At the moment, I'm just playing around in the "Vision" gui, and this is what is returned from the query I posted above:
Sep 27, 2021, 6:52 PM
J
At the moment, I'm just playing around in the "Vision" gui, and this is what is returned from the query I posted above:
Sep 27, 2021, 6:52 PM
J
"headshot":{3 items
"_type":"imageWithAlt"
"alt":"headshot"
"image":{2 items
"_type":"image"
"asset":{2 items
"_ref":"image-947080633821852c01e1ad03e1afd8b4435c34df-674x606-png"
"_type":"reference"
}
}
}Sep 27, 2021, 6:52 PM
J
That's using v2021-03-25 👆
Sep 27, 2021, 6:53 PM
J
That's using v2021-03-25
Sep 27, 2021, 6:53 PM
J
When I switch to v1, I see 👇
Sep 27, 2021, 6:53 PM
J
"headshot":{2 items
"alt":"headshot"
"url":"<https://cdn.sanity.io/images/abc123/production/947080633821852c01e1ad03e1afd8b4435c34df-674x606.png>"
}Sep 27, 2021, 6:53 PM
Ah, this is subtle, but it’s because the
It should probably work
…started overwriting the fields in
v2021-03-25so if you change your query to:
*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{..., 'headshot': {'url': headshot.image.asset->url, 'alt': headshot.alt}} Sep 27, 2021, 6:59 PM
Because you’re overwriting a key with this projection
Sep 27, 2021, 6:59 PM
*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{..., headshot{'url': headshot.image.asset->url, 'alt': headshot.alt}} ☝️ This is the same btw
Sep 27, 2021, 7:00 PM
J
Thanks! Trying this out...
Sep 27, 2021, 7:48 PM
J
Cool, this is working. Thanks!
Sep 27, 2021, 8:00 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.