Understanding how to get image props in Sanity.io

Hello!
I’m struggling to understand how to get all the image props available to me. When I pass my data down all I get is an image ref. How do I pass down the URL and Palette? (those are the two I’m most interested in).

Hello. Please check this message and the thread it references: https://sanity-io-land.slack.com/archives/C01T1B5GVEG/p1652699575291369?thread_ts=1652697423.101959&cid=C01T1B5GVEG

It’s a bit hard to follow. Thank you though

On line 29, am I supposed to edit my query there or do I have to make a separate query in my actual component?

You can edit your query. Right now you query all your data from all your projects, which you might want to refine to avoid querying unnecessary fields and to resolve your references and assets.

I would prefer all my data though. How would I know the right properties to put for the rest of my data if I’m cherry-picking?
Is there any practical examples in the docs or good videos you know going through this process more thoroughly?

...

means all the fields so you can use that, but it seems rather unlikely that you use absolutely every field, including

_type

,

_updatedAt

,

_createdAt

, and so on. You can always log what data you receive and then update your author to only query the fields you need. You typically know the properties because you get to define your schema—you’re in control.

Coming back to your original problem though, my code snippet should help you resolve the URL for your image.
When you use an image field (or a file field), your image isn’t stored directly in your document. Instead, a reference to an asset object gets stored. You need to resolve that asset yourself, because it’ not done for you automatically when you query all fields.

This is what the small arrow

->

means: following the reference to what’s behind, and querying fields from it.

Okay, I’m follow a bit here.

Yes your snippet helped me, so thank you for that!

I am having trouble getting the palette though:

What is the palette?

I just tried to mimic the first one. But I guess because palette has more objects inside I have to change it around?

That’s why I was hoping to access the whole image object, instead of just the URL. I’d love to know how to do it both ways, accessing it all without drilling down to just the url, and how to have it all passed to my component.

I was learning about the palette from here .

Oh, try

image.asset -> metadata.palette

.

I think you just missed the

metadata

object.

Ah yes, that was it.

Well that definitely solves my issue, I appreciate the help! I need to get more used to this

If you don’t want to resolve the references to your images manually, you could use this library: https://www.npmjs.com/package/@sanity/image-url . It brings a slightly higher footprint to your client side code, but it gives you a builder.

I followed along on some sanity blog post to get my project up and running, and it came with this:

You’re using the legacy portable text. 🙂

It definitely created a lot of confusion, I wish I started more from scratch to understand a bit better. But urlFor is in there and the image builder… but I never used it I guess. and I wanted to get the palette that’s why I went down this journey

Ah.. damn lol. Yeah I’m thinking I might re-do it.

Do you know any good videos or courses to follow along building bootstrapping sanity from scratch? or an article? I think I copy and pasted too much from this and clearly it has legacy code.