Querying for images within portable text in Sanity.io
7 replies
Last updated: Jun 3, 2021
J
Kia ora! I’m trying to expand the logic on this page to query a reference to a document that contains an image, to be able to display that image within my portable text.
I have the image document (
I’m trying something similar to this fragment from that page:
Here’s my query:
In vision, the query runs but the
I have the image document (
photo) insertable in studio, and am now figuring out my query.
I’m trying something similar to this fragment from that page:
*[_type == "post"]{
...,
body[]{
...,
markDefs[]{
...,
_type == "internalLink" => {
"slug": @.reference->slug
}
}
}
}Here’s my query:
*[_type == "collection" && slug.current == "5-frames-with-a-yashica-a-and-ilford-xp-2-super-400"]{
title, description[]{...,
_type == "reference" => { "slug": @.reference->slug, "image": @.reference->image.asset}
}}[0]
In vision, the query runs but the
”type”: “reference”objects returned aren’t outputting the slug or image key that I’m trying to query for. Is there something missing from my syntax?
Jun 1, 2021, 12:39 AM
J
By updating my schema to use an object with a reference field instead of a direct reference, I can access what I need in the query - but in the studio it looks like this, which is less than ideal!
{
type: 'object',
name: 'photo',
title: 'Photo reference',
fields: [
{
type: 'reference',
name: 'reference',
to: {
type: 'photo',
}}
]
}Jun 1, 2021, 1:01 AM
J
Aaaaaand I think I figured it out! I took out the object and made it a direct reference, but made sure I named it (
photo) and now the query runs smoothly, and it looks nice in studio!
Jun 1, 2021, 1:10 AM
T
Great 🙂. I find that the kitchen sink example have a nice patterns to use: https://github.com/sanity-io/sanity-template-kitchen-sink/tree/main/template/studio . The studio i am working on, uses a lot of images in text: https://github.com/tarjelavik/sanity-exhibition-nansen/blob/main/studio/schemas/texts/blockContent.js both as references and objects.
Jun 1, 2021, 6:30 AM
J
Hi again everyone! I’m having a funny issue where this code and query that was working, is no longer! All of a sudden I’m getting a plain reference object instead of a full object with the keys I’m querying for.
What’s especially odd is that my deployed code is working (mostly) as it should - it’s able to display one of the images I’m querying for - but locally the site won’t build at all because the query isn’t returning as expected!
Any idea what might be happening here, or what I’m missing?
What’s especially odd is that my deployed code is working (mostly) as it should - it’s able to display one of the images I’m querying for - but locally the site won’t build at all because the query isn’t returning as expected!
Any idea what might be happening here, or what I’m missing?
Jun 3, 2021, 9:44 AM
T
Have you updated the studio? Could it be a change in API version?
Jun 3, 2021, 10:14 AM
J
I think there must be a difference in my local studio vs what’s deployed, but looking at my version control, the only difference is in the relevant schema - and it seems both versions don’t work!
Jun 3, 2021, 9:20 PM
J
I think there must be a difference in my local studio vs what’s deployed, but looking at my version control, the only difference is in the relevant schema - and it seems both versions don’t work!
Jun 3, 2021, 9:20 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.