Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Deploying Next JS on VercelJan 20, 2021
Rendering nested block contentJan 18, 2021
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Next.js and Vercel - Error! No Output Directory named "dist" foundAug 8, 2022
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Error in Next.js tutorial with event handlers in server components.Feb 28, 2024
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar