Drupal Custom Layout Tool

A Flexible Content Type for Content Creators

I had a long-term goal of creating a tool for content creators to build custom layouts in Drupal. Not just choose from a list of layouts, but control the display of individual content elements. Here is the case study of that tool.

Project Details

Tools

Drupal
CSS
JQuery
Paragraphs Module
Layout Builder

Roles

Design
Front-end Development

The Goal

I began my Drupal career as a content designer. I was assigned to create feature articles with sections that had a variety of layouts and styles. Since feature articles often have their own look (see Huffpost Highline), somewhat like a subtheme, this required a very flexible Drupal component which was not available. After struggling with workarounds for a few years, I had the opportunity to rebuild an entire Drupal website...and I decided to try something.

a collection of web layouts and mobile web layouts

My work as a content designer for news features required me to create a wide variety of section layouts with a quick turnaround time.

The First Custom Layout Tool

I was tasked with redesigning and rebuilding Georgia Tech's brand site (see that project here). This involved a content migration from Drupal 7 to Drupal 8 and provided an opportunity to explore using new tools.

Since I knew the Layout Builder module would allow me to add rows of content as a node was being built, I used it for that capability. However, I was dissatisfied with the way layout builder handled the layouts of flex column elements.

My solution was to build a custom block type which leveraged the Paragraphs module and allowed me to provide an assortment of layout options in the form of Paragraphs. The Paragraph flex items each contained a text editor, giving the content creator a great deal of flexibility.

The Georgia Tech Brand site rebuild presented an opportunity to try building a custom layout tool.

The Brand Site custom layout tool used the Paragraphs module to provide a collection of flex column layouts, but was limited by a dependency on Layout Builder to add rows of content to a node.

I created an instructional guide to help content creators use the new tool and be aware of the options it provides.

The Second Custom Layout Tool

The next opportunity came when I was invited to help our development team to migrate the Georgia Tech News site from Drupal 7 to Drupal 8. This was the same site where I had built many unique feature stories with custom layouts — the original inspiration for developing this tool. I wanted to try and go a step further, creating a layout tool that used only one module dependency:Paragraphs, which is well-supported and has excellent functionality. I needed to eliminate the need for the Layout Builder module.

Select the image of the custom content tool to see a full-size version or view the image here.

I built the tool as a new content type. I was happy with the results, but I was missing one thing. I still could only figure out how to allow my content creator to add a limited number of columns to any given layout row. I wanted to allow them to add an unlimited number of rows and columns to give them full flexibility. So I pushed my code to github and asked my lead developer, Fletcher Moore, if he could look at it. He immediately understood what I was trying to do and had an ideal solution, an approach he referred to as "entity in entities,” which allows an unlimited columns to be added to unlimited rows of content using the Paragraphs module. While he finished applying this solution, I wrote styles for the content creator’s UI to make this complex tool easier to use. Below is a screenshot of the UI a content creator interacts with:

I’m particularly excited about this tool because it allowed me to use my design and development skills to create something which allows others to be creative without knowing how to code. But the best part was that it was such a successful collaboration with my web development team. I couldn’t have done this without Fletcher.