Templates

A big part of why Coilpack was created is to allow you to express your content through multiple templating engines. We currently support two powerful and popular options: Twig and Blade.

The following is a brief overview of the available template languages to help you decide which language might suit you best.

Blade is a great option if you are familiar with the PHP language. It offers some nice syntactical improvements over plain PHP while keeping the power and control.

Twig provides a great layer of abstraction over plain PHP while providing familiar control structures and a filter system to accomplish most things possible in raw PHP.

ExpressionEngine Native template language is a simplified syntax designed to be easily understood by someone unfamiliar with PHP or programming languages in general.

Twig and Blade in ExpressionEngine

In ExpressionEngine 7.2.3+ you can create a regular template file and add the suffix .twig or .blade to the file. This will tell ExpressionEngine which template engine should be used to render your content.

For example you might want to create a blog listing that is rendered with Twig. You would do this by creating a file at user/templates/blog.group/index.html.twig.

Learn more about using Twig in ExpressionEngine from our guide.

Twig and Blade in Laravel

If you manage your templates inside your Laravel application you will just need to create files in your resources/views folder with either a .twig or a .blade.php extension and include them with the view() helper. The Laravel documentation is a great resource for learning more about views.

Template Tag Syntax

Coilpack aims to maintain a familiar syntax with native ExpressionEngine templates in both Twig and Blade. Here is a simple example of how a module tag would be rendered in each of the available template engines.

Native

{exp:module_name:tag_name parameter_1="value_1"}

Twig

{{ exp.module_name.tag_name({parameter_1: 'value_1'}) }}

Blade

{{ $exp->module_name->tag_name(['parameter_1' => 'value_1']) }}

Channel Entries

In ExpressionEngine much of our content is retrieved through the Channel Entries Tag which is a tag pair that would be used like this in a template:

Native

{exp:channel:entries channel="blog"}
    <h1>{title}</h1>
    <div>
        {page_content}
    </div>
    {if no_results}
        <span>No blog entries</span>
    {/if}
{/exp:channel:entries}

Twig

{% for entry in exp.channel.entries({channel: 'blog'}) %}
    <h1>{{ entry.title }}</h1>
    <div>
        {{ entry.page_content }}
    </div>
{% else %}
    <span>No blog entries</span>
{% endfor %}

Blade

@forelse($exp->channel->entries(['channel' => 'blog']) as $entry)
    <h1>{{ $entry->title }}</h1>
    <div>
        {{ $entry->page_content }}
    </div>
@empty
    <span>No blog entries</span>
@endforelse

Referencing other templates

Both and Twig and Blade provide methods for including other template files. When you do this with files inside your user/templates folder you will need to include the ee:: namespace in the path.

For instance if we want to extend a layout or include a partial we would write:

Twig

{% extends 'ee::folder._layout' %}

{% include 'ee::folder._partial' %}

Blade

@extends('ee::folder._layout')

@include('ee::folder._partial')

tip

It is convention within ExpressionEngine to prefix a template name with an underscore when it should be 'private' and not accessible through the typical template routing. That means our example template folder/_partial would not be visible at http:://site-url.test/folder/_partial

Embedding Native templates

It is also possible to embed a native ExpressionEngine template inside of a Twig or Blade template. Just specify the template_group/template path and optionally pass a key/value map of embed variables.

Twig

{{ exp.embed('_partials/header', {title: 'Embed Variable'}) }}

Blade

{{ $exp->embed('_partials/header', ['title' => 'Embed Variable']) }}

note

You should not prefix the path for native templates you are embedding

Embedding Twig and Blade from Native

Since Coilpack is augmenting the behavior of the Template parser it is also possible to embed a Twig or Blade template within your native ExpressionEngine templates.

{embed="template_group/twig_template" title="Embed Variable"}

You can access embed variables within Twig and Blade like this:

Twig

<h1>{{ embed.title }}</h1>

Blade

<h1>{{ $embed['title'] }}</h1>

Global Variables

All of the regular ExpressionEngine global variables are available to you inside Twig and Blade views. A few small adjustments are necessary though to work with the new templating engines. Here is an example of how global variables are prefixed and are accessed differently in Twig and Blade:

Native

{structure:parent:id}

Twig

{{ global.structure.parent.id }}

Blade

{{ $global->structure->parent->id }}

Example Usage

We have provided the default ExpressionEngine theme converted into Twig and Blade as a point of reference. You can view these files in your vendor/expressionengine/coilpack/resources/views folder.

Add-on Developers

If you are an ExpressionEngine Add-on developer looking to understand more about how Coilpack handles template tags in Twig and Blade please read our Add-ons Documentations.