We use cookies to help make our site work properly and to analyze how our site is used. Some are optional, but none contain your personal information, and we don't use any for ads. You can view our cookies policy, manage your cookie preferences, or consent and dismiss this banner by clicking agree:

Entry

New to ExpressionEngine 4: Layout Lists

The 2017 EE Conf was an absolute blast. One of the things I enjoyed most was sharing a sneak peak of version 4 with attendees. It was madly fun to watch peoples’ faces as the possibilities version 4 brings to the table suddenly started to ‘click’.

One of those aha moments came from ExpressionEngine 4’s ability to define lists of data in template layouts rather than just a single item.

Lists make it easier to keep your data ‘pure’ and separated from your markup. This allows you to write DRYer (Don’t Repeat Yourself) code. DRY code is faster to write and easier to maintain. Win-win.

Let’s take a look at an example, using the open source Bootstrap template Modern Business as a starting point for our design.

On the content templates, you simply put together the HTML for the breadcrumbs and pass them over to the layout. Since all breadcrumbs will have ‘Home’ as the starting point, we handle that on in the actual layout, reducing the chance of typos and removing redundancy.

Then in the layout template, you have your opening and closing list tags, your ‘Home’ breadcrumb, and your breadcrumbs layout variable, which contains the marked up list items defined on the content template.

This works beautifully for our HTML breadcrumbs. But if we could separate out the content from the markup, it would be even better. Right now, the markup is spread across many templates, making it more difficult to update. If the breadcrumb markup was only on the layout template, it would be a snap to change it out. Further, abstracted content could be used in a variety of ways instead of being tied specifically to the HTML.

For example, you might add some structured markup to your templates in the form of a BreadcrumbList. Google can make good use of structured markup, and clients love it when you make Google happy.

The code to create the structured markup for a BreadcrumbList uses the same basic content our HTML breadcrumbs use. Both need a name, a link, and a way to indicate their position in the list.

Despite the fact the information needed for the HTML and BreadcrumbList is the same, in version 3 it wasn’t possible to resuse the content in the two lists. The content couldn’t be separated from the markup in a way that would allow that. To have both, you’d need to create two separate breadcrumb variables, one using HTML and one using JSON.

In version 4, we can set that breadcrumb content once and then output it as either HTML or JSON by putting the crumb data into lists.

Layout lists using Append and Prepend

ExpressionEngine version 4 introduced the append and prepend layout tags.

Instead of creating a single breadcrumb variable containing the breadcrumb markup, you can add to lists of breadcrumb variables that can then be output using any markup you choose.

Username

Password

Email Address

Used to log in

Display Name

Password

By registering, you agree to our terms of service, including receiving some tips and offers from us from time to time. We never spam, and we never share your email address with third parties. Terms of ServicePrivacy Policy