Querying for images by tag using GROQ in Sanity.io

6 replies
Last updated: Sep 11, 2021
Hello, Nice to be here. I have a question about Media Browser. specifically about https://www.sanity.io/plugins/sanity-plugin-media .I have some tags and images attached to tags. I wonder is there a way to get all the images of a tag? name and url using GROQ?
AI Update

Welcome to the Sanity community! Yes, you can query images by tag using GROQ with the sanity-plugin-media plugin.

According to the official documentation, tags are stored as weak references in the opt.media.tags field on asset documents. The plugin defines a media.tag document type for the tags themselves. Here's how to query images by tag:

To get all images with their associated tags:

*[_type == 'sanity.imageAsset'] {
  originalFilename,
  url,
  "tags": opt.media.tags[]->name.current
}

To filter images by a specific tag name:

*[_type == 'sanity.imageAsset' && references(*[_type == 'media.tag' && name.current == 'your-tag-name']._id)] {
  originalFilename,
  url,
  "tags": opt.media.tags[]->name.current
}

To get all images that have at least one tag:

*[_type == 'sanity.imageAsset' && count(opt.media.tags) > 0] {
  originalFilename,
  url,
  "tags": opt.media.tags[]->name.current
}

Important notes about the schema structure:

  • Tags are stored in the opt.media.tags array on each asset document (as weak references to media.tag documents)
  • Tag names use the name.current property because they're defined as slugs
  • The opt.media namespace is used because this is a third-party plugin
  • You use the -> operator to dereference the weak references and access tag properties

You can also query additional asset fields alongside tags:

*[_type == 'sanity.imageAsset'] {
  originalFilename,
  url,
  altText,
  description,
  title,
  "tags": opt.media.tags[]->name.current
}

The official documentation confirms this approach in their FAQ section, where they provide an example query showing how tags are accessed via opt.media.tags[]->name.current.

You can test these queries in the Vision plugin (usually at http://localhost:3333/vision in your local studio) to explore your data structure and refine your queries based on your specific needs.

Hi Eran. Welcome! Would you be looking for a tag by name in your query or would you be passing in the tag’s
_id
?
Hi, If I can ask for all images that has tags that would be great, otherwise by
_id
is also great
Something like this would query for all tags (
*[_type == 'media.tag']
), and then for each tag, return a list of images that reference that tag (
'images': *[_type == 'sanity.imageAsset' && references(^._id)]
)—or specifically, return the
originalFilename
and `url`:

*[_type == 'media.tag'] {
  'images': *[_type == 'sanity.imageAsset' && references(^._id)]{originalFilename, url}
}
You might want to hide any tags that have no images; you can do that by adding
[count(images) > 0]
after the projection.

*[_type == 'media.tag'] {
  'images': *[_type == 'sanity.imageAsset' && references(^._id)]{originalFilename, url}
}[count(images) > 0]
Something like this would query for all tags (
*[_type == 'media.tag']
), and then for each tag, return a list of images that reference that tag (
'images': *[_type == 'sanity.imageAsset' && references(^._id)]
)—or specifically, return the
originalFilename
and `url`:

*[_type == 'media.tag'] {
  'images': *[_type == 'sanity.imageAsset' && references(^._id)]{originalFilename, url}
}
You might want to hide any tags that have no images; you can do that by adding
[count(images) > 0]
after the projection.

*[_type == 'media.tag'] {
  'images': *[_type == 'sanity.imageAsset' && references(^._id)]{originalFilename, url}
}[count(images) > 0]
Amazing 👍 out of curiosity, I tried to find the metadata needed for this operation (for example the
sanity.imageAsset
type and the fields it has), but it is hard to find it in the documentation. Is there a place where you explore and play with the dataset content? like you have in graphQL?
also, not related just to confirm. the Public mode of a dataset is read-only right? users cannot write into the dataset?
A few things can be inferred from here and the properties are mentioned in passing here , but I agree this could be much more explicitly stated. We’ll make sure to improve those docs. Thanks for pointing that out.
For a GROQ playground, the local studio should come with the Vision plugin by default (
http://localhost:3333/vision ). If it’s not installed, the command is listed here or you can follow up in this thread and we’d be happy to help.
You’re correct: No one can write to the dataset—whether it’s public or private—without a write token.

Edit: I realize my first paragraph might not answer your question, which seems more to be asking “how do you know what you don’t know?” If that’s the case, maybe a better answer would have been to recommend you use
Ctrl + space
in the Vision plugin. That should give you a dropdown selection including all the documents, objects, arrays, etc. from your schema. It’s not perfect, but it does include the
sanity.*
objects.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?