Image Options Input for Sanity

This is a Sanity Studio v3 plugin.

A string selection input with images, labels and tooltips. The user can also click the Expand icon to view the image in an expanded dialog box

List of options, with 4 columns and Dark Theme:

List of options, with 3 columns and Light Theme:

Expanded image:

Installation

npm install sanity-plugin-image-options

or

yarn add sanity-plugin-image-options

Usage

Add it as a plugin in sanity.config.ts (or .js):

import { defineConfig } from "sanity";
import { imageOptions } from "sanity-plugin-image-options";

export default defineConfig({
  //...
  plugins: [
    //...
    imageOptions(),
  ],
});

Now you can use as a normal schema type in your project:

import img1 from "./img1.svg";
import img3 from "./img3.png";
import img4 from "./img4.jpg";

export default defineType({
  name: "page",
  type: "document",
  fields: [
    defineField({
      name: "options",
      type: "imageOptions",
      options: {
        columns: 3, // Number of options per row (Optional, default to 4)
        aspectRatio: 1, // Aspect Ratio for the image inside the card (Optional, default to 1)
        list: [
          { value: "1", title: "Option 1", image: img1, tooltip: "Example tooltip message" },
          { value: "2", title: "Option 2 without tooltip", image: "https://.../img2.png" },
          { value: "3", title: "Option 3", image: img3 },
          { value: "4", title: "Option 4", image: img4 },
        ],
      },
    }),
  ],
});

Schema options object

Key	Type	Description
columns	Number	Number of options per row (Optional, default to 4)
aspectRatio	Number	Aspect Ratio for the image inside the card (Optional, default to 1)
list	Array of objects	List of options
List Item:
value	String	Option value
title	String	Title to be displayed below the image (if not set, it will be "Option {index}")
image	String	Image for the src image prop, can be a local or external image
tooltip	String	Optional tooltip message to show on hover

License

MIT © Rodrigo Pasini de Souza

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.