This is an old revision of the document!

Creating and Using Templates

TL;DR

Templates typically live in app/Resources/views/.
Third-party bundle templates live in path/to/bundle/Resources/views/. (Command line generator puts them here too it seems; also seems not a best practice.)

{# == basics == #}
{# comment #}
{{ varname }}
{% doSomething %}
{{ varname|filtername }}
 
{# == inheritance == #}
{# a block defined in the parent: #}
{% block blockname %}
    block content
{% endblock %}
 
{# can be overridden in child template: #}
{% extends 'parent.html.twig' %}
{% block blockname %}
    new content
    {# get content of parent's block #}
    {{ parent() }}
{% endblock %}
 
{# create links using path() or url() and route name #} 
<a href="{{ path('route_name', {'varname': value}) }}">Relative link</a>
<a href="{{ url('route_name', {'varname': value}) }}">Absolute link</a>
 
{# use asset() to get assets #}
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<img src="{{ asset('images/logo.png', absolute=true) }}" alt="Symfony!" />

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

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

Embedding Controllers

src/AppBundle/Controller/ArticleController.php

namespace AppBundle\Controller;
 
class ArticleController extends Controller
{
    public function recentArticlesAction($max = 3)
    {
        // get the "$max" most recent articles
        $articles = ...;
 
        return $this->render(
            'article/recent_list.html.twig',
            array('articles' => $articles)
        );
    }
}

with a template

app/Resources/views/article/recent_list.html.twig

{% for article in articles %}
    <a href="/article/{{ article.slug }}">
        {{ article.title }}
    </a>
    {# hardcoded URL above is not a best practice. #}
{% endfor %}

and the embed using the controller() call:

app/Resources/views/base.html.twig

{# ... #}
<div id="sidebar">
    {{ render(controller(
        'AppBundle:Article:recentArticles',
        { 'max': 3 }
    )) }}
</div>

Asynchronous Content with hinclude.js

?

Linking to Pages

{# relative links with path(): #}
<a href="{{ path('route_name') }}">Home</a>
<a href="{{ path('route_name', {'varname': value}) }}">Dynamic link</a>
 
{# absolute links with url(): #}
<a href="{{ url('route_name') }}">Home</a>
<a href="{{ url('route_name', {'varname': value}) }}">Dynamic link</a>

Linking to Assets

Use the asset() function:

<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />
<img src="{{ asset('images/logo.png', version='3.0') }}" alt="Symfony!" />
<img src="{{ asset('images/logo.png', absolute=true) }}" alt="Symfony!" />

Including Stylesheets and JavaScripts in Twig

Consider using Assetic.

With Twig, assuming you have a parent:

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

in a child you can add to the assets defined in the parent:

{% extends 'base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}
{# ... #}

You can also include assets located in your bundles' Resources/public folder. You will need to run php app/console assets:install target [–symlink], which moves (or symlinks) files into the correct location (target is by default “web”.).

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

Global Template Variables

app.user: The current user object.
app.request: The request object.
app.session: The session object.
app.environment: The current environment (dev, prod, etc).
app.debug: True if in debug mode. False otherwise.

Configuring and Using the templating Service

TODO

Overriding Bundle Templates

TODO

Overriding Core Templates

TODO

Three-level Inheritance

TODO

Output Escaping

TODO

Output Escaping in Twig

TODO

Output Escaping in PHP

TODO

Debugging

TODO

Syntax Checking

Check for syntax errors in Twig templates using the lint:twig console command:

# By filename:
$ php app/console lint:twig path/to/your_tempalte.html.twig
 
# By directory:
$ php app/console lint:twig app/Resources/views

Template Formats

TODO

Mithat Konar (the wiki)

Table of Contents

Creating and Using Templates

TL;DR

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

Embedding Controllers

Asynchronous Content with hinclude.js

Linking to Pages

Linking to Assets

Including Stylesheets and JavaScripts in Twig

Global Template Variables

Configuring and Using the templating Service

Overriding Bundle Templates

Overriding Core Templates

Three-level Inheritance

Output Escaping

Output Escaping in Twig

Output Escaping in PHP

Debugging

Syntax Checking

Template Formats