Help with array of images in Sanity
I'd be happy to help you with arrays of images in Sanity! This is a common pattern when you need to handle multiple images in a document, like photo galleries, product images, or image carousels.
Here's how to set up an array of images in your Sanity schema:
Basic Array of Images
import {defineField, defineType} from 'sanity'
export default defineType({
name: 'gallery',
type: 'document',
title: 'Gallery',
fields: [
defineField({
name: 'images',
type: 'array',
title: 'Images',
of: [
{
type: 'image',
options: {
hotspot: true, // Enables focal point selection
},
fields: [
{
name: 'alt',
type: 'string',
title: 'Alternative text',
description: 'Important for SEO and accessibility'
},
{
name: 'caption',
type: 'string',
title: 'Caption'
}
]
}
],
options: {
layout: 'grid' // Shows images in a grid view
}
})
]
})Key Features to Consider
Hotspot: The hotspot: true option enables intelligent cropping - you can select a focal point that will be preserved when images are cropped at different aspect ratios.
Image Metadata: Sanity automatically extracts metadata like dimensions, color palette, and EXIF data from uploaded images.
Custom Fields: You can add fields directly to each image object (like alt text, captions, credits) to store additional information alongside the image.
Querying Arrays of Images
When fetching your data with GROQ:
*[_type == "gallery"][0] {
images[] {
asset->,
alt,
caption,
hotspot,
crop
}
}Then use Sanity's image URL builder to generate optimized URLs:
import imageUrlBuilder from '@sanity/image-url'
const builder = imageUrlBuilder(client)
function urlFor(source) {
return builder.image(source)
}
// Use it
const imageUrl = urlFor(image).width(800).url()The layout: 'grid' option in the schema makes the Studio display your images in a nice grid format, making it easier to manage multiple images visually. You can also add validation rules to limit the number of images or require minimum/maximum quantities if needed.
Show original thread29 replies
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.