👀 See Sanity in action: Watch product demo now →

Adding Multiple Images with Portable Text

21 replies
Last updated: Apr 26, 2021
Hello, folks. I have some image/portable text issue I’m trying to resolve.

{
  name: 'content',
  title: 'Post content',
  type: 'array',
  of: [{ type: 'block' }, { type: 'image' }],
  description: 'Content of this post',
}
helps me add an image in my portable text, but this is just a single image. As in 1 by 1 (first image). Is there a way to do 2 by 1 (second image)? Or is this something I do when I render inside my code and not with the editor?
Apr 26, 2021, 9:14 AM
Make a new schema for this called gallery, or imageList or something like that
Apr 26, 2021, 10:04 AM
user E
Done. What about the content? What type?
object
?
Apr 26, 2021, 10:05 AM
object makes the most sense, unless you want to query all your image galleries somewhere in one place
Apr 26, 2021, 10:06 AM
{
  name: '2by1imageList',
  title: '2 by 1 Image List',
  type: 'object',
  fields: [
    {
      name: 'columns',
      title: 'Columns',
      type: 'array',
      of: [{ type: 'image' }],
    },
  ],
},
Apr 26, 2021, 10:07 AM
Like that?
Apr 26, 2021, 10:07 AM
the beauty of the array is that it can contain 1 or 100's of images
Apr 26, 2021, 10:08 AM
what I like to do is make one image list schema, and then make a new field where you can select how the list should be displayed
Apr 26, 2021, 10:09 AM
Essentially a “list of images”
Apr 26, 2021, 10:09 AM
export default {
  name: 'gallery',
  type: 'object',
  title: 'Gallery',
  fields: [
    {
      name: 'images',
      type: 'array',
      title: 'Images',
      of: [
        {
          name: 'image',
          type: 'image',
          title: 'Image',
          options: {
            hotspot: true,
          },
          fields: [
            {
              name: 'alt',
              type: 'string',
              title: 'Alternative text',
            },
          ],
        },
      ],
      options: {
        layout: 'grid',
      },
    },
    {
      name: 'display',
      type: 'string',
      title: 'Display as',
      description: 'How should we display these images?',
      options: {
        list: [
          { title: 'Stacked on top of eachother', value: 'stacked' },
          { title: 'In-line', value: 'inline' },
          { title: 'Carousel', value: 'carousel' },
        ],
        layout: 'radio', // <-- defaults to 'dropdown'
      },
    },
  ],
  preview: {
    select: {
      images: 'images',
      image: 'images.0',
    },
    prepare(selection) {
      const { images, image } = selection;

      return {
        title: `Gallery block of ${Object.keys(images).length} images`,
        subtitle: `Alt text: ${image.alt}`,
        media: image,
      };
    },
  },
};
Apr 26, 2021, 10:10 AM
That should get you started 😉
Apr 26, 2021, 10:10 AM
the preview part is a bit hacky, didn’t get around to making it better yet
Apr 26, 2021, 10:11 AM
the beauty of this approach is that you can change display of your images without having to re-upload or re-select or change schema types…
Apr 26, 2021, 10:11 AM
😂 The future is bright. Thank you so much. Let me work with this
Apr 26, 2021, 10:13 AM
you’re welcome
Apr 26, 2021, 10:14 AM
I’d just use the display key to toggle the display. This is so so helpful!
Apr 26, 2021, 10:15 AM
I should post this on the snippets & schemas site 🙂
Apr 26, 2021, 10:16 AM
You should. It’s really helpful. I realise I could also specify image size and display it that way instead of messing with the dimension
Apr 26, 2021, 10:17 AM
Oh yes, you can add a field “shape” and set it to landscape/square/portrait, or even use numeric values if you’re brave enough
Apr 26, 2021, 10:18 AM
Exactly!
Apr 26, 2021, 10:24 AM
Finally got it to work. 😄
Apr 26, 2021, 11:28 AM
Very nice!
Apr 26, 2021, 11:44 AM

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.