Grid-like Content with Nolan

This is a guest post by TJ Draper. TJ Draper is a senior developer for Caddis Interactive in Franklin, TN, as well as the developer behind such add-ons as Construct and Category Construct. When he's not developing websites with ExpressionEngine… wait, he's always developing websites with ExpressionEngine so never mind.

We developers can be a resourceful lot when we need to be. Sometimes that gets us into trouble, and sometimes, it can be quite helpful. Obviously, I'm not writing to tell you about the former.

Recently in the hand off meeting from designer to developer, as I looked over the site, the type of content, and the design, I could see that Blocks would be a great fit for the content pattern. But as I started down that road, there was one thing missing. Two content patterns called specifically for a grid like experience within the content block. This can be a bit challenging to think about because Blocks is already very Grid-like in many ways and developing a field-type for it is basically the same as developing a field-type for ExpressionEngine's native Grid field. So getting Grid to work in Blocks would be a little bit like Inception.

However, this is not the first time such a concept has been thought up. My developer brain kicked into problem solving mode and I went and downloaded a copy of Nolan.

My first thought was to see if it would work with Blocks out of the box. I was a bit disappointed to see that, prior to Nolan 2.5.2, it was not in the Blocks field-type pop-up list. But I'm a developer so I decided to get my hands dirty. I went into the Nolan field type PHP file and modified the line that tells ExpressionEngine what the field-type is compatible with to be compatible with Blocks. I didn't expect things to go quite that well, but one has to start somewhere.

To my great surprise and delight, Nolan worked flawlessly with Blocks in both vertical and horizontal mode:

Horizontal Tabs
Horizontal Nolan tabs in a block
Vertical Tabs
Vertical Nolan tabs in a block

Syntax works the same as it does in Grid, no surprise there:

{!-- Blocks Field --}
{tabbed-content}
    {!-- Nolan Field --}
    {tabs}
        {!-- Nolan Field Variable --}
        {tab-title}
    {/tabs}
{/tabbed-content}

When I spoke with the the fine curator of Blocks, Bryan, about this, he was thrilled. Repeating content within a block (Grid) is a popular feature request it seems, and it certainly makes sense as to why that is. The ability to give content managers more ways to make content look good within defined constraints is very appealing. Bryan and Iain Urquhart, the developer behind Nolan, collaborated and Nolan 2.5.2 now officially has Blocks support. This is great news because it means I don't have to maintain my little hack that I did above. While it's just one line, it was entirely feasible that one day, future me might come swooping in and see that Nolan is out of date and very helpfully update it — clobbering everything. Nolan supporting Blocks means this will never happen!

Bottom Line

Blocks is a fantastic solution to a big need: as web developers we need to enable content managers, clients, ourselves even, to create rich, unique content that does not conform to the boundaries and barriers placed upon us by more traditional thinking about content. The old way is, "there's a text field, put some text in it" and if you're lucky, there's a terrible way to include an image or two. But when we look around the modern web — I like to point to the formatting and layout of long form story articles on The Verge as a great example — it's clear that thinking about content that way will put you out of a job — or just plain make you and/or your clients look bad. Pre-defining repeating patterns for content is like providing a kite tail for your client's kite. The sky is now the limit for rich content creation that is not limited to text and some crummy images, but is instead free to soar while still fitting in and feeling right at home with the design and development of the site.

Grid content within blocks by means of Nolan is just another step toward this goal. So, developers, put your problem solving brains to work and solve problems with Blocks and Nolan!