# Templating in EE vs. Craft

Lots of people have asked, so here are a few common tasks you might do in your templates, as they
would be written in ExpressionEngine vs. Craft.

### Table of Contents

1. [Comments](#1-comments)
2. [Conditionals](#2-conditionals)
3. [Loops](#3-loops)
4. [Looping through entries](#4-looping-through-entries)
5. [Single-entry pages](#5-single-entry-pages)
6. [Looping through Matrix rows](#6-looping-through-matrix-rows)
7. [Looping through assets](#7-looping-through-assets)
8. [DRY site header and footer](#8-dry-site-header-and-footer)
9. [Template includes](#9-template-includes)
10. [Stuff you can only do in Craft](#10-stuff-you-can-only-do-in-craft)
11. [Stuff you can only do in EE](#11-stuff-you-can-only-do-in-ee)

----------------------------------------------------------------------------------------------------

## 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

```jinja
{# You can’t see me! #}
```

Resources:

- [Twig’s comment tag docs](http://twig.sensiolabs.org/doc/templates.html#comments)

----------------------------------------------------------------------------------------------------

## 2. Conditionals

#### ExpressionEngine

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

#### Craft

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

Resources:

- [Twig’s {% if %} tag docs](http://twig.sensiolabs.org/doc/tags/if.html)
- [Twig’s logical operator docs](http://twig.sensiolabs.org/doc/templates.html#logic)
- [Twig’s comparrisson operator docs](http://twig.sensiolabs.org/doc/templates.html#comparisons)

----------------------------------------------------------------------------------------------------

## 3. Loops

#### ExpressionEngine

EE loops are always done with a tag pair, 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](http://twig.sensiolabs.org/doc/tags/for.html), where you pass in what you want to loop
through, as well as what you want to call each item within the loop.

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

There are pros and cons to both ways: EE’s is more elegant for simple things, but you can quickly
run into tag name conflicts and other gotcha’s when dealing with more complex templates. That’s
never an issue with Craft, but it’s at the expense of a more verbose and less straightforward
syntax.

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

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

Resources:

- [Twig’s {% for %} tag docs](http://twig.sensiolabs.org/doc/tags/for.html)

----------------------------------------------------------------------------------------------------

## 4. Looping through entries

#### ExpressionEngine

ExpressionEngine’s `{exp:channel:entries}` tag is optimized for this task (assuming you’re not on a
single-entry page!). Just tell it which channel, how many, and so on.

```
{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](http://buildwithcraft.com/docs/templating/craft.entries) and loop through them with
a [for-loop](http://twig.sensiolabs.org/doc/tags/for.html). 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..

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

Resources:

- [craft.entries docs](http://buildwithcraft.com/docs/templating/craft.entries)
- [EntryModel docs](http://buildwithcraft.com/docs/templating/entrymodel)

----------------------------------------------------------------------------------------------------

## 5. Single-entry pages

#### ExpressionEngine

Assuming everything’s in the right place, this is the one time the `dynamic` parameter will actually
help you out, saving you from having to type `url_title="{segment_2}" limit="1"` (Whew!).

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

#### Craft

Entries in Craft have their own URLs, so Craft knows for a fact 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. (In this case you don’t get a choice on what the `entry` variable name is
going to be called.)

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

Resources:

- [Craft Routing docs](http://buildwithcraft.com/docs/routing)

----------------------------------------------------------------------------------------------------

## 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](http://twig.sensiolabs.org/doc/tags/for.html).

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

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

```jinja
{% 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:

- [MatrixBlockModel docs](http://buildwithcraft.com/docs/templating/matrixblockmodel)

----------------------------------------------------------------------------------------------------

## 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](http://twig.sensiolabs.org/doc/tags/for.html) to loop through assets:

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

Resources:

- [AssetFileModel docs](http://buildwithcraft.com/docs/templating/assetfilemodel)

----------------------------------------------------------------------------------------------------

## 8. DRY site header and footer

#### ExpressionEngine

In EE you would do this with two embedded templates, which you’d manually include in every normal
template.

###### includes/_header

```
<html>
<head>
    <title>{if embed:page_name}{embed:page_name} - {/if}{site_name}</title>
</head>
<body>
```

###### includes/_footer

```
    <p class="copyright">
        &copy; {current_time format='%Y'} {site_name}
    </p>
</body>
</html>
```

###### news/index

```
{embed="includes/_header" page_name="News"}
    <h1>News</h1>
    ...
{embed="includes/_footer"}
```

#### Craft

Craft has the concept of
[Template Inheritance](http://twig.sensiolabs.org/doc/templates.html#template-inheritance), which
lets you define all of the common site elements in a single template, and extend it with
sub-templates where necessary.

###### \_site_layout.html

```jinja
<html>
<head>
    <title>{% if pageName is defined %}{{ pageName }} - {% endif %}{{ siteName }}</title>
</head>
<body>

    {% block body %}
        Default content
    {% endblock %}
    
    <p class="copyright">
        &copy; {{ now | date('Y') }} {{ siteName }}
    </p>
</body>
</html>
```

###### news/index.html

```jinja
{% extends "_site_layout" %}
{% set pageName = "News" %}

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

Resources:

- [Twig’s Template Inheritance docs](http://twig.sensiolabs.org/doc/templates.html#template-inheritance)

----------------------------------------------------------------------------------------------------

## 9. Template includes

#### ExpressionEngine

As demonstrated [above](#8-dry-site-header-and-footer), 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

Craft has a similar tag, called [{% include %}](http://twig.sensiolabs.org/doc/tags/include.html).
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:

```jinja
{% include "_includes/photo_gallery" %}
```

###### \_includes/photo_gallery:

```jinja
<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:

```jinja
{% include "_includes/photo_gallery" with {
    photos: entry.assetsField
} %}
```

###### \_includes/photo_gallery:

```jinja
<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.

Resources:

- [Twig’s {% include %} docs](http://twig.sensiolabs.org/doc/tags/include.html)

----------------------------------------------------------------------------------------------------

## 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 variables in the templates

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.

```jinja
{% set title = "About Us" %}

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

Resources:

- [Twig’s {% set %} tag docs](http://twig.sensiolabs.org/doc/tags/set.html)
- [Twig’s filter docs ](http://twig.sensiolabs.org/doc/templates.html#filters)

#### Mathmatical operations

There are plenty of times where it’s nice to be able to do a little math in your templates.

```jinja
{{ 2 + 2 }}

{% set total = 2 + 2 %}
{{ total }}
```

Resources:

- [Twig’s Math docs](http://twig.sensiolabs.org/doc/templates.html#math)

#### String manipulations

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

```jinja
{% 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:

- [Twig’s {% set %} tag docs](http://twig.sensiolabs.org/doc/tags/set.html)
- [Twig’s filter docs ](http://twig.sensiolabs.org/doc/templates.html#filters)

#### Create arrays

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

```jinja
{% 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:

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

#### So much more

Twig has _tons_ of useful features that make developing templates a breeze, and Craft adds even more
features on top of that!

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

- [Twig for Template Designers](http://twig.sensiolabs.org/doc/templates.html) (the official docs)
- [Twig’s core tags](http://twig.sensiolabs.org/doc/tags/index.html)
- [Twig’s core filters](http://twig.sensiolabs.org/doc/filters/index.html)
- [Twig’s core functions](http://twig.sensiolabs.org/doc/functions/index.html)
- [Craft-added tags](http://buildwithcraft.com/docs/templating/tags)
- [Craft-added filters](http://buildwithcraft.com/docs/templating/filters)
- [Craft-added functions](http://buildwithcraft.com/docs/templating/functions)
- [Global template variables in Craft](http://buildwithcraft.com/docs/templating/global-variables)

----------------------------------------------------------------------------------------------------

## 11. Stuff you can only do in EE

*Cough*