How to add multiple images side-by-side (2x1 grid) in Portable Text?
Based on your question, what you're looking for is a custom block type rather than trying to modify the default image insertion. The single image behavior you're seeing is by design - when you add { type: 'image' } to your Portable Text array, it inserts one image at a time.
To achieve a 2-by-1 image layout (or any multi-image gallery), you'll want to create a custom block type. Here's how:
// First, define a custom image gallery block type in your schema
{
name: 'imageGallery',
title: 'Image Gallery',
type: 'object',
fields: [
{
name: 'images',
title: 'Images',
type: 'array',
of: [{ type: 'image' }],
validation: Rule => Rule.max(2) // Limit to 2 images for your 2x1 layout
},
{
name: 'layout',
title: 'Layout',
type: 'string',
options: {
list: [
{ title: '2 by 1', value: '2x1' },
{ title: 'Single', value: '1x1' }
]
}
}
],
preview: {
select: {
images: 'images',
layout: 'layout'
},
prepare({ images, layout }) {
return {
title: `Image Gallery (${layout})`,
subtitle: `${images?.length || 0} images`
}
}
}
}
// Then add it to your content field
{
name: 'content',
title: 'Post content',
type: 'array',
of: [
{ type: 'block' },
{ type: 'image' }, // Keep this for single images
{ type: 'imageGallery' } // Add your custom gallery block
],
description: 'Content of this post',
}When it comes to rendering, you'll handle the layout in your frontend code. The Sanity editor just lets content creators choose which images to include - the 2x1 visual layout happens when you render it. For example, with React:
<PortableText
value={content}
components={{
types: {
imageGallery: ({ value }) => (
<div className="grid grid-cols-2 gap-4">
{value.images?.map((image, idx) => (
<img key={idx} src={urlFor(image)} alt="" />
))}
</div>
)
}
}}
/>The Portable Text documentation covers custom blocks in detail, and there's a great guide on adding custom blocks like YouTube embeds that follows the same pattern.
So to answer your question directly: the layout is something you control in your rendering code, but you need to create a custom block type in the schema to allow editors to add multiple images as a single unit.
Show original thread21 replies
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.