Symfony2 layout composition or inheritance

Question

I can't understand some principles about layout composition in sf2.

I have this App/Namespace/MyBundle/Resources/views/layout.html.twig template:

{% extends '::base.html.twig' %}

        {% block title %}Main Title{% block subtitle %}{% endblock %}{% endblock %}
        {% block head %}<h1>Placeholdertitle</h1>{% endblock %}
        {% block body %}{% endblock %}
        {% block sidebar %}{% endblock %}

How should I make the head.html.twig to replace the head block? Currently I have this App/Bundle/Resources/views/head.html.twig template:

{% extends 'AppNamespaceMyBundle::layout.html.twig' %}

{% block head -%}
    <h1>
    Main Title
    </h1>
{% endblock %}

Then I load a page with this index.html.twig:

{% extends 'AppNamespaceMyBundle::layout.html.twig' %}

{% block subtitle %} | Categories{% endblock %}

{% block body -%}
    <h1>Categories list</h1>

    <table class="records_list">
        <thead>
            <tr>
                <th>Id</th>
                <th>Text</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for entity in entities %}
            <tr>
                <td><a href="{{ path('category_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
                <td>{{ entity.text }}</td>
                <td>
                <ul>
                    <li>
                        <a href="{{ path('category_show', { 'id': entity.id }) }}">show</a>
                    </li>
                    <li>
                        <a href="{{ path('category_edit', { 'id': entity.id }) }}">edit</a>
                    </li>
                </ul>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

        <ul>
        <li>
            <a href="{{ path('category_new') }}">
                Create a new entry
            </a>
        </li>
    </ul>
    {% endblock %}

And here I get the "Placeholdertitle" instead of the "Main Title", meaning that the head.html.twig isn't used. How am I supposed to use that head.html.twig to be in the layout.html.twig?

are you calling render('layout')? You need to call the last child of the inheritance to get the right output. — AlixB
I added information in the question. What I do is call render('index'), to load that template. What I think is that the 'head' template isn't called anywhere and I don't know how to "paint" the layout before calling the layout from this 'index'. — Ikzer
Extends defines the parent of your template. Twig does not detect child->parent but only parent->child when you use extends. This way you can render->parent without any child, but when you render->child you will have the parent rendered to -- you can give a try to multiple extends but I think it will not work -- another solution is to use the use. Can you try it? @Ikzer — AlixB

AlixB AlixB · Accepted Answer · 2014-07-25T15:34:49

From what you are explaining, I guess that you want to render Layout + Head inside your Index.

You can use the following schema: Layout <extended by> Head <extended by> Index. This way, when you will render Index, Twig will render both Head and Layout.

Another solution is to use the use.

PS: You cannot extends both head and layout in the same index file, as Twig says: Template inheritance is one of the most powerful Twig's feature but it is limited to single inheritance;

Symfony2 layout composition or inheritance

2 Answers