Structured Content 101: Find out how to make your content work harder (without your team working harder) →

GROQ query to pull data for image palette information

By Bryan Robinson

A query to pull the rich color data associated with an image from the Sanity Asset Pipeline

documentWithImage.js

*[_id =="documentWithImage"]{
  ...,
  image{
    ..., // Get all information
    "palette": asset->metadata.palette // Pull palette from metadata on the asset
  }
}

response.json

{
  "_id": "documentWithImage",
  "title": "A document with an image",
  // ... other data
  "image": {
    "_key": "5f34eed722c8",
    "_type": "image",
    "asset": {
      "_ref": "image-df9f14aaebefb17704af30c01d6fcd7eca624afe-3000x4542-jpg",
      "_type": "reference"
    },
    "caption": "Plants",
    "palette": {
      "_type": "sanity.imagePalette",
      "darkMuted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#294a41",
        "foreground": "#fff",
        "population": 7.7,
        "title": "#fff"
      },
      "darkVibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#094836",
        "foreground": "#fff",
        "population": 0.32,
        "title": "#fff"
      },
      "dominant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#294a41",
        "foreground": "#fff",
        "population": 7.7,
        "title": "#fff"
      },
      "lightMuted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#94b7a8",
        "foreground": "#000",
        "population": 3.2,
        "title": "#fff"
      },
      "lightVibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#9adfd2",
        "foreground": "#000",
        "population": 0,
        "title": "#000"
      },
      "muted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#649c7e",
        "foreground": "#fff",
        "population": 0.36,
        "title": "#fff"
      },
      "vibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#287e6e",
        "foreground": "#fff",
        "population": 0.06,
        "title": "#fff"
      }
    }
  }
}  

This query takes a document or document type that contains an image and then dereferences the palette information from the referenced asset's metadata.

See this in action in this code sandbox. Or see the video walkthrough on Twitter.

Contributor

Other schemas by author