Twig Parent() Function

In this video we are going to look at Twig's parent function, which allows templates that inherit from a different template to include the contents of a block with the same name.

Now, admittedly, this sounds very 'wordy' and complicated. However, with a few examples it is not only very easy to see how to use parent, but also a very simple way to put an end to a whole lot of copy / paste.

Let's imagine we have a Twig block containing our JavaScripts:

{% block javascripts %}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="/js/some-local-important-javascripts.min.js"></script>
{% endblock %}

The chances are, we don't want to have to redeclare a full list of all the JavaScript we need on every single page we have on our site.

Well, Twig solves this problem for us with template inheritence. Simply include this JavaScripts block in a top level template, and any template that extends this template will also have the JavaScript script tags rendered too.

But what happens when we need to add in an extra JavaScript?

Let's pretend this extra JavaScript is quite large, and not everyone who visits the site is likely to want to browse to this particular page.

We want our website to be as lean as possible, for many reasons - page load times being probably the most important.

The simple approach here is to copy the block javascripts content from the existing template into our new template, add in the new line, and away we go:

{% block javascripts %}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="/js/some-local-important-javascripts.min.js"></script>

<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>
{% endblock %}

However, we might have solved the immediate problem, but what happens in a few weeks / months when a new Bootstrap version comes out. Or a bug is found in moment, so we need to update. Well, now we have to remember to update two places, not just one. Yucky.

Fortunately, Twig has our back here as well.

Rather than having to redeclare (copy / paste) the entire block contents, we can call parent() from inside the child template, and inherit the contents of the block from the template we are extending, along with adding anything extra as required:

{% block javascripts %}
{{ parent() }}

<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>
{% endblock %}

When rendered to the page, this shorter block will be identical to the larger javascripts block above.

The location of the parent call is important.

If we were to move the parent call to after the extra declared script tag, the output would change:

<!-- our twig template -->>
{% block javascripts %}
<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>

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

Renders:

<!-- now this line comes first -->
<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>

<!-- parent() content here -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="/js/some-local-important-javascripts.min.js"></script>

This can have its uses - for example in a page title tag. You might wish to have your site name always come before or after the page title. And so on.

Of course, if you omit the parent() call, your child block will replace whatever was in the parent block:

<!-- our twig template -->>
{% block javascripts %}
<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>
{% endblock %}

Renders:

<!-- now this line comes first -->
<script src="/js/large-javascript-that-only-matters-to-this-page.min.js"></script>

<!-- parent() not called, so no content here -->

If this is new to you, I would recommend you view the course where Twig layouts are covered in more detail.

Twig Parent() Function

Episodes