Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Querying for image attributes and requesting image metadata in GROQ.

8 replies
Last updated: Jan 24, 2024
Is there a way for GROQ to query/project attributes that indicate the current/original size of the image? In other words, I don't want to dictate a transformation...I just want to be told what the original dimensions are as part of my query results. Likewise, can GROQ project/offer an attribute that indicates the original image format?
Jan 24, 2024, 4:30 PM
If you query: 
*[_type == "sanity.imageAsset"]
you can see the entirety of the item properties. In this case I think you are looking for something similar to:

*[_type == "sanity.imageAsset"]{

extension,

metadata{

dimensions {

width,

height

}

}

}

Result:


{"extension":"jpg","metadata":{"dimensions":{"width":1014,"height":757}}},
Jan 24, 2024, 6:16 PM
OMG. With the clue you gave me, I am now getting what I want with this query:
	*[_type == "carousel"] 
    {
      ...,
      "imageUrl": pic.asset->url,
      'height': pic.asset->metadata.dimensions.height,
      'width': pic.asset->metadata.dimensions.width,
      'format': pic.asset->extension
    }
Jan 24, 2024, 6:37 PM
I really enjoy GROQ. I rarely can’t get what I need out of it.
Jan 24, 2024, 6:38 PM
BTW, I would LOVE to have basic metadata (height, width, format) always visible next to each image within Sanity Studio (within the "structure" plugin...during editing/viewing). Is that possible?The impression I have is I can only get that UI-based information if I install the "media browser" plugin (viz. sanity-plugin-media).
Jan 24, 2024, 6:57 PM
Do you use the media plugin?
Jan 24, 2024, 7:03 PM
I do not currently have the media plugin installed. I was going to install it later today or tomorrow...precisely because I have the impression there is no other way to have basic image metadata shown in the UI.
Jan 24, 2024, 7:03 PM
I use it 100% of the time.
Jan 24, 2024, 7:04 PM
If you wanted to create a custom component for images you could display that info. Within the studio.
Jan 24, 2024, 7:04 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?