👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Asset metadata field

An asset field (image or file) may have a metadata option. This option defines which metadata the server should attempt to extract when receiving the uploaded file and populate into the assets metadata document. This field must be an array of strings:

{
  name: 'coverPhoto',
  title: 'Cover photo',
  type: 'image',
  options: {
    metadata: ['location', 'palette']
  }
}

The above example will attempt to extract palette and location data for any image uploaded to this field, and populate the metadata on the asset. For instance, if this field is part of a document of type article, you could run a query such as the following:

*[_type == "article"] {
  ...,
  "coverPhoto": coverPhoto.asset->{
    url,
    metadata {
      location,
      palette {
        dominant {
          background,
          foreground
        }
      }
    }
  }
}

Which might return something along the lines of:

[
  {
    "_id": "some-blog-post",
    "_type": "article",
    "title": "Some blog post",
    "coverPhoto": {
      "url": "https://cdn.sanity.io/images/foobar/test/aa1N73Zv14r7pYsbUdXl-4288x2848.jpg",
      "metadata": {
        "location": {
          "lat": 59.924104,
          "lon": 10.758437
        },
        "palette": {
          "dominant": {
            "background": "#99b8cd",
            "foreground": "#000"
          }
        }
      }
    }
  }
]

Was this article helpful?