Getting the average color of an image in Sanity CMS
36 replies
Last updated: Dec 3, 2020
A
I have a question, which can also be a feature request š I want to get the average color of an image (or maybe 2 or 3 color palettes). Now, these are normally done by requesting a smaller image resolution, perform some kind of pixel color average and then use that value. since its a bit expensive I wonder if this can be set when the user updates / changes an image in sanity. Either by a custom component or automatically. Did anyone ever done something like this on the CMS instead of client-side?
Dec 2, 2020, 9:57 PM
Hey
user A
ā take a quick look at the metadata info on the image object, if you resolve reference and add this, you can get plenty of palette info about every image. I managed to use this very reliably on https://joshlilley.com/ to change header colour on image hover and background behind image while they loadDec 3, 2020, 9:20 AM
A
With the out of the box image schema? Or you build something custom?
Dec 3, 2020, 9:35 AM
P
Simon is right, this should be available to you out of the box, at least to some degree depending on what you need š Have a look at this example of a
The data is inside the
sanity.imageAssetdocument: https://www.sanity.io/docs/image-type#example-of-a-image-asset-object-with-metadata-location-lqip-palette-and-dimensions-df3f768ce073
The data is inside the
metadata.paletteobject.
Dec 3, 2020, 12:31 PM
A
ah okay. this means that on my sanity studio schema I need to specifically request palette
Dec 3, 2020, 12:36 PM
A
so any images uploaded without that bit wonāt have it on the database?
Dec 3, 2020, 12:36 PM
A
ohā¦
Dec 3, 2020, 12:36 PM
A
Cause this is my current GROQ request, and nothing comes on that imageMetadata field besides ātypeā and āassetā
Dec 3, 2020, 12:37 PM
"image": image { ..., "metadata": asset->metadata }
Dec 3, 2020, 12:38 PM
A
Iāll test your suggestion now. but I was reading this article and that gave me the impression I need to specify āoptionsā on my image schema
Dec 3, 2020, 12:39 PM
A
Dec 3, 2020, 12:39 PM
I guess the docs could define more clearly that these things are extracted by default, as youre right it doesnt say
Dec 3, 2020, 12:41 PM
P
Indeed, we should probably clarify that these attributes are recorded by default. Thanks for the feedback!
Dec 3, 2020, 12:42 PM
Image assets also contain useful metadata such as Low Quality Image Previews (LQIP), palette information and original image dimension as well as aspect ratio.
Dec 3, 2020, 12:43 PM
A
sorry to keep dragging this, but let me share what I have, cause iām rather confused..
Dec 3, 2020, 12:43 PM
A
{ name: 'coverImage', title: 'Cover Image', type: 'image', fieldset: 'settings', validation: (Rule) => Rule.required(), },
Dec 3, 2020, 12:44 PM
A
This is my post image schema. just a ānormalā imageā
Dec 3, 2020, 12:44 PM
A
and this is how Iām getting it:
Dec 3, 2020, 12:44 PM
A
*[_type == "post"] | order(title) { 'key': _id, 'type': _type, title, 'slug': slug.current, 'image': coverImage.asset->url, }
Dec 3, 2020, 12:45 PM
A
but if I just get
'image': coverImagethe object I get is a reference and it has no palette info
Dec 3, 2020, 12:45 PM
this means you need to resolve them to get information you might want, like the url you are extracting
Dec 3, 2020, 12:47 PM
->the GROQ you are using here resolves the reference to the asset and extracts the URL
Dec 3, 2020, 12:48 PM
however you need more than one property, so could tryu something like:
'image': coverImage { 'url': asset->url, 'metadata': asset->metadata }
Dec 3, 2020, 12:48 PM
A
ah I see!
Dec 3, 2020, 12:49 PM
A
thanks buddy!
Dec 3, 2020, 12:49 PM
A
I got it
Dec 3, 2020, 12:49 PM
A
Now my issue will be decoding why the hell thereās so many classifications for the palette š Iāll go through the docs and figure out what is a darkVibrant vs darkMuted and which one should I sample to get the average colors
Dec 3, 2020, 12:50 PM
the best is simply to do a quick overview of options on your frontend ā sometimes not all are present in my experience, so you may need to look for more than one
Dec 3, 2020, 12:51 PM
A
and do a āeyeā comparison to whatās closest to the image from all the paletteās and then choose one? sounds good!
Dec 3, 2020, 12:52 PM
P
(P.S. You could probably rewrite to this if you prefer)
'image': coverImage.asset->{ url, metadata }
Dec 3, 2020, 12:53 PM
A
Yeah its way more clean. still a n00b at groq. thanks guys. appreciate it
Dec 3, 2020, 2:07 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.