šŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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
Mar 5, 2023, 7:14 PM
šŸ§µ
Mar 5, 2023, 7:14 PM
Thanks
Mar 5, 2023, 7:15 PM
Isn't this like referencing
Mar 5, 2023, 7:16 PM
yes it utilizes references
Mar 5, 2023, 7:16 PM
Hey here you can see how I created an array of strings, Is it possible with images too?
Mar 5, 2023, 7:27 PM
Yeah probably!
Mar 5, 2023, 7:29 PM
can you change ā€˜stringā€™ to image and see what happens
Mar 5, 2023, 7:30 PM
Checking it right now
Mar 5, 2023, 7:30 PM
Yep it's working fine or perfectly as I expected it to be.
Mar 5, 2023, 7:31 PM
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
Mar 5, 2023, 7:33 PM
glad it worked tho!
Mar 5, 2023, 7:33 PM
Actually referencing is good, I'll try to reference images here too.
Mar 5, 2023, 7:34 PM
With referencing I will be able to utilise it at multiple locations.
Mar 5, 2023, 7:35 PM
Hey, Do you know what other things I can do with images?
Mar 5, 2023, 7:37 PM
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
Mar 5, 2023, 7:37 PM
I think hotspot don't work with array, do they?
Mar 5, 2023, 7:38 PM
mine does
Mar 5, 2023, 7:38 PM
Can you send me the code?
Thank You
Mar 5, 2023, 7:39 PM
defineField({
      name: 'image',
      type: 'image',
      title: 'Upload Image',
      options: {
        hotspot: true,
      },
    }),
Mar 5, 2023, 7:39 PM
It's not array sir.
Mar 5, 2023, 7:40 PM
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,
      },
    }),
Mar 5, 2023, 7:40 PM
defineField({
      name: 'collectionImages',
      type: 'array',
      title: 'Add images to this collection',
      of: [
        {
          type: 'reference',
          to: [
            { type: 'blogImage' }
          ]
        }
      ],
    }),
Mar 5, 2023, 7:41 PM
See this, Upper one is a simple image and bottom one is an array of objects.
Mar 5, 2023, 7:41 PM
the hotspot option should be the option on the image type . then you reference this image type with your array
Mar 5, 2023, 7:42 PM
Lemme ask about in help
Mar 5, 2023, 7:42 PM
Hmmm... šŸ¤”
Mar 5, 2023, 7:43 PM
I have to sign off for the day. have a great weekend
Mar 5, 2023, 7:44 PM
Hey, you too and thanks for helping brother.
Mar 5, 2023, 7:44 PM
Do you know anything related to this, It's for an image.
Mar 5, 2023, 7:57 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?