A List Apart

Menu
The A List Apart Blog Presents:

Longform Content with Craft Matrix

by · · 15 Comments

Jason Santa Maria recently shared some thoughts about pacing content, and my developer brain couldn’t help but think about how I’d go about building the examples he talked about.

The one fool-proof way to achieve heavily art-directed layouts like those is to write the HTML by hand. The problem is that content managers are not always developers, and the code can get complex pretty quickly. That’s why we use content management systems—to give content managers easier and more powerful control over content.

There’s a constant tension between that type of longform, art-directed content and content management systems, though. It’s tough to wrangle such unique layouts and styles into a standardized CMS that scales over time.

For a while, the best we could do was a series of custom fields and a big WYSIWYG editor for the body copy. While great for content entry, WYSIWYG editors lack the control developers need to output the semantic and clean HTML that make the great experiences and beautiful layouts we’re tasked with building.

This tension leaves developers like myself looking for different ways to manage content. My attention recently has been focused on Craft, a new CMS that is just over a year old.

Craft’s solution for longform content is the Matrix field. With Matrix, developers have the flexibility to provide custom fields to be used for content entry, and can write custom templates (using Twig, in Craft’s case) to be used to render that content.

A Matrix field is made up of blocks, and each block type is made up of fields—anything from text inputs, to rich text, dropdowns, images, tables, and more. Here’s what a typical Matrix setup looks like:

Configuring a Matrix field

Instead of fighting with a WYSIWYG editor, content managers choose block types to add to the longform content area, fill out the provided fields, and the content is rendered beautifully using the handcrafted HTML written by developers. I use the Matrix field to drive longform content on my own site, and you can see how much flexibility it gives me to create interesting layouts filled with images with captions, quotes with citations, and more.

To pull back the curtain a bit, here’s how my blog post Unsung Success is entered into the Matrix field:

Entering Content with the Matrix field

Three block types are used in the post seen above—an image block, a quote block, and a text block. Notice that the text block is using a WYSIWYG editor for text formatting—they’re still good for some things!

The Matrix field is endlessly customizable, and provides the level of flexibility, control, and power that is needed to achieve well-paced, art-directed longform content like the examples Jason shared. This is a huge first step beyond WYSIWYG editors and custom fields, and as we see more beautifully designed longform pieces, our tools will only get better.

About the Author

15 Reader Comments

Load Comments