Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Get help on SlackWatch Sanity demo

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',
        }
    }
}
Mar 22, 2021, 10:04 AM
You can do this in each module's preview prop
Mar 22, 2021, 10:24 AM
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' }} />`      
}
    
}
  
}
Mar 22, 2021, 10:24 AM
But that only affects modules that are created.I want the picture added to the drop-down visiible in the picture above.
user R
Mar 22, 2021, 10:26 AM
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(', ')
    }
  }
}
Mar 22, 2021, 10:28 AM
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
Mar 22, 2021, 10:28 AM
i think you want to use icon: propety
Mar 22, 2021, 10:29 AM
thats whats shown in the dropdown
Mar 22, 2021, 10:29 AM
so your module will be like
Mar 22, 2021, 10:30 AM
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',
        }
    }
}
Mar 22, 2021, 10:30 AM
for example
Mar 22, 2021, 10:30 AM
user M
- That could be something!
Mar 22, 2021, 10:32 AM
Mar 22, 2021, 10:39 AM
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)
Mar 22, 2021, 3:49 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
Template

Featured
Official

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen

Blog with Built-in Content Editing
Template

Featured
Official

A Sanity-powered blog with built-in content editing and instant previews.