.. index:: single: Templating Creating and Using Templates ============================ A template is the best way to organize and render HTML from inside your application, whether you need to render HTML from a :doc:`controller ` or generate the :doc:`contents of an email `. Templates in Symfony are created with Twig: a flexible, fast, and secure template engine. .. _twig-language: Twig Templating Language ------------------------ The `Twig`_ templating language allows you to write concise, readable templates that are more friendly to web designers and, in several ways, more powerful than PHP templates. Take a look at the following Twig template example. Even if it's the first time you see Twig, you probably understand most of it: .. code-block:: html+twig Welcome to Symfony!

{% if user.isLoggedIn %} Hello {{ user.name }}! {% endif %} {# ... #} Twig syntax is based on these three constructs: * ``{{ ... }}``, used to display the content of a variable or the result of evaluating an expression; * ``{% ... %}``, used to run some logic, such as a conditional or a loop; * ``{# ... #}``, used to add comments to the template (unlike HTML comments, these comments are not included in the rendered page). You can't run PHP code inside Twig templates, but Twig provides utilities to run some logic in the templates. For example, **filters** modify content before being rendered, like the ``upper`` filter to uppercase contents: .. code-block:: twig {{ title|upper }} Twig comes with a long list of `tags`_, `filters`_ and `functions`_ that are available by default. In Symfony applications you can also use these :doc:`Twig filters and functions defined by Symfony ` and you can :doc:`create your own Twig filters and functions `. Twig is fast in the ``prod`` :ref:`environment ` (because templates are compiled into PHP and cached automatically), but convenient to use in the ``dev`` environment (because templates are recompiled automatically when you change them). Twig Configuration ~~~~~~~~~~~~~~~~~~ Twig has several configuration options to define things like the format used to display numbers and dates, the template caching, etc. Read the :doc:`Twig configuration reference ` to learn about them. Creating Templates ------------------ Before explaining in detail how to create and render templates, look at the following example for a quick overview of the whole process. First, you need to create a new file in the ``templates/`` directory to store the template contents: .. code-block:: html+twig {# templates/user/notifications.html.twig #}

Hello {{ user_first_name }}!

You have {{ notifications|length }} new notifications.

Then, create a :doc:`controller ` that renders this template and passes to it the needed variables:: // src/Controller/UserController.php namespace App\Controller; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; class UserController extends AbstractController { // ... public function notifications() { // get the user information and notifications somehow $userFirstName = '...'; $userNotifications = ['...', '...']; // the template path is the relative file path from `templates/` return $this->render('user/notifications.html.twig', [ // this array defines the variables passed to the template, // where the key is the variable name and the value is the variable value // (Twig recommends using snake_case variable names: 'foo_bar' instead of 'fooBar') 'user_first_name' => $userFirstName, 'notifications' => $userNotifications, ]); } } Template Naming ~~~~~~~~~~~~~~~ Symfony recommends the following for template names: * Use `snake case`_ for filenames and directories (e.g. ``blog_posts.twig``, ``admin/default_theme/blog/index.twig``, etc.); * Define two extensions for filenames (e.g. ``index.html.twig`` or ``blog_posts.xml.twig``) being the first extension (``html``, ``xml``, etc.) the final format that the template will generate. Although templates usually generate HTML contents, they can generate any text-based format. That's why the two-extension convention simplifies the way templates are created and rendered for multiple formats. Template Location ~~~~~~~~~~~~~~~~~ Templates are stored by default in the ``templates/`` directory. When a service or controller renders the ``product/index.html.twig`` template, they are actually referring to the ``/templates/product/index.html.twig`` file. The default templates directory is configurable with the :ref:`twig.default_path ` option and you can add more template directories :ref:`as explained later ` in this article. Template Variables ~~~~~~~~~~~~~~~~~~ A common need for templates is to print the values stored in the templates passed from the controller or service. Variables usually store objects and arrays instead of strings, numbers and boolean values. That's why Twig provides quick access to complex PHP variables. Consider the following template: .. code-block:: html+twig

{{ user.name }} added this comment on {{ comment.publishedAt|date }}

The ``user.name`` notation means that you want to display some information (``name``) stored in a variable (``user``). Is ``user`` an array or an object? Is ``name`` a property or a method? In Twig this doesn't matter. When using the ``foo.bar`` notation, Twig tries to get the value of the variable in the following order: #. ``$foo['bar']`` (array and element); #. ``$foo->bar`` (object and public property); #. ``$foo->bar()`` (object and public method); #. ``$foo->getBar()`` (object and *getter* method); #. ``$foo->isBar()`` (object and *isser* method); #. ``$foo->hasBar()`` (object and *hasser* method); #. If none of the above exists, use ``null``. This allows to evolve your application code without having to change the template code (you can start with array variables for the application proof of concept, then move to objects with methods, etc.) .. _templates-link-to-pages: Linking to Pages ~~~~~~~~~~~~~~~~ Instead of writing the link URLs by hand, use the ``path()`` function to generate URLs based on the :ref:`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. Consider the following routing configuration: .. configuration-block:: .. code-block:: php-annotations // src/Controller/BlogController.php namespace App\Controller; // ... use Symfony\Component\Routing\Annotation\Route; class BlogController extends AbstractController { /** * @Route("/", name="blog_index") */ public function index() { // ... } /** * @Route("/article/{slug}", name="blog_post") */ public function show(string $slug) { // ... } } .. code-block:: yaml # config/routes.yaml blog_index: path: / controller: App\Controller\BlogController::index blog_post: path: /article/{slug} controller: App\Controller\BlogController::show .. code-block:: xml .. code-block:: php // config/routes.php use App\Controller\BlogController; use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator; return function (RoutingConfigurator $routes) { $routes->add('blog_index', '/') ->controller([BlogController::class, 'index']) ; $routes->add('blog_post', '/articles/{slug}') ->controller([BlogController::class, 'show']) ; }; Use the ``path()`` Twig function to link to these pages and pass the route name as the first argument and the route parameters as the optional second argument: .. code-block:: html+twig Homepage {# ... #} {% for post in blog_posts %}

{% endfor %} The ``path()`` function generates relative URLs. If you need to generate absolute URLs (for example when rendering templates for emails or RSS feeds), use the ``url()`` function, which takes the same arguments as ``path()`` (e.g. `` ... ``). .. _templates-link-to-assets: Linking to CSS, JavaScript and Image Assets ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ If a template needs to link to a static asset (e.g. an image), Symfony provides an ``asset()`` Twig function to help generate that URL. First, install the ``asset`` package: .. code-block:: terminal $ composer require symfony/asset You can now use the ``asset()`` function: .. code-block:: html+twig {# the image lives at "public/images/logo.png" #}

{# the CSS file lives at "public/css/blog.css" #} {# the JS file lives at "public/bundles/acme/js/loader.js" #} 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. ``https://example.com``), then the rendered path should be ``/images/logo.png``. But if your application lives in a subdirectory (e.g. ``https://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 `, :ref:`version_format `, and :ref:`json_manifest_path ` configuration options. .. tip:: If you'd like help packaging, versioning and minifying your JavaScript and CSS assets in a modern way, read about :doc:`Symfony's Webpack Encore `. If you need absolute URLs for assets, use the ``absolute_url()`` Twig function as follows: .. code-block:: html+twig

.. _twig-app-variable: The App Global Variable ~~~~~~~~~~~~~~~~~~~~~~~ Symfony creates a context object that is injected into every Twig template automatically as a variable called ``app``. It provides access to some application information: .. code-block:: html+twig

Username: {{ app.user.username ?? 'Anonymous user' }}

{% if app.debug %}

Request method: {{ app.request.method }}

Application Environment: {{ app.environment }}

{% endif %} The ``app`` variable (which is an instance of :class:`Symfony\\Bridge\\Twig\\AppVariable`) gives you access to these variables: ``app.user`` The :ref:`current user object ` or ``null`` if the user is not authenticated. ``app.request`` The :class:`Symfony\\Component\\HttpFoundation\\Request` object that stores the current :ref:`request data ` (depending on your application, this can be a :ref:`sub-request ` or a regular request). ``app.session`` The :class:`Symfony\\Component\\HttpFoundation\\Session\\Session` object that represents the current :doc:`user's session ` or ``null`` if there is none. ``app.flashes`` An array of all the :ref:`flash messages ` stored in the session. You can also get only the messages of some type (e.g. ``app.flashes('notice')``). ``app.environment`` The name of the current :ref:`configuration environment ` (``dev``, ``prod``, etc). ``app.debug`` True if in :ref:`debug mode `. False otherwise. ``app.token`` A :class:`Symfony\\Component\\Security\\Core\\Authentication\\Token\\TokenInterface` object representing the security token. In addition to the global ``app`` variable injected by Symfony, you can also :doc:`inject variables automatically to all Twig templates `. .. _templates-rendering: Rendering Templates ------------------- Rendering a Template in Controllers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ If your controller extends from the :ref:`AbstractController `, use the ``render()`` helper:: // src/Controller/ProductController.php namespace App\Controller; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; class ProductController extends AbstractController { public function index() { // ... // the `render()` method returns a `Response` object with the // contents created by the template return $this->render('product/index.html.twig', [ 'category' => '...', 'promotions' => ['...', '...'], ]); // the `renderView()` method only returns the contents created by the // template, so you can use those contents later in a `Response` object $contents = $this->renderView('product/index.html.twig', [ 'category' => '...', 'promotions' => ['...', '...'], ]); return new Response($contents); } } If your controller does not extend from ``AbstractController``, you'll need to :ref:`fetch services in your controller ` and use the ``render()`` method of the ``twig`` service. Rendering a Template in Services ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Inject the ``twig`` Symfony service into your own services and use its ``render()`` method. When using :doc:`service autowiring ` you only need to add an argument in the service constructor and type-hint it with the :class:`Twig\\Environment` class:: // src/Service/SomeService.php namespace App\Service; use Twig\Environment; class SomeService { private $twig; public function __construct(Environment $twig) { $this->twig = $twig; } public function someMethod() { // ... $htmlContents = $this->twig->render('product/index.html.twig', [ 'category' => '...', 'promotions' => ['...', '...'], ]); } } Rendering a Template in Emails ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Read the docs about the :ref:`mailer and Twig integration `. .. _templates-render-from-route: Rendering a Template Directly from a Route ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Although templates are usually rendered in controllers and services, you can render static pages that don't need any variables directly from the route definition. Use the special :class:`Symfony\\Bundle\\FrameworkBundle\\Controller\\TemplateController` provided by Symfony: .. configuration-block:: .. code-block:: yaml # config/routes.yaml acme_privacy: path: /privacy controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController defaults: # the path of the template to render template: 'static/privacy.html.twig' # special options defined by Symfony to set the page cache maxAge: 86400 sharedAge: 86400 # whether or not caching should apply for client caches only private: true # optionally you can define some arguments passed to the template context: site_name: 'ACME' theme: 'dark' .. code-block:: xml static/privacy.html.twig 86400 86400 true ACME dark .. code-block:: php // config/routes.php use Symfony\Bundle\FrameworkBundle\Controller\TemplateController; use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator; return function (RoutingConfigurator $routes) { $routes->add('acme_privacy', '/privacy') ->controller(TemplateController::class) ->defaults([ // the path of the template to render 'template' => 'static/privacy.html.twig', // special options defined by Symfony to set the page cache 'maxAge' => 86400, 'sharedAge' => 86400, // whether or not caching should apply for client caches only 'private' => true, // optionally you can define some arguments passed to the template 'context' => [ 'site_name' => 'ACME', 'theme' => 'dark', ] ]) ; }; .. versionadded:: 5.1 The ``context`` option was introduced in Symfony 5.1. Checking if a Template Exists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Templates are loaded in the application using a `Twig template loader`_, which also provides a method to check for template existence. First, get the loader:: // in a controller extending from AbstractController $loader = $this->get('twig')->getLoader(); // in a service using autowiring use Twig\Environment; public function __construct(Environment $twig) { $loader = $twig->getLoader(); } Then, pass the path of the Twig template to the ``exists()`` method of the loader:: if ($loader->exists('theme/layout_responsive.html.twig')) { // the template exists, do something // ... } Debugging Templates ------------------- Symfony provides several utilities to help you debug issues in your templates. Linting Twig Templates ~~~~~~~~~~~~~~~~~~~~~~ The ``lint:twig`` command checks that your Twig templates don't have any syntax errors. It's useful to run it before deploying your application to production (e.g. in your continuous integration server): .. code-block:: terminal # check all the application templates $ php bin/console lint:twig # you can also check directories and individual templates $ php bin/console lint:twig templates/email/ $ php bin/console lint:twig templates/article/recent_list.html.twig # you can also show the deprecated features used in your templates $ php bin/console lint:twig --show-deprecations templates/email/ Inspecting Twig Information ~~~~~~~~~~~~~~~~~~~~~~~~~~~ The ``debug:twig`` command lists all the information available about Twig (functions, filters, global variables, etc.). It's useful to check if your :doc:`custom Twig extensions ` are working properly and also to check the Twig features added when :ref:`installing packages `: .. code-block:: terminal # list general information $ php bin/console debug:twig # filter output by any keyword $ php bin/console debug:twig --filter=date # pass a template path to show the physical file which will be loaded $ php bin/console debug:twig @Twig/Exception/error.html.twig The Dump Twig Utilities ~~~~~~~~~~~~~~~~~~~~~~~ Symfony provides a :ref:`dump() function ` as an improved alternative to PHP's ``var_dump()`` function. This function is useful to inspect the contents of any variable and you can use it in Twig templates too. First, make sure that the VarDumper component is installed in the application: .. code-block:: terminal $ composer require symfony/var-dumper Then, use either the ``{% dump %}`` tag or the ``{{ dump() }}`` function depending on your needs: .. code-block:: html+twig {# templates/article/recent_list.html.twig #} {# the contents of this variable are sent to the Web Debug Toolbar instead of dumping them inside the page contents #} {% dump articles %} {% for article in articles %} {# the contents of this variable are dumped inside the page contents and they are visible on the web page #} {{ dump(article) }} {{ article.title }} {% endfor %} To avoid leaking sensitive information, the ``dump()`` function/tag is only available in the ``dev`` and ``test`` :ref:`configuration environments `. If you try to use it in the ``prod`` environment, you will see a PHP error. .. _templates-reuse-contents: Reusing Template Contents ------------------------- .. _templates-include: Including Templates ~~~~~~~~~~~~~~~~~~~ If certain Twig code is repeated in several templates, you can extract it into a single "template fragment" and include it in other templates. Imagine that the following code to display the user information is repeated in several places: .. code-block:: html+twig {# templates/blog/index.html.twig #} {# ... #}

{{ user.fullName }} - {{ user.email }}

First, create a new Twig template called ``blog/_user_profile.html.twig`` (the ``_`` prefix is optional, but it's a convention used to better differentiate between full templates and template fragments). Then, remove that content from the original ``blog/index.html.twig`` template and add the following to include the template fragment: .. code-block:: twig {# templates/blog/index.html.twig #} {# ... #} {{ include('blog/_user_profile.html.twig') }} The ``include()`` Twig function takes as argument the path of the template to include. The included template has access to all the variables of the template that includes it (use the `with_context`_ option to control this). You can also pass variables to the included template. This is useful for example to rename variables. Imagine that your template stores the user information in a variable called ``blog_post.author`` instead of the ``user`` variable that the template fragment expects. Use the following to *rename* the variable: .. code-block:: twig {# templates/blog/index.html.twig #} {# ... #} {{ include('blog/_user_profile.html.twig', {user: blog_post.author}) }} .. _templates-embed-controllers: Embedding Controllers ~~~~~~~~~~~~~~~~~~~~~ :ref:`Including template fragments ` is useful to reuse the same content on several pages. However, this technique is not the best solution in some cases. Imagine that the template fragment displays the three most recent blog articles. To do that, it needs to make a database query to get those articles. When using the ``include()`` function, you'd need to do the same database query in every page that includes the fragment. This is not very convenient. A better alternative is to **embed the result of executing some controller** with the ``render()`` and ``controller()`` Twig functions. First, create the controller that renders a certain number of recent articles:: // src/Controller/BlogController.php namespace App\Controller; // ... class BlogController extends AbstractController { public function recentArticles($max = 3) { // get the recent articles somehow (e.g. making a database query) $articles = ['...', '...', '...']; return $this->render('blog/_recent_articles.html.twig', [ 'articles' => $articles ]); } } Then, create the ``blog/_recent_articles.html.twig`` template fragment (the ``_`` prefix in the template name is optional, but it's a convention used to better differentiate between full templates and template fragments): .. code-block:: html+twig {# templates/blog/_recent_articles.html.twig #} {% for article in articles %} {{ article.title }} {% endfor %} Now you can call to this controller from any template to embed its result: .. code-block:: html+twig {# templates/base.html.twig #} {# ... #} .. _fragments-path-config: When using the ``controller()`` function, controllers are not accessed using a regular Symfony route but through a special URL used exclusively to serve those template fragments. Configure that special URL in the ``fragments`` option: .. configuration-block:: .. code-block:: yaml # config/packages/framework.yaml framework: # ... fragments: { path: /_fragment } .. code-block:: xml .. code-block:: php // config/packages/framework.php $container->loadFromExtension('framework', [ // ... 'fragments' => ['path' => '/_fragment'], ]); .. caution:: Embedding controllers requires making requests to those controllers and rendering some templates as result. This can have a significant impact on the application performance if you embed lots of controllers. If possible, :doc:`cache the template fragment `. .. seealso:: Templates can also :doc:`embed contents asynchronously ` with the ``hinclude.js`` JavaScript library. Template Inheritance and Layouts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ As your application grows you'll find more and more repeated elements between pages, such as headers, footers, sidebars, etc. :ref:`Including templates ` and :ref:`embedding controllers ` can help, but when pages share a common structure, it's better to use **inheritance**. The concept of `Twig template inheritance`_ is similar to PHP class inheritance. You define a parent template that other templates can extend from and child templates can override parts of the parent template. Symfony recommends the following three-level template inheritance for medium and complex applications: * ``templates/base.html.twig``, defines the common elements of all application templates, such as ````, ``

``, ``

{{ page_title }}

Hello {{ user_first_name }}!

{{ post.title }}