Creating a flexible content module with different blocks using arrays in Sanity.io.
22 replies
Last updated: Jul 14, 2020
U
Hey, how would I go about creating a an array where u chose between a number of objects... basically I want to create a "flexible content" module, with diff blocks to choose from, preferebly not using a rich text editor.
Jul 14, 2020, 7:45 PM
N
like a page builder?
Jul 14, 2020, 7:50 PM
U
yeh pretty much, not sure if u have tried but comparable to ACF flexible content for WP, or Matrix fields for Craft CMS
Jul 14, 2020, 7:50 PM
N
i would make each of your "options" an object component
and setup an array in your document that uses those objects
and setup an array in your document that uses those objects
Jul 14, 2020, 7:50 PM
N
yeah, ok... i've done this a few times in sanity
Jul 14, 2020, 7:51 PM
N
something like this
Jul 14, 2020, 7:51 PM
U
yeh exactly
Jul 14, 2020, 7:52 PM
N
yeah, so thats just the
arraytype
Jul 14, 2020, 7:52 PM
U
So would it just be adding more obejcts to this?
Jul 14, 2020, 7:52 PM
U
{
title: 'Images',
name: 'images',
type: 'array',
of: [{
type: 'object',
fields: [
{ name: 'image', type: 'image', title: 'Image' },
{ name: 'w', type: 'string', title: 'Width' },
{ name: 'o', type: 'string', title: 'Offset' },
{ name: 'effect', type: 'string', title: 'Effect' },
]
}]
}Jul 14, 2020, 7:52 PM
N
are they all part of the "Images" object?
Jul 14, 2020, 7:53 PM
U
yeh well images would be "flexible content" or someting
Jul 14, 2020, 7:53 PM
N
so what i've done is built an object called
page builder
Jul 14, 2020, 7:53 PM
N
and then just dropped in the components i want to use in it
Jul 14, 2020, 7:54 PM
N
here's the code for the builder
Jul 14, 2020, 7:54 PM
N
export default {
title: 'Component Builder',
name: 'pageBuilder',
type: 'array',
of: [
{
type: 'copyBlock'
},
{
type: 'inlineImage'
},
{
type: 'video'
},
{
type: 'grid'
},
{
type: 'contentGrid'
},
{
type: 'accordion'
},
{
type: 'mondrian'
},
{
type: 'wonderfulThings'
},
{
type: 'specialComponents'
},
{
title: 'Custom Link',
type: 'specialLink'
}
],
}Jul 14, 2020, 7:54 PM
N
and then in my document (called Page in this case) i just add the builder in
Jul 14, 2020, 7:54 PM
N
add it as a field, like so
{
title: 'Page Builder',
name: 'componentList',
type: 'pageBuilder'
},Jul 14, 2020, 7:55 PM
N
then in studio when i choose one from teh array its pops up the appropriate input fields
Jul 14, 2020, 7:55 PM
U
dope, great. this is very helpfulš
Jul 14, 2020, 7:56 PM
N
looks like this with a few items added
Jul 14, 2020, 7:56 PM
N
and then you can drag/drop to re-order as needed
Jul 14, 2020, 7:56 PM
U
great, worked fine:) thx a lot
Jul 14, 2020, 9:04 PM
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.