Introduction

We know that implementing page and content layouts in Terminalfour can be a cumbersome and error-prone task. We've made it our goal to completely reimagine the process around implementing layouts, to provide a simple yet powerful solution, one that provides developers with more control, without compromising without impacting on the cost of maintaining and further developing those layouts.

T4 Tag Layouts

T4 Tag Layouts in Terminalfour are quite restricted in their feature set.

1. The main way to implement basic logic in standard layouts is through the use of selective output T4 Tags.
2. Selective output tags are quite complex; both from an ease-of-use and readability perspective, due mainly to the requirement to escape HTML entities within the Tags.

Because of the limited feature set in standard layouts, developers that require seemingly basic conditional logic constructs are quickly thrown into the world of programmable layouts.

Programmable Layouts

Programmable layouts in Terminalfour are hugely powerful, but using them has some drawbacks.

1. They can be difficult and costly to maintain.
2. There's no separation of concerns; HTML markup and JavaScript code are intermingled.
3. Updating a programmable layout to make a small text or layout change carries increased risk over updating a standard layout; a small mistake could result in JavaScript errors during publish, or worse still, publish failing completely.

There are two main competing concerns here: ease of use and power; How can be make standard layouts more powerful, while at the same time making them easier to implement and maintain.

Handlebars Layouts

This is where Handlebars Layouts come in. They provide the power of Programmable Layouts, while improving on the ease of use of T4 Tag Layouts.

With Handlebars Layouts you can access Content Elements, Section and Channel information, and much more using simple and easy to remember Handlebars Expressions.

Conditional Logic

Handlebars Layouts also provide the ability to add conditional logic to your Layouts, without using Programmable Layouts. With Handlebars Layouts adding if, and, or, as well as other conditional operators is simple.

<h1>{{publish element="Name"}}</h1>
{{#ifSet element="Intro"}}
 <p class="t4-intro">{{{publish element="Intro"}}}</p>
{{/ifSet}}
{{{publish element="Main Body"}}}

Code Reuse (Partials)

In addition to providing for a more powerful and simple syntax than existing Layouts, Handlebars Layouts also improve reuse of code, through the use of partials; small blocks of markup, which can be embedded into multiple Layouts.

Embedding a partial in a Handlebars Layout is as simple as adding a reference to it.

{{> partialName}}

Extensibility

Yet without a doubt the most powerful things about Handlebars Layouts is their extensibility. With Handlebars Layouts you can define your own JavaScript functions that build upon and enhance the functionality provided by Handlebars Layouts. These custom functions, which are defined within their own area, can be added to any Layout by including a Handlebars Expression in the Layout with the function name.

Considering a custom function called anything as below

Custom Function

function (context, options) {
  return "If you can dream it, you can do it!";
}

Using this function in a Handlebars Layout is then as simple as adding a Handlebars Expression that calls it.

Handlebars Layout

<p>{{anything}}</p>

On publish, the custom function will be called and the below output generated.

Published Page

<p>If you can dream it, you can do it!</p>