🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Querying alt tags for inline images in 11ty site with Sanity media library plugin

21 replies
Last updated: Mar 19, 2021
Good morning kind Sanity people.
I have been striving to figure out how to display inline images in block content with responsive sizes and alt tags for an 11ty site. I now have the srcset working after reverse engineering
https://github.com/brob/eleventy-plugin-sanity-image . Now I need help to understand how I can query the alt tag for the image from inside my serializer function. I'm using the excellent Sanity media library plugin (https://www.sanity.io/plugins/sanity-plugin-media-library ) to set the alt tags. My serializer function is using @sanity/image-url to query Sanity to build the image urls. How can I query the alt tag I set in the media library?
Mar 19, 2021, 11:01 AM
So I've got it working with an async function but it's clear that I should be materializing the asset fields in the main query, rather than querying for the alt tag individually for each inline image.
My schema has a page document type that contains an array which in turn contains objects.

One of the objects is named 'content' and is comprised of a single block content field. Can anyone help me figure out a groq query to materialise the alt field I need for the inline image in this block content?

I discovered that the media library stores the alt field below sanity.imageAsset

Any help gratefully received as always
😉
Mar 19, 2021, 3:01 PM
*[_type == "page" && title != ""] {

title,

slug,

headerBlocks,

mainBlocks[],

...,

_type == "content" => {

...,

blocktext[]{

...,

children[]{

...,

_type == "image" => {


"alt": @.imageAsset->alt,

}

}

}

},

}
Mar 19, 2021, 6:06 PM
Not giving an error, but not materializing the alt field still. Could you have a look for me
user A
?
Mar 19, 2021, 6:07 PM
Are you getting results back as deep in your query as
children[]
?
Mar 19, 2021, 6:48 PM
Thanks for the reply. Yes. I'm getting all the fields back but not the alt.
Mar 19, 2021, 6:49 PM
Is it okay to nest those _type == "" clauses?
Mar 19, 2021, 6:50 PM
I think it should be fine. If you replace
"alt": @.imageAsset->alt,
with
...
, what do you get back?
Mar 19, 2021, 6:51 PM
I seem to get the same result
Mar 19, 2021, 6:55 PM
Do any items of the
children
array have the type of image?
Mar 19, 2021, 6:56 PM
There is no children array in the results. This might be the issue.
Mar 19, 2021, 6:57 PM
I can see mainblocks -> 0 -> blocktext -> 0,1,2,3,4,5,6,7,8
Mar 19, 2021, 6:59 PM
Sounds like it, yes. I might try commenting out all the ellipses to limit noise, then bring them back in once you’re getting your alt data.
Are any of the
blocktext
items
children[]
?
Mar 19, 2021, 6:59 PM
No, they are numbered 0-8
Mar 19, 2021, 7:00 PM
8 holds the image
Mar 19, 2021, 7:00 PM
okay
Mar 19, 2021, 7:01 PM
It’s tough to say without seeing the query result, but maybe remove
children[]{
and its corresponding
}
.
Mar 19, 2021, 7:01 PM
Okay. I'll keep trying. I discovered vision so it should be possible. At least I know I'm not completely off the track now, thanks.
Mar 19, 2021, 7:02 PM
Another approach I might use myself is to remove the entire projection (i.e., get all the data) then Inspect the JSON and trace out the path.
Mar 19, 2021, 7:02 PM
Feel free to post your schema and/or query results (redacting anything private) if you try a bit more and are still stuck.
Mar 19, 2021, 7:04 PM
Thanks I will. I'm really pleased to have got the serializer function working. Getting the alt text in is the icing on the cake!
Mar 19, 2021, 7:05 PM
I applaud your tenacity. We’ll get there! 🙂
Mar 19, 2021, 7:13 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.

Was this answer helpful?