How to extend twig templates

17/05/2015 - TWIG

Template extending is done with {% extends 'bundle:folder:template' %} but what if we have complex folder structure. This is where {{ parent() }} comes in handy.


Current folder structure


sport
    app
        Resources
            views
                default
                    base.html.twig
    src
        Football
            BackendBundle
            ....
            FrontendBundle
                Resources
                    views
                        Country
                            list.html.twig
                            index.html.twig
                        Default
                            index.html.twig

Extending templates


Pay attention to {{ parent() }} lines.


# sport/app/Resources/views/base.html.twig
<body>
    <a href="{{ path('football_frontend_default_index') }}">FRONTEND</a>
     ‐ 
    <a href="{{ path('football_backend_default_index') }}">BACKEND</a>
    <hr />
    {% block body %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>

# sport/src/Football/FrontendBundle/Resources/views/Default/index.html.twig
{% extends '::base.html.twig' %}

{% block body %}
    {% spaceless %}
        <a href="{{ path('football_frontend_country_index') }}">COUNTRY</a>
         | 
        <a href="{{ path('football_frontend_country_index') }}">LEAGUE</a>
        <hr />
    {% endspaceless %}
{% endblock %}

# sport/src/Football/FrontendBundle/Resources/views/Country/index.html.twig
{% extends 'FootballFrontendBundle:Default:index.html.twig' %}

{% block body %}
    {% spaceless %}
        {{ parent() }}
        <a href="{{ path('football_frontend_country_index') }}">Index</a>
         | 
        <a href="{{ path('football_frontend_country_list') }}">List</a>
         | 
        <a href="{{ path('football_frontend_country_create') }}">Create</a>
        <hr />
    {% endspaceless %}
{% endblock %}

# sport/src/Football/FrontendBundle/Resources/views/Country/list.html.twig
{% extends 'FootballFrontendBundle:Country:index.html.twig' %}

{% block body %}
    {% spaceless %}
        {{ parent() }}
        COUNTRY - List
    {% endspaceless %}
{% endblock %}

Output


FRONTEND - BACKEND
-------------------------
COUNTRY | LEAGUE
-------------------------
Index | List | Create
-------------------------
COUNTRY - List