The Concept Of Layouts In ExpressionEngine

The template is the soul of your website. By hiring an ExpressionEngine developer, you can ensure that your website outshines your competition with a vivid layout. Templates in an ExpressionEngine website consist of chunks of information like the header, footer and the scripts that can yield desired outputs like HTML/CSS, XML, RSS and many more. Templates are either made of subsections in a single page or consist of an entire web page. 

In ExpressionEngine, there are template groups and templates. Templates contain the page content of the site.

What Are Layout Templates And Template Groups?

A template layout works by wrapping the template information of particular sub-sections.
The layout is a template. In the template layout, you can create sub-sections like header and footer, and you can wrap the layout template in the particular current template with the help of following the layout tag.

To define the template layout, all you have to do is use the layout tag, i.e.,
Layout Tag –
The layout tag must be at the top of your template.
{layout = “template group/template”}

The template group will be the name of the template group, and the template will be the template’s name.

{layout= “layouts/wrapper”}
Here, layouts are the template group, and the wrapper will be the template of layouts template group. In the wrapper template, you need to add is the content.

How Do They Function?

The main role of the template layout is to define the content uniquely. The layout can be extended to other layouts.
You can add duplicate content of many pages on a single page.

Instead of adding the content manually, you can populate the content in the layout template and wrap the content with the layout tag.

To specify the layout content where it will be shown, you must use the layout content tag –

{layout:contents}

With the layout contents tag’s help, you can insert the header and footer’s content on a single page. You have to define where you want to add the layout content.

For Example

{layout:contents}

To wrap the content in the current template.

Example

{layout =”layouts/.wrapper”}

{exp:channel:entries channel=”blog”}

     <h3>{title}</h3>
     {summary}
{/exp:channel:entries}

How To Implement The Concept Of Layout In Templating?

To use the layout tag, you need to follow the below steps: –

1. Create the new template group for the layout.
2. Create a template inside the layout template group.
– It will be a hidden template named a prefix with the dot(.) or underscore(_).
– This template will be hidden from the user and not useful for the user.

3. In the .wrapper template, you need to add a Header, footer, and specify the layout content tag where it will be shown the content.

4. After that, you have to add the layout tag in the primary or current template to show the content.

Layout Variables —

Dynamic Variables —

• {layout:set}
• {layout:set:append}
• {layout:set:prepend}

Static Variables —

• {layout:login_required}
• {layout:set}

Dynamic Variables —

With dynamic variables, you can create variables that you can use directly in your layouts.
You can set the content of pages through the dynamic variables.
For example – title tag, sidebar content, navigation content.

You can define the content in dynamic variables in the following ways that are described below.

1.  {layout:set} – Layout:set is just setting up a variable for the content. The content will be set in the variable name that you create. You have to set the variable after the channel entries in the main template.

For Example –
{layout:set name=’title’}My Blog Title{/layout:set}

With this variable’s help, you will get the content when you add the variable name in the layout template.

For Example

{layout:title}

1.  {layout:set:append} – layout:set:append creates a list and you can create a loop when you want to get the particular content in a loop.

{exp:channel:entries channel=’’blog’’}
{layout:set:append name=’titles’}
{title}
{/layout:set:append}
{/exp:channel:entries}

After that, you will get the content to display the layout with the {value} variable in a loop.

For Example 

{layout:titles}
{value}
{/layout:titles}

2. {layout:set:prepend} – This dynamic variable tag works the same as the {layout:set: append} except when the new values/items are added. It’s shown the value on the front side of the list instead of added on the backside.

{layout:set:prepend}

Static Variables –

With the help of static variables, you can define the static contents, and you can pass its parameters in the layout template.

Static-variables have two shortcuts :-

{layout:login_required} –

{if layout:login_required == ‘yes’}
{embed=’site/_login-member’}
{/if}

{layout:set} –

{layout:set name=’login_required’ value=’yes’}

The Pros And Cons Of Template Layout

Pros

• Using Multiple Selection – You can use layouts to build multiple sections of your site.
• Structure -Layouts provide perfect structure to a template of your site.
• Single template – You can create a single template through layout instead of creating/embedding two other templates.

On The Flip Side

• Single Layout – You can only define a single layout in a template.
• Layout set – In {layout: set} tag, it doesn’t give the template’s output until it’s not defined in the parent layout.

Conclusion

How could you overcome a problem to share everyday things like header, footer, and sidebar across your site’s single page? This is the step by step complete guide to implement the concept of layouts in ExpressionEngine and to build your expression engine website in modern templating systems. There are also some creative ways to use layout variables and set variable lists and this blog elucidates some of the ways. In case you want some help in creating vivid templates for your ExpressionEngine website, you can always get in touch with us to hire ExpressionEngine developers.