Sanity Media Library - How to Add Images to a Slide Show

1 replies
Last updated: Nov 25, 2021
I'm building a prototype CMS in Sanity for evaluation with our highly-structured metadata and content. Having dealt with very poor media managers in Wordpress and Drupal, I was a little disappointed not to find better media management in Sanity. When dealing with 1000's of images, it's important that a) metadata travels with images (don't need to re-type alt & title tags), b) it's easy to search for images by metadata, c) you can easily update an image with a new version. I tried out https://github.com/aratramba/sanity-plugin-media-library which seems nice and allows me to add custom fields. But ideally I don't want to rely on a third-party plugin if possible. Then I realized I could just make a new content type, "photo", that specifies all the metadata I need along with an image of type "image" (Sanity image type).
export default {
  type: 'document', 
  name: 'photo', 
  title: 'Photo', 
  fields: [
    { type: 'string', name: 'title', title: 'Title' }, 
    { type: 'string', name: 'alt', title: 'Alt' },
    { type: 'string', name: 'artist', title: 'Artist'}, 
    { type: 'string', name: 'movement', title: 'Movement' },
    { type: 'string', name: 'period', title: 'Period' },
    { name: "image", type: "image", title: "Image" }
  ]
}
Took me all of 10 minutes to create the type and add it as a reference to a "carousel" slide show.

  title: 'Slides',
  name: 'slides',
  type: 'array',
  of: [
    {
      type: 'reference',
      to: [{type: 'photo'}],
      name: 'slide',
      title: 'Slide'
    }
  ]
I can now add "photos" to any other content type, update the photo metadata or even upload a new image for that photo, and search for images by the content type fields. Super powerful! Have any of you done something similar? Or do you find that a media library plugin works better? Am I missing some feature for which I should use a plugin instead? (btw I'll probably rename it from "photo" to "artwork".)
AI Update

You've actually discovered one of the most powerful and flexible patterns for managing images in Sanity! Your "photo as a document" approach is not only valid but often the recommended best practice for structured media management with rich metadata. Let me explain why this works so well and when you might consider alternatives.

Why Your Document Pattern Works Great

Your approach of creating a photo document type with custom metadata fields and an image field is exactly what many experienced Sanity developers do. Here's why it's powerful:

1. Metadata Travels With Content By storing alt text, titles, and other metadata at the document level, you ensure this information is always accessible and can be updated in one place. When you reference this photo elsewhere, you're referencing the entire package of image + metadata.

2. Full GROQ Query Power You can search, filter, and query your photos using all of Sanity's GROQ capabilities. Want to find all photos by a specific artist from the Renaissance period? Easy with your schema.

3. Version Control Built-In When you upload a new image to an existing photo document, you're essentially versioning that asset while keeping all the metadata and references intact.

4. Reusability Using references (as you did with your carousel) means updating the photo in one place updates it everywhere it's used.

Understanding Sanity's Image Type

The native image type does support custom fields directly on the image field itself:

{
  name: 'image',
  type: 'image',
  fields: [
    {name: 'alt', type: 'string', title: 'Alt text'},
    {name: 'caption', type: 'string', title: 'Caption'}
  ]
}

However, this approach has limitations:

  • Metadata is tied to that specific usage, not the asset itself
  • You'd need to re-enter metadata each time you use the image
  • Searching across all images becomes harder

When to Use Media Library (Enterprise)

Sanity does offer an Enterprise Media Library with advanced features like:

  • Aspects: Schema-style custom metadata that lives on the asset itself
  • Asset Versions: True version control with usage tracking
  • Organization-wide asset management across projects

This is overkill for most projects and requires an Enterprise plan. Your document pattern gives you 90% of these benefits without the cost.

When to Use Media Plugins

Third-party plugins like sanity-plugin-media are useful when:

  • You want a better browsing/upload UI than the default asset source
  • You need basic tagging and search within the asset picker itself
  • You're on a budget and need something between basic assets and Enterprise Media Library

However, these plugins typically store metadata on the asset document itself, which can be harder to query from your content documents compared to your reference pattern.

Best Practices for Your Approach

Your pattern is solid, but here are some refinements:

1. Add Asset Metadata Extraction You can still leverage Sanity's built-in image metadata like EXIF data, dimensions, and color palette:

{
  name: "image", 
  type: "image",
  options: {
    hotspot: true,
    metadata: ['exif', 'palette', 'location']
  }
}

2. Consider Validation Make alt text required for accessibility:

{
  type: 'string',
  name: 'alt',
  title: 'Alt Text',
  validation: Rule => Rule.required()
}

3. Add Preview Configuration Make your photo documents easier to browse:

preview: {
  select: {
    title: 'title',
    media: 'image'
  }
}

The Verdict

Your approach is not missing anything critical. You've independently discovered a pattern that scales well for structured content. The document-as-media-object pattern is particularly well-suited for:

  • Art galleries and museums (like your artwork use case)
  • Product photography with detailed specs
  • Editorial images with rights management
  • Any scenario where images have rich, queryable metadata

Stick with your pattern unless you need organization-wide asset management across multiple projects (Enterprise Media Library) or just want a prettier upload UI (community plugins). You're building on solid Sanity fundamentals, and your 10-minute solution is better than many over-engineered alternatives.

Hi! Yes, I also chose this approach for several projects. I also remember asking about it and somebody from Sanity told me it's a good approach. Plus you get a warning when trying to delete an image that is already used somewhere.

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?