Get help on Discord

Array Previews - How to Add an Image of a Module

13 replies
Last updated: Mar 22, 2021
Hi!I have a question about array previews.
The user can choose between these modules and add content to them, but to make it more user-friendly I want to add an image of what the module looks like. (just like a simple wireframe) - any ideas how to do that?

In the picture you´ll see a few added modules, and a list of names: 
'module-1, module-2….'.
It’s in the list of names I want to add a picture.
Here’s the pageBuilder:

export default {
    name: 'pageBuilder',
    title: 'Page builder',
    type: 'object',
    fields: [
        {
            options: { collapsible: true },
            type: 'array',
            name: 'page',
            title: 'Page',
            of: [
                { type: 'module1' },
                { type: 'module2' },
                { type: 'module3' },
                { type: 'module4' },
                { type: 'module5' },
                { type: 'module6' },
                { type: 'module7' },
            ]
        }]
}
And one of the modules:

export default {
    name: 'module1',
    title: 'Module One',
    type: 'document',
    fields: [
        {
            name: 'imageLeft',
            title: 'Image left',
            type: 'mainImage'
        },
        {
            name: 'imageMiddle',
            title: 'Image middle',
            type: 'mainImage'
        },
        {
            name: 'imageRight',
            title: 'Image right',
            type: 'mainImage'
        },
        {
            name: "moduleTitle",
            title: "Module Title",
            type: "string",
        },
        {
            name: 'moduleParagraph',
            title: 'Block Text',
            type: 'restrictedBodyText'
        },
        {
            name: "general",
            title: "General Content",
            type: "generalModule",
            options: { collapsible: true },
        },
    ],
    preview: {
        select: {
            title: 'moduleTitle',
        }
    }
}
AI Update

You can absolutely add wireframe images to your array item previews! The key is to use a static image in the media property of your preview configuration. Here's how:

Adding Static Wireframe Images

For each module, you can import a static wireframe image and display it in the preview using the prepare function:

// Import your wireframe images at the top of each module file
import module1Wireframe from './wireframes/module1.png'; // or .svg

export default {
    name: 'module1',
    title: 'Module One',
    type: 'document',
    fields: [
        // ... your fields
    ],
    preview: {
        select: {
            title: 'moduleTitle',
        },
        prepare({title}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: module1Wireframe  // Your static wireframe image
            }
        }
    }
}

Using Icons as Fallback

If you want to use icons instead of images, you can import from @sanity/icons:

import { ImageIcon } from '@sanity/icons';

export default {
    name: 'module1',
    // ... fields
    preview: {
        select: {
            title: 'moduleTitle',
        },
        prepare({title}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: ImageIcon
            }
        }
    }
}

Combining Both Approaches

You can even show the actual content images when they exist, but fall back to your wireframe when the module is empty:

import module1Wireframe from './wireframes/module1.png';

export default {
    name: 'module1',
    // ... fields
    preview: {
        select: {
            title: 'moduleTitle',
            contentImage: 'imageLeft'  // Select one of the actual images
        },
        prepare({title, contentImage}) {
            return {
                title: title || 'Module One',
                subtitle: 'Three column image layout',
                media: contentImage || module1Wireframe  // Show content or wireframe
            }
        }
    }
}

The preview configuration documentation explains how the select and prepare functions work together. When users are adding modules to your page builder array, they'll now see your helpful wireframe images in the dropdown list, making it much easier to choose the right module!

Just make sure your wireframe images are imported correctly based on your project structure. SVGs work great for this since they're crisp at any size.

Show original thread
13 replies
You can do this in each module's preview prop
Something like this
preview: {
    
select: {
      
name: 'name',
      
language: 'language',
      
imageUrl: 'image.asset.url'
    
},
    
prepare({ name, language, imageUrl }) {
      
return {
        `title: 
Banner ${language}: ${name}
,`        `media: imageUrl && <img src={
${imageUrl}?auto=format&w=100
} style={{ objectFit: 'cover' }} />`      
}
    
}
  
}
But that only affects modules that are created.I want the picture added to the drop-down visiible in the picture above.
user R
I thought it was something similar to the following snippet, which is added to the pagebuilder? - but I can’t get it to work
preview: {
  select: {
    tag0: 'tags.0.value',
    tag1: 'tags.1.value'
  },
  prepare(selection) {
    return {
      title: [selection.tag0, selection.tag1].join(', ')
    }
  }
}
the prepare function is used in both cases, I would set it up so that if, for instance, there is no imageLeft, use a placeholder image instead
i think you want to use icon: propety
thats whats shown in the dropdown
so your module will be like
export default {
    name: 'module1',
    title: 'Module One',
    type: 'document',
    icon: ()=><img src="/static/wireframe.png" />,
    fields: [
        {
            name: 'imageLeft',
            title: 'Image left',
            type: 'mainImage'
        },
        {
            name: 'imageMiddle',
            title: 'Image middle',
            type: 'mainImage'
        },
        {
            name: 'imageRight',
            title: 'Image right',
            type: 'mainImage'
        },
        {
            name: "moduleTitle",
            title: "Module Title",
            type: "string",
        },
        {
            name: 'moduleParagraph',
            title: 'Block Text',
            type: 'restrictedBodyText'
        },
        {
            name: "general",
            title: "General Content",
            type: "generalModule",
            options: { collapsible: true },
        },
    ],
    preview: {
        select: {
            title: 'moduleTitle',
        }
    }
}
for example
user M
- That could be something!
I solved it by using Christophers solution - the difficult part of it all was adding a css class to rewrite the propsed size for an icon. (My images had to be larger to make sense)

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?