Skip to content
Get help on Slack

Adding image control fields in Block Content in Sanity

5 replies
Last updated: May 7, 2021
Are there any demo implementations of Block Content where there's added more controls for the placement of images within the Block Content? I'm thinking left/right alignment or centering, relative size of image (percentage), etc.? What is a recommended way of doing this?
May 7, 2021, 2:10 PM
Hey Øystein 👋
I usually use a 
string
field with a pre-defined set of options where I can map out the possible style variations. Here's a full example:
export default {
  name: 'imageBlock',
  title: 'Image block',
  type: 'object',
  fields: [
    {
      name: 'image',
      title: 'Image',
      type: 'image',
      validation: Rule => Rule.required(),
    },
    {
      name: 'alt',
      title: 'Description of the image for screen readers',
      description: '⚡ Optional but highly encouraged to make content more accessible for visually impaired folks.',
      type: 'string',
    },
    {
      name: 'size',
      title: 'Size',
      type: 'string',
      initialValue: 'md',
      options: {
        list: [
          {
            value: 'sm',
            title: 'Small'
          },
          {
            value: 'md',
            title: 'Medium'
          },
          {
            value: 'lg',
            title: 'Large'
          },
        ]
      }
    },
    {
      name: 'alignment',
      title: 'Alignment',
      type: 'string',
      initialValue: 'center',
      options: {
        layout: 'radio',
        list: [
          {
            value: 'left',
            title: 'Left'
          },
          {
            value: 'center',
            title: 'Center'
          },
          {
            value: 'right',
            title: 'Right'
          },
        ]
      }
    },
  ],
}
May 7, 2021, 3:55 PM
Hey Øystein 👋
I usually use a 
string
field with a pre-defined set of options where I can map out the possible style variations. Here's a full example:
export default {
  name: 'imageBlock',
  title: 'Image block',
  type: 'object',
  fields: [
    {
      name: 'image',
      title: 'Image',
      type: 'image',
      validation: Rule => Rule.required(),
    },
    {
      name: 'alt',
      title: 'Description of the image for screen readers',
      description: '⚡ Optional but highly encouraged to make content more accessible for visually impaired folks.',
      type: 'string',
    },
    {
      name: 'size',
      title: 'Size',
      type: 'string',
      initialValue: 'md',
      options: {
        list: [
          {
            value: 'sm',
            title: 'Small'
          },
          {
            value: 'md',
            title: 'Medium'
          },
          {
            value: 'lg',
            title: 'Large'
          },
        ]
      }
    },
    {
      name: 'alignment',
      title: 'Alignment',
      type: 'string',
      initialValue: 'center',
      options: {
        layout: 'radio',
        list: [
          {
            value: 'left',
            title: 'Left'
          },
          {
            value: 'center',
            title: 'Center'
          },
          {
            value: 'right',
            title: 'Right'
          },
        ]
      }
    },
  ],
}
May 7, 2021, 3:55 PM
Glad to explain parts that aren't clear 🙂
May 7, 2021, 3:55 PM
I see. So you just add the parameters you need as fields next to the image object? Do you do anything to change how the images within the block content is displayed in Sanity Studio?
May 7, 2021, 4:57 PM
Yup, I usually use a custom preview component that implements these parameters to let editors get a sense of what it'll look like in the front-end. If you have a React component library for your front-end, you could even render it wholesale in the studio!
May 7, 2021, 5:23 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.

Get started for freeExplore the demo

Was this answer helpful?