Joint session with Vercel: How to build intelligent storefronts (May 15th)

GROQ query to pull data for image palette information

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

By Bryan Robinson


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

Bryan Robinson

Sr. DevRel @ Algolia

United States

Visit Bryan Robinson's profile