Creating custom block previews for images with fields in Slack thread.

export const richImage = {
  name: 'richImage',
  type: 'image',
  title: 'Image',
  options: {
    hotspot: true,
  },
  fields: [
    {
      name: 'caption',
      title: 'Caption',
      type: 'string',
      options: {
        isHighlighted: true,
      },
    },

    {
      name: 'altText',
      title: 'Alt Text',
      type: 'string',
      description:
        'A short description of the image. Helps with accessibility and SEO',
      options: {
        isHighlighted: true,
      },
    },
  ],
  preview: {
    select: {
      caption: 'caption',
      altText: 'altText',
    },
    prepare: ({ caption, altText }) => {
      return {
        title: caption,
        subtitle: `alt: ${altText}`,
      };
    },
  },
};

const imageWithMeta = {
  title: 'Image',
  name: 'imageWithMeta',
  type: 'image',
  options: {
    metadata: ['palette', 'lqip'],
    hotspot: true
  },
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alt',
      options: {
        isHighlighted: true
      }
    },
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      options: {
        isHighlighted: true
      }
    }
  ],
  preview: {
    select: {
      title: 'alt',
      subtitle: 'caption',
      media: 'asset'
    }
  }
}

preview: {
    select: {
      caption: 'caption',
      altText: 'altText',
      media: 'asset'
    },
    prepare: ({ caption, altText, media }) => {
      return {
        title: caption,
        subtitle: `alt: ${altText}`,
        media
      };
    },
  },