Template Layouts in ExpressionEngine 2.8

At some point in their ExpressionEngine career every template developer realizes they can make their job easier by turning their common HTML header and footer into embeds.

First a common header:

<html>
    <
head>
        <
title>{embed:title}</title>
    </
head>
    <
body

Then a common footer:

</body>
</
html

This typically results in every template including this header and footer embed:

{embed="site/.header" title="The Title"}
    Template Contents
{embed
="site/.footer"

ExpressionEngine’s control panel view files, the files that hold the control panel markup, used to be constructed very similarly. Two years ago, for our 2.5.2 release, we decided that this was still very repetitive. Our solution was to invert the view structure. Instead of including two views everywhere, we built a common parent view and put each rendered page inside this parent.

In ExpressionEngine 2.8, we’re happy to bring this functionality to our template engine. We call it Template Layouts and if you know embeds, then this will be the easiest thing you learn all week. Instead of the two embeds above, you create a single layout template:

<html>
    <
head>
        <
title>{layout:title}</title>
    </
head>
    <
body>
        
{layout:contents}
    
</body>
</
html

For every template that should have this header and footer, you simply declare the layout at the top:

{layout="site/.layout" title="The Title"}
Template Contents 

As you can see it works almost exactly like an embed!

Declaring layouts at the top of the template means that you can immediately spot how your templates interact. This is priceless for developing and debugging a site. Unfortunately it limits the usefulness of passing data in parameters.

To get around this problem, we created the tag. With you can set layout parameters throughout the rest of your template. For example, you might want to display information from a channel entries tag in your layout:

{layout="site/.layout" title="The Title"}

{exp
:channel:entries channel="blog" limit="1"}
    
<h1>{title}</h1>
    
{body}

    {layout
:set name="title"}{title}{/layout:set}
{
/exp:channel:entries} 

Dynamically set variables will override a parameter of the same name. If there is a blog entry on this example template the page title will reflect it, otherwise it will show “The Title”.

Layout variables are not limited to small tags, you can pass around any content. For example, you might need to add template specific JavaScript:

{layout="site/.layout" title="The Title"}

{layout
:set name="js"}
    
<script src="/d3.js"></script>
    
<script src="/awesome-visual.js"></script>
{
/layout:set} 

And that’s just the beginning. Embeds can have layouts, too. Even layouts can have layouts! The possibilities are limitless.

We believe that you shouldn’t need to be a programmer to build your site. Clean, simple, and powerful - that’s Template Layouts in ExpressionEngine 2.8.

.(JavaScript must be enabled to view this email address) or share your feedback on this entry with @ellislab on Twitter.