Skip to content

Instantly share code, notes, and snippets.

@brandonkelly
Last active February 7, 2024 15:20
Show Gist options
  • Save brandonkelly/8584132 to your computer and use it in GitHub Desktop.
Save brandonkelly/8584132 to your computer and use it in GitHub Desktop.
Templating in EE vs. Craft

Templating in EE vs. Craft CMS.

Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.

Table of Contents

  1. Comments
  2. Conditionals
  3. Loops
  4. Looping Through Entries
  5. Single-Entry Pages
  6. Looping Through Matrix Rows
  7. Looping Through Assets
  8. Template Inheritance
  9. Template Includes
  10. Stuff You Can Only Do in Craft
  11. Other Resources

1. Comments

Let’s start simple! Both CMSes support comment tags, enabling you to make notes in the template code that never make it to the browser.

ExpressionEngine

{!-- You can’t see me! --}

Craft

{# You can’t see me! #}

Resources:


2. Conditionals

ExpressionEngine

{if something == 'value'}
    ...
{if:elseif something_else == 'other_value'}
    ...
{if:else}
    ...
{/if}

Craft

{% if something == 'value' %}
    ...
{% elseif somethingElse == 'otherValue' %}
    ...
{% else %}
    ...
{% endif %}

Resources:


3. Loops

ExpressionEngine

EE loops are always done with tag pairs, named after what we’re looping through.

{exp:channel:entries channel="news"}
    {matrix_field}
        ...
    {/matrix_field}
{/exp:channel:entries}

Craft

Looping through things in Craft is always done with a for-loop, where you pass in what you want to loop through, as well as what you want to call each item within the loop.

{% for entry in craft.entries.section('news') %}
    {% for block in entry.matrixField %}
        ...
    {% endfor %}
{% endfor %}

There are pros and cons to both ways: EE’s is arguably more elegant for simple things, but you can quickly run into tag name conflicts and other gotchas when dealing with more complex templates with nested loops. That’s never an issue with Craft.

Both CMSes have various tags that are available within the loops, as well:

Thing ExpressionEngine Craft
How many items? {total_results} {{ loop.length }}
1-based index {count} {{ loop.index }}
0-based index - {{ loop.index0 }}
Number of items left - {{ loop.revindex0 }}
Number of ites left, inc. this one - {{ loop.revindex }}
First item? {if count == 1} {% if loop.first %}
Last item? {if count == total_results} {% if loop.last %}
Odd? {if count % 2 == 1} {% if loop.index is odd %}
Even? {if count % 2 == 0} {% if loop.index is even %}
Cycle through values for each item {switch='odd|even'} {{ cycle(['odd','even'], loop.index0) }}
The parent loop’s index - {{ loop.parent.loop.index }}

Resources:


4. Looping Through Entries

ExpressionEngine

ExpressionEngine’s {exp:channel:entries} tag is optimized for this task. Just tell it which channel, how many, and so on. (And don’t forget dynamic="no" on single-entry pages!)

{exp:channel:entries channel="news" limit="10"}
    <h2><a href="{path='news/{url_title}'}">{title}</a></h2>
    <p>{summary}</p>
{/exp:channel:entries}

Craft

In Craft you grab the entries using craft.entries and loop through them with a for-loop. You get to choose a variable name that each entry is going to be set to. In this case we’re going with newsEntry so it’s clear which ‘title’ we’re outputting, etc..

{% for newsEntry in craft.entries.section('news').limit(10) %}
    <h2><a href="{{ newsEntry.url }}">{{ newsEntry.title }}</a></h2>
    <p>{{ newsEntry.summary }}</p>
{% endfor %}

Resources:


5. Single-Entry Pages

ExpressionEngine

On templates EE thinks are for displaying a single entry, {exp:channel:entries} will only return that one entry by default – based on a URL Title match with the second URI segment.

{exp:channel:entries channel="news"}
    <h1>{title}</h1>
    {body}
{/exp:channel:entries}

Craft

Entries in Craft can have explicit URLs, so when one of those URLs is requested, Craft can confidently know which entry you’re trying to access, and which template it should load. In the process it will pass an entry variable, pre-set to the entry you’re accessing. (Note that in this case the entry variable name is not customizable.)

<h1>{{ entry.title }}</h1>
{{ entry.body }}

Resources:


6. Looping Through Matrix Rows

ExpressionEngine

Matrix follows the standard EE fieldtype convention of parsing a tag pair based on the field’s short name:

{matrix_field}
    {column_one}
    {column_two}
{/matrix_field}

Craft

As with looping through entries, we loop through Matrix blocks using a for-loop.

{% for block in entry.matrixField %}
    {{ block.fieldOne }}
    {{ block.fieldTwo }}
{% endfor %}

If you have multiple block types, you can add conditionals for them:

{% for block in entry.matrixField %}
    {% if block.type == "text" %}
        {{ block.textField }}
    {% elseif block.type == "quote" %}
        <blockquote>{{ block.quoteField }}</blockquote>
        <p>– {{ block.authorField }}</p>
    {% endif %}
{% endfor %}

Resources:


7. Looping Through Assets

ExpressionEngine

Like Matrix/EE, Assets uses a tag pair based on the field’s short name:

{assets_field}
    <img src="{url:image_manipulation_name}" alt="{title}"> {filename}
{/assets_field}

Craft

Like entries and Matrix fields in Craft, we once again use the for-loop to loop through assets:

{% for asset in entry.assetsField %}
    <img src="{{ asset.url('transformHandle') }}" alt="{{ asset.title }}"> {{ asset.filename }}
{% endfor %}

Resources:


8. Template Inheritance

ExpressionEngine

EE 2.8 introduced Template Layouts, which makes it possible for templates to extend other templates, via the {layout=} tag:

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

    <p class="copyright">
        &copy; {current_time format='%Y'} {site_name}
    </p>
</body>
</html>
news/index
    {layout="site/.site-layout"}
    {layout:set name="title" value="News"}

    {exp:channel:entries channel="news"}
        <h2>{title}</h2>
        {summary}
    {/exp:channel:entries}

Craft

The same is also possible in Twig:

_site_layout.html
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>

    {% block body %}
        Default content
    {% endblock %}
    
    <p class="copyright">
        &copy; {{ now | date('Y') }} {{ siteName }}
    </p>
</body>
</html>
news/index.html
{% extends "_site_layout" %}
{% set title = "News" %}

{% block body %}
    <h1>News</h1>
    ...
{% endblock %}

There is one key difference between EE and Twig here: In Twig, if a template extends another, all of its HTML output must be placed within {% block %}...{% endblock %} tags. If the template attepmts to output anything outside of block tags, Twig will complain about it. Whereas in EE, all of the HTML that is output gets sucked into a single “block” called contents, which is output in the layout template with {layout:contents}.

Resources:


9. Template Includes

ExpressionEngine

You can include other templates in EE using the {embed} tag, passing any variables you want available to the embedded template as parameters:

Parent Template:
{embed="includes/_photo_gallery" entry_id="{entry_id}"}
includes/_photo_gallery:
{exp:channel:entries entry_id="{embed:entry_id}" dynamic="no"}
    <div class="gallery">
        {assets_field}
            <img src="{url:manipulation_name}">
        {/assets_field}
    </div>
{/exp:channel:entries}

Craft

Twig has a similar tag, called {% include %}. Unlike {embed}, all variables that are already defined in the template leading up to the {% include %} tag will automatically be available to the included template.

Parent Template:
{% include "_includes/photo_gallery" %}
_includes/photo_gallery:
<div class="gallery">
    {% for photo in entry.assetsField %}
        <img src="{{ photo.url('transformHandle') }}">
    {% endfor %}
</div>

Note how entry was already available to _includes/photo_gallery, since it was presumably already defined by the parent template.

You also have the option to pass additional variables to the included template that weren’t already defined in the parent. In the above example, we might not want the include template to worry about the entry variable’s name, and just be passed the array of images directly. We could do do that with this syntax:

Parent Template:
{% include "_includes/photo_gallery" with {
    photos: entry.assetsField
} %}
_includes/photo_gallery:
<div class="gallery">
    {% for photo in photos %}
        <img src="{{ photo.url('transformHandle') }}">
    {% endfor %}
</div>

Now the include template is expecting to be passed a photos variable, and it’s up to whoever’s including it to ensure that photos is set properly. Thanks to that with parameter, we can do that without having to make a photos variable available to the parent template.

The {% embed %} Tag

Twig also has an {% embed %} tag, which you can think of as a more dynamic version of {% include %}. In addition to including a template into the parent template, it also allows the parent template to override aspects of the included template, using {% block %} tags.

Here’s a simple example, where a photo gallery include template allows its parent templates to override a header area:

Parent Template:
{% embed "_includes/photo_gallery" %}
    {% block header %}
        <h3>The Best Photo Gallery</h3>
    {% endblock %}
{% endembed %}
_includes/photo_gallery:
{% block header %}
    <h3>Photo Gallery</h3>
{% endblock %}

<div class="gallery">
    {% for photo in entry.assetsField %}
        <img src="{{ photo.url('transformHandle') }}">
    {% endfor %}
</div>

Resources:


10. Stuff You Can Only Do in Craft

All of the above examples have been focused on things that are relatively easy to do in both EE and Craft. But thanks to Twig, there are a ton of things you can easily do in Craft that aren’t even possible in EE out of the box.

Set Custom Variables

You’re not stuck with a limited set of variable tags in Craft. Thanks to Twig, you can define new variables right in your templates, manipulate them, and output them as you see fit.

{% set title = "About Us" %}

<html>
<head>
    <title>{{ title }} - {{ siteName }}</title>
</head>
<body>
    <h1>{{ title | upper }}</h1>
</body>
</html>

Resources:

Advanced Math

All sorts of advanced math operations are possible in Twig thanks to its rich support of mathematical operators

String Manipulations

You can concatenate strings, modify them, split them into arrays, or pretty much anything else you can think of.

{% if currentUser %}
    {% set greeting = "Hello, " ~ currentUser.name %}
{% else %}
    {% set greeting = "Nice to meet you." %}
{% endif %}

{% set totalWords = greeting | split(' ') | length %}
{% set greeting = greeting ~ ' (That was '~totalWords~' words!)' %}

{# Output the greeting in all caps #}
{{ greeting | upper }}

Resources:

Create Arrays

You aren’t limited to creating simple numbers and strings. You can even create full-blown arrays:

{% set nav = [
    { uri: '', title: 'Home' },
    { uri: 'about', title: 'About' },
    { uri: 'products', title: 'Products' },
    { uri: 'blog', title: 'Blog' }
] %}

<nav>
    <ul>
        {% for item in nav %}
            {% set sel = (craft.request.path == item.uri) %}
            <li><a {{ sel ? 'class="sel"' }} href="{{ url(item.uri) }}">{{ item.title }}</a></li>
        {% endfor %}
    </ul>
</nav>

There’s also a shorthand syntax for creating arrays of consecutive numbers:

<select name="cc_exp_year">
    {% for year in now.year .. now.year+10 %}
        <option>{{ year }}</option>
    {% endfor %}
</select>

11. Other Resources

If you want to learn more, here are a few helpful templating resources:

@lukeholder
Copy link

this should be on the craft docs yeah?

@toddprouty
Copy link

Great write-up, and I agree it would fit well in the Craft docs. I fixed a few minor typos if you're interested.

@hybridinteractive
Copy link

There's an error under LOOPS:

{{ cycle(['odd','even'], loop.index0 }}

Should read:

{{ cycle(['odd','even'], loop.index0) }}

@philzelnar
Copy link

This is incredibly useful. In the Loops section Craft sample, I think craft.entries.channel('news') needs to be updated to craft.entries.section('news'), but I'll leave it to smarted folks to decide.

+10 for section 11.

@mccombs
Copy link

mccombs commented Oct 14, 2014

This is fantastic!

@knynkwl
Copy link

knynkwl commented Jun 15, 2015

This is Awesome! Thanks!

@BubbleJeff
Copy link

Way more informative for a beginner than the documentation of Craft itself. Thanks a bunch!

@mattman93
Copy link

Things you can only do in EE .. custom sql to retrieve entire entries or specific field data i.e. {exp:query sql="SELECT * FROM exp_channel_data WHERE field_id_10 = '0'"} {display data} {/exp:query}

@RickKukiela
Copy link

@mattman93 SQL queries have no place inside a template though.

@thewebprojects
Copy link

thewebprojects commented Aug 30, 2017

Great article. Very useful.

I haven't used Craft or EE so correct me if I'm wrong, but it looks like you can write PHP in EE templates. In Craft you can not write PHP in your templates. You are limited to what Twig provides. So if you enable PHP in a EE template you can do all the "stuff you can only do in Craft" and more (assuming you'll use PHP).

@gwarvi
Copy link

gwarvi commented Feb 26, 2018

Does Craft have a parameter like ExpressionEngine's dynamic?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment