Get help on Discord

Discussion on creating and referencing arrays of images in Slack thread

29 replies
Last updated: Mar 5, 2023
user P
i can try to help with array of images here
AI Update

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.

šŸ§µ
Thanks
Isn't this like referencing
yes it utilizes references
Hey here you can see how I created an array of strings, Is it possible with images too?
Yeah probably!
can you change ā€˜stringā€™ to image and see what happens
Checking it right now
Yep it's working fine or perfectly as I expected it to be.
I think the reason I used references for this was so I could also use the image in other contexts instead of just an array
glad it worked tho!
Actually referencing is good, I'll try to reference images here too.
With referencing I will be able to utilise it at multiple locations.
Hey, Do you know what other things I can do with images?
yeah check out the sanity docs they are super helpfulā€¦ I really like the ā€œhotspotā€ option ā€” https://www.sanity.io/docs/image-type#text=hotspot-,boolean,at%20display%20time.%20The%2[ā€¦]e%20for%20hotspot%20is%20false.,-storeOriginalFilename
I think hotspot don't work with array, do they?
mine does
Can you send me the code?
Thank You
defineField({
      name: 'image',
      type: 'image',
      title: 'Upload Image',
      options: {
        hotspot: true,
      },
    }),
It's not array sir.
export default defineType({
  name: 'blogImage', // tells the studio that the JSON gets "_type": 'image'
  type: 'document', // document tells studio it is possible to make new navBar documents
  title: 'Images', // how it looks in the Studio UI
  icon: ImageIcon,
  fields: [
    defineField({
      name: 'image',
      type: 'image',
      title: 'Upload Image',
      options: {
        hotspot: true,
      },
    }),
defineField({
      name: 'collectionImages',
      type: 'array',
      title: 'Add images to this collection',
      of: [
        {
          type: 'reference',
          to: [
            { type: 'blogImage' }
          ]
        }
      ],
    }),
See this, Upper one is a simple image and bottom one is an array of objects.
the hotspot option should be the option on the image type . then you reference this image type with your array
Lemme ask about in help
Hmmm... šŸ¤”
I have to sign off for the day. have a great weekend
Hey, you too and thanks for helping brother.
Do you know anything related to this, It's for an image.

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.

Get started for freeExplore the demo

Was this answer helpful?