👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with images in SANITY studio and how to fix it.

5 replies
Last updated: Aug 18, 2021
Hey fine folks! Quick question - does anyone else have images in their SANITY studio look like this? I remember at one time I used to be able to see the actual image in the portable text editor but now I get these less than ideal inline elements. Does it maybe have something to do with needing to hoist the GraphQL schema? Here is what my image schema looks like in SANITY, which is then used inside the blockContent type.

export default {
  name: "figure",
  title: "Image",
  type: "image",
  options: {
    hotspot: true,
  },
  fields: [
    {
      title: "Caption",
      name: "caption",
      description: "Leave blank if you do not want a 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: "alt",
    },
  },
}
Aug 18, 2021, 2:05 AM
Hey User! I don’t believe this is a hoisting issue and may just be change that was made to the studio itself. The docs do show the full image in the editor, so I’m confirming with the rest of the team.
Aug 18, 2021, 5:05 PM
Ok, so got clarity here! It’s actually due to the preview you’ve specified on your image schema. You can either remove the preview or add a
prepare()
option as well as a custom preview component . A simple example would be:
const Preview = ({value}) => {
  return <div>hello</div>
}
{
  name: 'someImageBlock',
  type: 'object',
  title: 'Image',

  preview: {
    select: {
      imageUrl: 'image.asset.url'
    },
    prepare(selection){
      return selection
    },
    component: Preview
  }
}
Aug 18, 2021, 5:50 PM
Thanks User! I will test this tonight!
Aug 18, 2021, 5:52 PM
Happy to help! Let me know how it goes!
Aug 18, 2021, 5:55 PM
Happy to help! Let me know how it goes!
Aug 18, 2021, 5:55 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.

Was this answer helpful?