For big­ger, con­tent-heavy web­sites it some­times make sense to cre­ate a con­tent builder” for your clients so that they can cre­ate their own page lay­outs. 

There are some great posts on how to cre­ate a sys­tem like this with Craft but the gist of it is that you use a matrix field with a sin­gle block” for each design element/​component you want the client to be able to pub­lish.

For exam­ple, here’s how some of our con­tent maps to the blocks in our con­tent” matrix field used to pub­lish this post:

Blog Posts image

The prob­lem is that if you have a lot of these (say 5 or more), it becomes dif­fi­cult to fig­ure out exact­ly what each block does. You can name them sen­si­bly (like hero”, rich text”, call­out” etc.) but as their num­bers grow it gets hard to remem­ber them. 

Screenshot 2020 04 07 at 13 47 23 image
The list goes on. On this site we've 10s of content blocks
Screenshot 2020 04 07 at 13 46 56 image
The dropdown when publishing entries becomes huge :(

There are some great plu­g­ins already in the Craft Store like Matrix­Mate and Spoon that help to organ­ise your fields into more man­agable groups, but as your blocks grow it would help to be able to visu­alise what they’re going to look like.

That’s where Matrix Field Pre­view comes in.

Matrix Field Preview Logo image

Matrix Field Pre­view lets you con­fig­ure all of your matrix field blocks in your Craft set­tings, allow­ing you to add a descrip­tion and an image of the ren­dered block (ide­al­ly a screenshot).

Screenshot 2020 04 07 at 13 47 49 image
See your matrix blocks at a glance
Screenshot 2020 04 07 at 14 00 24 image
Upload a screenshot and add a description

Once you’ve added your descrip­tions and screen­shots, you’ll have a total­ly new pub­lish­ing expe­ri­ence when you go to edit your entries.

Instead of the reg­u­lar drop­down, you’ll now see a modal appear with all the previews.

Screenshot 2020 04 07 at 14 03 36 image

As well as the over­lay, there’s also a small­er pre­view insert­ed to each exist­ing block.

Screenshot 2020 04 07 at 14 03 47 image
There's a small thumbnail, title and description at the top of each block
Screenshot 2020 04 07 at 14 03 48 image
You can hover over the thumbnail to see the full preview

With these improve­ments it should make it eas­i­er for clients to add con­tent quick­ly and con­fi­dent­ly and take the guess work out of adding new blocks.

If you made it this far, you may also like

Syncing your DB and assets across environments in Craft 3

Tech chat default image

The most tedious part of deploying a website from local to staging to production is importing/exporting the database and user files (assets). No longer.