.. index::
   single: Templating

Creating and Using Templates

As explained in :doc:`the previous article </controller>`, controllers are responsible for handling each request that comes into a Symfony application and they usually end up rendering a template to generate the response contents.

In reality, the controller delegates most of the heavy work to other places so that code can be tested and reused. When a controller needs to generate HTML, CSS or any other content, it hands the work off to the templating engine.

In this article, you'll learn how to write powerful templates that can be used to return content to the user, populate email bodies, and more. You'll learn shortcuts, clever ways to extend templates and how to reuse template code.

.. index::
   single: Templating; What is a template?

Templates

A template is simply a text file that can generate any text-based format (HTML, XML, CSV, LaTeX ...). The most familiar type of template is a PHP template - a text file parsed by PHP that contains a mix of text and PHP code:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Symfony!</title>
    </head>
    <body>
        <h1><?= $page_title ?></h1>

        <ul id="navigation">
            <?php foreach ($navigation as $item): ?>
                <li>
                    <a href="<?= $item->getHref() ?>">
                        <?= $item->getCaption() ?>
                    </a>
                </li>
            <?php endforeach ?>
        </ul>
    </body>
</html>

.. index:: Twig; Introduction

But Symfony packages an even more powerful templating language called Twig. Twig allows you to write concise, readable templates that are more friendly to web designers and, in several ways, more powerful than PHP templates:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Symfony!</title>
    </head>
    <body>
        <h1>{{ page_title }}</h1>

        <ul id="navigation">
            {% for item in navigation %}
                <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
            {% endfor %}
        </ul>
    </body>
</html>

Twig defines three types of special syntax:

{{ ... }}: "Says something": prints a variable or the result of an expression to the template.
{% ... %}: "Does something": a tag that controls the logic of the template; it is used to execute statements such as for-loops for example.
{# ... #}: "Comment something": it's the equivalent of the PHP /* comment */ syntax. It's used to add single or multi-line comments. The content of the comments isn't included in the rendered pages.

Twig also contains filters, which modify content before being rendered. The following makes the title variable all uppercase before rendering it:

{{ title|upper }}

Twig comes with a long list of tags, filters and functions that are available by default. You can even add your own custom filters, functions (and more) via a :doc:`Twig Extension </templating/twig_extension>`. Run the following command to list them all:

$ php bin/console debug:twig

Twig code will look similar to PHP code, with subtle, nice differences. The following example uses a standard for tag and the cycle() function to print ten div tags, with alternating odd, even classes:

{% for i in 1..10 %}
    <div class="{{ cycle(['even', 'odd'], i) }}">
      <!-- some HTML here -->
    </div>
{% endfor %}

Throughout this article, template examples will be shown in both Twig and PHP.

Why Twig?

Twig templates are meant to be simple and won't process PHP tags. This is by design: the Twig template system is meant to express presentation, not program logic. The more you use Twig, the more you'll appreciate and benefit from this distinction. And of course, you'll be loved by web designers everywhere.

Twig can also do things that PHP can't, such as whitespace control, sandboxing, automatic HTML escaping, manual contextual output escaping, and the inclusion of custom functions and filters that only affect templates. Twig contains a lot of features that make writing templates easier and more concise. Take the following example, which combines a loop with a logical if statement:

<ul>
    {% for user in users if user.active %}
        <li>{{ user.username }}</li>
    {% else %}
        <li>No users found</li>
    {% endfor %}
</ul>

.. index::
   pair: Twig; Cache

Twig Template Caching

Twig is fast because each template is compiled to a native PHP class and cached. But don't worry: this happens automatically and doesn't require you to do anything. And while you're developing, Twig is smart enough to re-compile your templates after you make any changes. That means Twig is fast in production, but convenient to use while developing.

.. index::
   single: Templating; Inheritance

Template Inheritance and Layouts

More often than not, templates in a project share common elements, like the header, footer, sidebar or more. In Symfony, this problem is thought about differently: a template can be decorated by another one. This works exactly the same as PHP classes: template inheritance allows you to build a base "layout" template that contains all the common elements of your site defined as blocks (think "PHP class with base methods"). A child template can extend the base layout and override any of its blocks (think "PHP subclass that overrides certain methods of its parent class").

First, build a base layout file:

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Test Application{% endblock %}</title>
    </head>
    <body>
        <div id="sidebar">
            {% block sidebar %}
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/blog">Blog</a></li>
                </ul>
            {% endblock %}
        </div>

        <div id="content">
            {% block body %}{% endblock %}
        </div>
    </body>
</html>

Note

Though the discussion about template inheritance will be in terms of Twig, the philosophy is the same between Twig and PHP templates.

This template defines the base HTML skeleton document of a two-column page. In this example, three {% block %} areas are defined (title, sidebar and body). Each block may be overridden by a child template or left with its default implementation. This template could also be rendered directly. In that case the title, sidebar and body blocks would retain the default values used in this template.

A child template might look like this:

{# templates/blog/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}My cool blog posts{% endblock %}

{% block body %}
    {% for entry in blog_entries %}
        <h2>{{ entry.title }}</h2>
        <p>{{ entry.body }}</p>
    {% endfor %}
{% endblock %}

Note

The parent template is stored in templates/, so its path is base.html.twig. The template naming conventions are explained fully in :ref:`template-naming-locations`.

The key to template inheritance is the {% extends %} tag. This tells the templating engine to first evaluate the base template, which sets up the layout and defines several blocks. The child template is then rendered, at which point the title and body blocks of the parent are replaced by those from the child. Depending on the value of blog_entries, the output might look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My cool blog posts</title>
    </head>
    <body>
        <div id="sidebar">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
            </ul>
        </div>

        <div id="content">
            <h2>My first post</h2>
            <p>The body of the first post.</p>

            <h2>Another post</h2>
            <p>The body of the second post.</p>
        </div>
    </body>
</html>

Notice that since the child template didn't define a sidebar block, the value from the parent template is used instead. Content within a {% block %} tag in a parent template is always used by default.

Tip

You can use as many levels of inheritance as you want! See :doc:`/templating/inheritance` for more info.

When working with template inheritance, here are some tips to keep in mind:

If you use {% extends %} in a template, it must be the first tag in that template;
The more {% block %} tags you have in your base templates, the better. Remember, child templates don't have to define all parent blocks, so create as many blocks in your base templates as you want and give each a sensible default. The more blocks your base templates have, the more flexible your layout will be;
If you find yourself duplicating content in a number of templates, it probably means you should move that content to a {% block %} in a parent template. In some cases, a better solution may be to move the content to a new template and include it (see :ref:`including-templates`);
If you need to get the content of a block from the parent template, you can use the {{ parent() }} function. This is useful if you want to add to the contents of a parent block instead of completely overriding it:
```
{% block sidebar %}
    <h3>Table of Contents</h3>

    {# ... #}

    {{ parent() }}
{% endblock %}
```

.. index::
   single: Templating; Naming conventions
   single: Templating; File locations

Template Naming and Locations

By default, templates can live in two different locations:

templates/: The application's views directory can contain application-wide base templates (i.e. your application's layouts and templates of the application bundle) as well as templates that :ref:`override third party bundle templates <override-templates>`.
vendor/path/to/CoolBundle/Resources/views/: Each third party bundle houses its templates in its Resources/views/ directory (and subdirectories). When you plan to share your bundle, you should put the templates in the bundle instead of the templates/ directory.

Most of the templates you'll use live in the templates/ directory. The path you'll use will be relative to this directory. For example, to render/extend templates/base.html.twig, you'll use the base.html.twig path and to render/extend templates/blog/index.html.twig, you'll use the blog/index.html.twig path.

Referencing Templates in a Bundle

If you need to refer to a template that lives in a bundle, Symfony uses the Twig namespaced syntax (@BundleName/directory/filename.html.twig). This allows for several types of templates, each which lives in a specific location:

@AcmeBlog/Blog/index.html.twig: This syntax is used to specify a template for a specific page. The three parts of the string, each separated by a slash (/), mean the following:
- @AcmeBlog: is the bundle name without the Bundle suffix. This template lives in the AcmeBlogBundle (e.g. src/Acme/BlogBundle);
- Blog: (directory) indicates that the template lives inside the Blog subdirectory of Resources/views/;
- index.html.twig: (filename) the actual name of the file is index.html.twig.
Assuming that the AcmeBlogBundle lives at src/Acme/BlogBundle, the final path to the layout would be src/Acme/BlogBundle/Resources/views/Blog/index.html.twig.
@AcmeBlog/layout.html.twig: This syntax refers to a base template that's specific to the AcmeBlogBundle. Since the middle, "directory", portion is missing (e.g. Blog), the template lives at Resources/views/layout.html.twig inside AcmeBlogBundle.

Using this namespaced syntax instead of the real file paths allows applications to :ref:`override templates that live inside any bundle <override-templates>`.

Template Suffix

Every template name also has two extensions that specify the format and engine for that template.

Filename	Format	Engine
`blog/index.html.twig`	HTML	Twig
`blog/index.html.php`	HTML	PHP
`blog/index.css.twig`	CSS	Twig

By default, any Symfony template can be written in either Twig or PHP, and the last part of the extension (e.g. .twig or .php) specifies which of these two engines should be used. The first part of the extension, (e.g. .html, .css, etc) is the final format that the template will generate. Unlike the engine, which determines how Symfony parses the template, this is simply an organizational tactic used in case the same resource needs to be rendered as HTML (index.html.twig), XML (index.xml.twig), or any other format. For more information, read the :doc:`/templating/formats` section.

.. index::
   single: Templating; Tags and helpers
   single: Templating; Helpers

Tags and Helpers

You already understand the basics of templates, how they're named and how to use template inheritance. The hardest parts are already behind you. In this section, you'll learn about a large group of tools available to help perform the most common template tasks such as including other templates, linking to pages and including images.

Symfony comes bundled with several specialized Twig tags and functions that ease the work of the template designer. In PHP, the templating system provides an extensible helper system that provides useful features in a template context.

You've already seen a few built-in Twig tags like {% block %} and {% extends %}. Here you will learn a few more.

.. index::
   single: Templating; Including other templates

Including other Templates

You'll often want to include the same template or code fragment on several pages. For example, in an application with "news articles", the template code displaying an article might be used on the article detail page, on a page displaying the most popular articles, or in a list of the latest articles.

When you need to reuse a chunk of PHP code, you typically move the code to a new PHP class or function. The same is true for templates. By moving the reused template code into its own template, it can be included from any other template. First, create the template that you'll need to reuse.

{# templates/article/article_details.html.twig #}
<h2>{{ article.title }}</h2>
<h3 class="byline">by {{ article.authorName }}</h3>

<p>
    {{ article.body }}
</p>

Including this template from any other template is achieved with the {{ include() }} function:

{# templates/article/list.html.twig #}
{% extends 'layout.html.twig' %}

{% block body %}
    <h1>Recent Articles<h1>

    {% for article in articles %}
        {{ include('article/article_details.html.twig', { 'article': article }) }}
    {% endfor %}
{% endblock %}

Notice that the template name follows the same typical convention. The article_details.html.twig template uses an article variable, which we pass to it. In this case, you could avoid doing this entirely, as all of the variables available in list.html.twig are also available in article_details.html.twig (unless you set with_context to false).

Tip

The {'article': article} syntax is the standard Twig syntax for hash maps (i.e. an array with named keys). If you needed to pass in multiple elements, it would look like this: {'foo': foo, 'bar': bar}.

.. index::
   single: Templating; Linking to pages

Linking to Pages

Creating links to other pages in your application is one of the most common jobs for a template. Instead of hardcoding URLs in templates, use the path Twig function (or the router helper in PHP) to generate URLs based on the routing configuration. Later, if you want to modify the URL of a particular page, all you'll need to do is change the routing configuration: the templates will automatically generate the new URL.

First, link to the "welcome" page, which is accessible via the following routing configuration:

.. configuration-block::

    .. code-block:: php-annotations

        // src/Controller/WelcomeController.php

        // ...
        use Symfony\Component\Routing\Annotation\Route;

        class WelcomeController extends AbstractController
        {
            /**
             * @Route("/", name="welcome")
             */
            public function index()
            {
                // ...
            }
        }

    .. code-block:: yaml

        # config/routes.yaml
        welcome:
            path:     /
            controller: App\Controller\WelcomeController::index

    .. code-block:: xml

        <!-- config/routes.xml -->
        <?xml version="1.0" encoding="UTF-8" ?>
        <routes xmlns="http://symfony.com/schema/routing"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://symfony.com/schema/routing
                http://symfony.com/schema/routing/routing-1.0.xsd">

            <route id="welcome" path="/">
                <default key="_controller">App\Controller\WelcomeController::index</default>
            </route>
        </routes>

    .. code-block:: php

        // config/routes.php
        use Symfony\Component\Routing\Route;
        use Symfony\Component\Routing\RouteCollection;

        $routes = new RouteCollection();
        $routes->add('welcome', new Route('/', [
            '_controller' => 'App\Controller\WelcomeController::index',
        ]));

        return $routes;

To link to the page, use the path() Twig function and refer to the route:

<a href="{{ path('welcome') }}">Home</a>

As expected, this will generate the URL /. Now, for a more complicated route:

.. configuration-block::

    .. code-block:: php-annotations

        // src/Controller/ArticleController.php

        // ...
        use Symfony\Component\Routing\Annotation\Route;

        class ArticleController extends AbstractController
        {
            /**
             * @Route("/article/{slug}", name="article_show")
             */
            public function show($slug)
            {
                // ...
            }
        }

    .. code-block:: yaml

        # config/routes.yaml
        article_show:
            path:       /article/{slug}
            controller: App\Controller\ArticleController::show

    .. code-block:: xml

        <!-- config/routes.xml -->
        <?xml version="1.0" encoding="UTF-8" ?>
        <routes xmlns="http://symfony.com/schema/routing"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://symfony.com/schema/routing
                http://symfony.com/schema/routing/routing-1.0.xsd">

            <route id="article_show" path="/article/{slug}">
                <default key="_controller">App\Controller\ArticleController::show</default>
            </route>
        </routes>

    .. code-block:: php

        // config/routes.php
        use Symfony\Component\Routing\Route;
        use Symfony\Component\Routing\RouteCollection;

        $routes = new RouteCollection();
        $routes->add('article_show', new Route('/article/{slug}', [
            '_controller' => 'App\Controller\ArticleController::show',
        ]));

        return $routes;

In this case, you need to specify both the route name (article_show) and a value for the {slug} parameter. Using this route, revisit the recent_list.html.twig template from the previous section and link to the articles correctly:

{# templates/article/recent_list.html.twig #}
{% for article in articles %}
    <a href="{{ path('article_show', {'slug': article.slug}) }}">
        {{ article.title }}
    </a>
{% endfor %}

Tip

You can also generate an absolute URL by using the url() Twig function:

<a href="{{ url('welcome') }}">Home</a>

.. index::
   single: Templating; Linking to assets

Linking to Assets

Templates also commonly refer to images, JavaScript, stylesheets and other assets. You could hard-code the web path to these assets (e.g. /images/logo.png), but Symfony provides a more dynamic option via the asset() Twig function.

To use this function, install the asset package:

$ composer require symfony/asset

You can now use the asset() function:

<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />

<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />

The asset() function's main purpose is to make your application more portable. If your application lives at the root of your host (e.g. http://example.com), then the rendered paths should be /images/logo.png. But if your application lives in a subdirectory (e.g. http://example.com/my_app), each asset path should render with the subdirectory (e.g. /my_app/images/logo.png). The asset() function takes care of this by determining how your application is being used and generating the correct paths accordingly.

Tip

The asset() function supports various cache busting techniques via the :ref:`version <reference-framework-assets-version>`, :ref:`version_format <reference-assets-version-format>`, and :ref:`json_manifest_path <reference-assets-json-manifest-path>` configuration options.

If you need absolute URLs for assets, use the absolute_url() Twig function as follows:

<img src="{{ absolute_url(asset('images/logo.png')) }}" alt="Symfony!" />

.. index::
   single: Templating; Including stylesheets and JavaScripts
   single: Stylesheets; Including stylesheets
   single: JavaScript; Including JavaScripts

Including Stylesheets and JavaScripts in Twig

No site would be complete without including JavaScript files and stylesheets. In Symfony, the inclusion of these assets is handled elegantly by taking advantage of Symfony's template inheritance.

Tip

This section will teach you the philosophy behind including stylesheet and JavaScript assets in Symfony. If you are interested in compiling and creating those assets, check out the :doc:`Webpack Encore documentation </frontend>` a tool that seamlessly integrates Webpack and other modern JavaScript tools into Symfony applications.

Start by adding two blocks to your base template that will hold your assets: one called stylesheets inside the head tag and another called javascripts just above the closing body tag. These blocks will contain all of the stylesheets and JavaScripts that you'll need throughout your site:

{# templates/base.html.twig #}
<html>
    <head>
        {# ... #}

        {% block stylesheets %}
            <link href="{{ asset('css/main.css') }}" rel="stylesheet" />
        {% endblock %}
    </head>
    <body>
        {# ... #}

        {% block javascripts %}
            <script src="{{ asset('js/main.js') }}"></script>
        {% endblock %}
    </body>
</html>

This looks almost like regular HTML, but with the addition of the {% block %}. Those are useful when you need to include an extra stylesheet or JavaScript from a child template. For example, suppose you have a contact page and you need to include a contact.css stylesheet just on that page. From inside that contact page's template, do the following:

{# templates/contact/contact.html.twig #}
{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}

{# ... #}

In the child template, you override the stylesheets block and put your new stylesheet tag inside of that block. Since you want to add to the parent block's content (and not actually replace it), you also use the parent() Twig function to include everything from the stylesheets block of the base template.

You can also include assets located in your bundles' Resources/public/ folder. You will need to run the php bin/console assets:install target [--symlink] command, which copies (or symlinks) files into the correct location. (target is by default the "public/" directory of your application).

<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" rel="stylesheet" />

The end result is a page that includes main.js and both the main.css and contact.css stylesheets.

Referencing the Request, User or Session

Symfony also gives you a global app variable in Twig that can be used to access the current user, the Request and more.

See :doc:`/templating/app_variable` for details.

Output Escaping

Twig performs automatic "output escaping" when rendering any content in order to protect you from Cross Site Scripting (XSS) attacks.

Suppose description equals I <3 this product:

<!-- output escaping is on automatically -->
{{ description }} <!-- I &lt;3 this product -->

<!-- disable output escaping with the raw filter -->
{{ description|raw }} <!-- I <3 this product -->

Caution!

PHP templates do not automatically escape content.

For more details, see :doc:`/templating/escaping`.

Final Thoughts

The templating system is just one of the many tools in Symfony. And its job is simple: allow us to render dynamic & complex HTML output so that this can ultimately be returned to the user, sent in an email or something else.

Keep Going!

Before diving into the rest of Symfony, check out the :doc:`configuration system </configuration>`.

Learn more

.. toctree::
    :hidden:

    configuration

.. toctree::
    :maxdepth: 1
    :glob:

    /templating/*

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

templating.rst

templating.rst

Creating and Using Templates

Templates

Twig Template Caching

Template Inheritance and Layouts

Template Naming and Locations

Referencing Templates in a Bundle

Template Suffix

Tags and Helpers

Including other Templates

Linking to Pages

Linking to Assets

Including Stylesheets and JavaScripts in Twig

Referencing the Request, User or Session

Output Escaping

Final Thoughts

Keep Going!

Learn more

Files

templating.rst

Latest commit

History

templating.rst

File metadata and controls

Creating and Using Templates

Templates

Twig Template Caching

Template Inheritance and Layouts

Template Naming and Locations

Referencing Templates in a Bundle

Template Suffix

Tags and Helpers

Including other Templates

Linking to Pages

Linking to Assets

Including Stylesheets and JavaScripts in Twig

Referencing the Request, User or Session

Output Escaping

Final Thoughts

Keep Going!

Learn more