Get help on Discord

Retrieving image metadata with `getImageAsset` in Sanity and modifying queries to include metadata.

36 replies
Last updated: Mar 31, 2022
I’m trying to retrieve Image metadata with 
getImageAsset
of 
"@sanity/asset-utils"
but only getting metadata.dimensions. Shouldn’t I get default ones like blurHash too?
Mar 30, 2022, 9:30 PM
Hi
user U
, thank you for the answer. The thing is, I’m trying to do a React image component where I can use the blurhash as a placeholder, and that way I would need to modify all the queries I’m doing, and some of them are pretty complex (dynamic page builder with multiple nested levels
Mar 31, 2022, 8:18 AM
Oh, at a glance, I thought you were somehow getting 
dimensions
from the metadata.
Mar 31, 2022, 3:09 PM
Oh, at a glance, I thought you were somehow getting 
dimensions
from the metadata.
Mar 31, 2022, 3:09 PM
and I am
Mar 31, 2022, 3:49 PM
although, I’m not defining metadata in any of my queries
Mar 31, 2022, 3:49 PM
thats whats strange
Mar 31, 2022, 3:49 PM
by Sanity docs, blurhash should be included
Mar 31, 2022, 3:50 PM

  {
      name: 'metaImage',
      title: 'Image with metadata',
      type: 'image',
      options: {
        metadata: [
          'blurHash',   // Default: included
          'lqip',       // Default: included
          'palette',    // Default: included
          'exif',       // Default: not included
          'location',   // Default: not included
        ],
      },
    },
Mar 31, 2022, 3:50 PM
Are you not getting a blurHash value back when you query your images?
*[_type == "sanity.imageAsset"
 ][0]{
   _id,
   metadata{
   blurHash
 }
 }

Mar 31, 2022, 3:56 PM
The schema metadata options are booleans in an array while the asset document details are nested objects, which can be confusing.
Mar 31, 2022, 3:59 PM
so I would need to edit all the site queries to include image metadata, is that right?
Mar 31, 2022, 4:00 PM
const query = groq`*[_type == "caseStudy" && slug.current == $slug]{
    "currentPost": {
      ...
    },
    "previousPost": *[_type == "caseStudy" && ^._createdAt > _createdAt]|order(_createdAt desc)[0]{...,"slug": slug.current},
    "nextPost": *[_type == "caseStudy" && ^._createdAt < _createdAt]|order(_createdAt asc)[0]{...,"slug": slug.current}
  }|order(_createdAt)[0]`;
Mar 31, 2022, 4:02 PM
so I’m querying a current, next and previous post on a Blog page, how would I fetch all the images metadata on that query?
Mar 31, 2022, 4:02 PM
Hard to say without seeing the output, but something like:

*[_type == "caseStudy" && slug.current == $slug]{
    "currentPost": {
      ...,
      'metadata': image.asset->metadata
    },
    // ...
Mar 31, 2022, 4:06 PM
If it’s an array of images, you’ll adapt the above accordingly.
Mar 31, 2022, 4:06 PM
Hard to say without seeing the output, but something like:

*[_type == "caseStudy" && slug.current == $slug]{
    "currentPost": {
      ...,
      'metadata': image.asset->metadata
    },
    // ...
Mar 31, 2022, 4:06 PM
so perhaps thats the case
Mar 31, 2022, 4:15 PM
I’m just getting confused with GROQ
Mar 31, 2022, 4:15 PM
because I have this complexed page builder with multiple nested fields
Mar 31, 2022, 4:15 PM
and I just can’t wrap my head around it
Mar 31, 2022, 4:16 PM
anyway thanks!
Mar 31, 2022, 4:17 PM
Can you post an example of what you’re getting back from that query for 
currentPost
?
Mar 31, 2022, 4:17 PM
sure
Mar 31, 2022, 4:17 PM
Mar 31, 2022, 4:19 PM
so that 
media_item
is what I’m interested in, which returns me an image without any metadata
Mar 31, 2022, 4:21 PM
{
  _key: '9835cbe756b9',
  _type: 'column',
  col_span: 'full_width',
  image: {
    _type: 'image',
    asset: {
      _ref: 'image-715114d0636182e8e7de8ed97dff23ceb911f31d-2760x1550-jpg',
      _type: 'reference'
    }
  },
  mediaType: 'image',
  positioning: 'left',
  videoType: 'embedded'
}
Mar 31, 2022, 4:21 PM
Will it always be images in 
media_item
, or are there other types too?
Mar 31, 2022, 4:22 PM
image/video/text
Mar 31, 2022, 4:24 PM
Okay. Later you can add conditionals to only ask for metadata if the item is an image, but for now it’s fine (you’ll just get nulls on non-images). Could you try this?

*[_type == "caseStudy" && slug.current == $slug]{
    "currentPost": {
      ...,
      'metadata': pageBuilder[].media_item[].image.asset->metadata
    },
    // ...
Mar 31, 2022, 4:28 PM
This will not work on 
v1
of the API , so you’ll want to use 
v2021-03-25
or later.
Mar 31, 2022, 4:30 PM
got them
Mar 31, 2022, 4:31 PM
how would I associate them with the actually assets though?
Mar 31, 2022, 4:31 PM
You’ll want to ask for more than just metadata (e.g., 
_id
).
Mar 31, 2022, 4:34 PM
So maybe this is better:

*[_type == "caseStudy" && slug.current == $slug]{
    "currentPost": {
      ...,
      pageBuilder[]{
        ...,
        media_item[]{
          ...,
          image{
            ...,
            asset->
          }
        }
      }
    },
    // ...
Mar 31, 2022, 4:35 PM
that will do
Mar 31, 2022, 4:53 PM
thank you both
Mar 31, 2022, 4:53 PM

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?