Sanity Schema for Background Image Slider for Gatsby.js

sanitySchemas.js

// My indexPage.js schema is where I am including the slider -- 
export default {
  name: 'indexPage',
  type: 'document',
  title: 'Homepage',
  __experimental_actions: [/* 'create', */ 'update' /* 'delete', */, 'publish'],
  fields: [
    {
      type: 'array',
      name: 'bgImages',
      title: 'Homepage Background Images',
      of: [{type: 'figure'}],
      options: {
        layout: 'grid'
      }
    },
    {
      name: 'headlineText',
      title: 'Headline Text',
      type: 'text',
      rows: 2
    },
    {
      name: 'subhead',
      title: 'Sub-Headline Text',
      type: 'bioPortableText'
    },
    {
      name: 'buttonText',
      title: 'Main Button Text',
      type: 'text',
      rows: 1
    }
  ],
  preview: {
    select: {
      title: 'title'
    },
    prepare ({title = 'No title'}) {
      return {
        title
      }
    }
  }
}


// and here is the figure object:
export default {
  name: 'figure',
  title: 'Image',
  type: 'image',
  options: {
    hotspot: true
  },
  fields: [
    {
      title: 'Caption',
      name: 'caption',
      type: 'string',
      options: {
        isHighlighted: true
      }
    },
    {
      name: 'alt',
      type: 'string',
      title: 'Alternative text',
      validation: Rule => Rule.error('You have to fill out the alternative text.').required(),
      description: 'Important for SEO and accessiblity.',
      options: {
        isHighlighted: true
      }
    }
  ],
  preview: {
    select: {
      imageUrl: 'asset.url',
      title: 'caption'
    }
  }
}