Get help on Discord

Trouble getting image preview to show in Sanity schema

18 replies
Last updated: Mar 23, 2022
Hey, I'm having trouble getting a preview of the image to show up in sanity. I searched this Slack and found similar problems, but still couldn't get it to work.
Mar 23, 2022, 2:32 PM
export default {
  name: "imageGallery",
  type: "object",
  title: "Image Gallery",
  fields: [
    {
      name: "section",
      type: "string",
      title: "Section",
      description: "Used for labeling and internal reference ",
    },
    {
      name: "images",
      type: "array",
      title: "Images",

      of: [
        {
          name: "image",
          type: "image",
          title: "Image",
          options: {
            hotspot: true,
          },

          fields: [
            {
              name: "alt",
              type: "localeString",
              title: "Alternative text",
            },
            {
              name: "mobileImage",
              type: "image",
              title: "Mobile Image",
              options: {
                hotspot: true,
              },
            },
          ],
        },
      ],
      preview: {
        select: {
          media: 'images', 
          title: 'alt'
        }
      },
      prepare({ media, title ="something" }) {
        return {
          media,
          title
        };
      },
    },
  ],
};

Mar 23, 2022, 2:32 PM
You’re currently getting the array of images, you need to select one to show, eg. to show the first one:

preview: {
  select: {
    media: 'images.0',
    title: 'alt'
  }
},
Mar 23, 2022, 2:37 PM
Hey, thanks for the reply. Yeah, I tried that, but it still doesn't show up. Here's what I see
Mar 23, 2022, 2:49 PM
user F
Have you tried 
image
?
I can't tell, but if "pink3.jpeg" is truly your alt text, then that means the preview that's pulling data in from the correct level.
Mar 23, 2022, 2:53 PM
yeah, I've tried image and also tried changing the level where my preview is too, but I haven't been able to get it to work
Mar 23, 2022, 2:55 PM
Is the alt text field correct or no?
Mar 23, 2022, 2:56 PM
you're correct, that's the file name, not the alt
Mar 23, 2022, 2:56 PM
so it's not pulling in the alt either
Mar 23, 2022, 2:56 PM
Gotcha. Try this: Extract that `images`field into its own schema object and referencing its type here. The preview should then work.
I haven't been able to get nested previews to work on my side FWIW so this has been my work around. Curious if the Sanity team has a workaround or if this is a bug!
Mar 23, 2022, 2:59 PM
prepare
needs to be inside 
preview
Mar 23, 2022, 3:00 PM
user J
That helped me get the alt text to come in, but the image still doesn't show.I've tried 
images
images.0
image
and 
image.0
Mar 23, 2022, 3:06 PM
export default {
  name: "imageGallery",
  type: "object",
  title: "Image Gallery",
  fields: [
    {
      name: "section",
      type: "string",
      title: "Section",
      description: "Used for labeling and internal reference ",
    },
    {
      name: "images",
      type: "array",
      title: "Images",

      of: [
        {
          name: "image",
          type: "image",
          title: "Image",
          options: {
            hotspot: true,
          },

          fields: [
            {
              name: "alt",
              type: "localeString",
              title: "Alternative text",
            },
            {
              name: "mobileImage",
              type: "image",
              title: "Mobile Image",
              options: {
                hotspot: true,
              },
            },
          ],
          preview: {
            select: {
              media: 'images.0', 
              title: 'alt.en'
            },
            prepare({ media, title ="something" }) {
              return {
                media,
                title
              };
            },
          },
        },
      ],
     
      
    },
  ],
};

Mar 23, 2022, 3:06 PM
Thanks
user M
I did try that, but still didn't work
Mar 23, 2022, 3:31 PM
Got it. If it's in an image object, you need to select the asset:
{
              name: 'image',
              type: 'image',
              title: 'Image',
              options: {
                hotspot: true,
              },
              preview: {
                select: {
                  media: 'asset',
                  title: 'alt.en',
                },
                prepare({ media, title = 'something' }) {
                  return {
                    media,
                    title,
                  };
                },
              },
Mar 23, 2022, 3:39 PM
Got it. If it's in an image object, you need to select the asset:
{
              name: 'image',
              type: 'image',
              title: 'Image',
              options: {
                hotspot: true,
              },
              preview: {
                select: {
                  media: 'asset',
                  title: 'alt.en',
                },
                prepare({ media, title = 'something' }) {
                  return {
                    media,
                    title,
                  };
                },
              },
Mar 23, 2022, 3:39 PM
amazing!! That did the trick
Mar 23, 2022, 3:41 PM
Thanks so much!!
Mar 23, 2022, 3:41 PM
You're welcome!
Mar 23, 2022, 3:44 PM

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?