Skip to content
Get help on Slack

How to change the preview for a grid tile in a schema with an array of objects.

12 replies
Last updated: Jun 4, 2021
hello, my schema contains an array of objects. i'm display the array with 
options.layout: 'grid'
, but the grid doesn't seem to display the video field from my object that i'd like, it appears like attached. does anybody know how i'm able to change the preview for this grid tile/what fields to return from the preview function if any?
Jun 2, 2021, 4:15 AM
Hi User. You can use the 
preview.select.media
property to specify a field that can be used as a preview thumbnail, as they’ve done below the gotcha here .
Jun 2, 2021, 2:41 PM
thanks so much!
Jun 4, 2021, 12:08 AM
export default [
  {
    name: "playPage",
    type: "document",
    fields: [
      { name: 'title', type: 'string' },
      {
        name: 'videos',
        type: 'array',
        of: [{ type: 'videoWithSize' }],
        options: {
          layout: 'grid',
        },
        preview: {
          select: {
            media: 'videoWithSize.video'
          },
        }
      }
    ]
  },
  {
    name: 'videoWithSize',
    type: 'object',
    // preview: {
    //   select: {
    //     media: 'video',
    //   },
    //   // prepare(selection) {
    //   //   console.log('selection', selection);
    //   //   return ({ media: selection.video })
    //   // },
    // },
    fields: [
      { name: 'size', type: 'string' },
      { name: 'video', type: 'cloudinary.asset' },
    ]
  }
];
Jun 4, 2021, 12:25 AM
any idea why this isn't working?
Jun 4, 2021, 12:25 AM
i've tried it with the preview in the 
videoWithSize
object as well, no luck
Jun 4, 2021, 12:26 AM
also it's worth noting that the selected field is a pointing to a video
Jun 4, 2021, 12:31 AM
when i log the selection inside 
videoWithSize
i get
selection 
{media: {…}}
media:
access_mode: "public"
bytes: 10601093
created_at: "2021-03-10T23:37:29Z"
duration: 9
format: "mp4"
height: 1080
metadata: []
public_id: "jimmybrings_sophiemonk_16_9_81a37ecc_8cf10b5bf4"
resource_type: "video"
secure_url: "<https://res.cloudinary.com/paper-moose/video/upload/v1615419449/jimmybrings_sophiemonk_16_9_81a37ecc_8cf10b5bf4.mp4>"
tags: []
type: "upload"
url: "<http://res.cloudinary.com/paper-moose/video/upload/v1615419449/jimmybrings_sophiemonk_16_9_81a37ecc_8cf10b5bf4.mp4>"
version: 1615419449
width: 1920
_key: "wgSlAllEOSrVzx4DWr2cG"
_type: "cloudinary.asset"
_version: 1
__proto__: Object
Jun 4, 2021, 12:31 AM
it’s worth noting that the selected field is a pointing to a video
I’ve never seen someone put a video in the preview. You can use JSX in 
media
, and when I tried a video element it did incorporate the video (though it wouldn’t autoplay, I could right-click and watch picture-in-picture and when I paused, the preview thumbnail updated to the current frame). I’d have questions about performance though and might suggest pulling a thumbnail from each video instead.
Edit: By adding 
controls
to the video element, it’s possible to play the video. 🤷‍♂️

media: <video src="<http://res.cloudinary.com/paper-moose/video/upload/v1615419449/jimmybrings_sophiemonk_16_9_81a37ecc_8cf10b5bf4.mp4>" autoplay controls width="300" height="200">Not supported</video>

Jun 4, 2021, 1:17 AM
hmm ok
Jun 4, 2021, 1:22 AM
so just so i understand correctly, the return value of 
prepare
must contain an object with a 
media
property which points to an image or video element is that right?
Jun 4, 2021, 1:22 AM
for it to display in the array grid correctly
Jun 4, 2021, 1:23 AM
the return value of 
prepare
 must contain an object with a 
media
 property which points to an image or video element
For an image, I think a url would suffice. The extra steps in prepare are only needed to try and render out a video (same would go if one wanted to render out emojis, like the last code block in this section ).
Jun 4, 2021, 1:27 AM

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?