Skip to content
Get help on Slack

Querying for images within portable text in Sanity.io

7 replies
Last updated: Jun 3, 2021
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 (
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
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
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
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
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?
Jun 3, 2021, 9:44 AM
Have you updated the studio? Could it be a change in API version?
Jun 3, 2021, 10:14 AM
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
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.

Get started for freeExplore the demo

Was this answer helpful?