Symfony for frontend developers #3 – Setting Twig variables

This article is part of a series; see Symfony for frontend developers for more.

Introduction

A common issue encountered by frontend devs using Twig is not knowing where the values of the variables they’re using actually come from.  Answering this one requires unravelling quite a lot about Symfony and Twig, so let’s dive in!

Where do variables come from?

There are three possible answers.  From most to least common (in my experience), they are…

Setting variables – From the PHP file which renders the template

There will be some code written as part of your project which instructs Symfony to use Twig and render the template you’re looking at.  In general, you’ll find this code in Symfony’s “Controllers”, so look for a file called “SomethingController.php”.  Hopefully the “Something” will be a useful word related to the template you’re looking at.  It’ll probably be in a folder tree structured like this: src/ProjectName/SomethingBundle/Controller.  Again, the “Something” in “SomethingBundle” should help you narrow down your search.

For more on Symfony’s folder structure, see the first article in this series.

Alternatively, you could search across the code files for the name of your template (file-you-are-editing.html.twig) – it’ll usually be mentioned there.

Tip: Don’t search for the file yourself — just use the Symfony toolbar!  Whilst it’s helpful to know the theory for searching through files outlined above, you can get Symfony to do the hard work for you.  In your development environment, you’ll have a Symfony toolbar at the bottom of your browser window (if it’s not visible, there should be a small “sf” logo in the bottom-right which will show it when clicked).  One of the items on the toolbar gives you the controller name and method name:

Symfony Toolbar

In this example, the controller file is AuthController.php and the method is called loginAction.  If you click this part of the toolbar, you’ll see more details, including the path to the controller file.

Once you’ve found the file, the code which renders the template will look something like this:

return $this->render('SomethingBundle::file-you-are-editing.html.twig', array(
   'form' => $form->createView(),
   'small_print' => 'All rights reserved'
));

In the example above, you can see that the username variable is being set to “All rights reserved”.

Tip: Sometimes you might see a controller which looks like it ought to render your template, but doesn’t have a render statement.  It might be using the @Template annotation instead — see this article for more on how that works.  In particular, the way this annotation works means that if you’re searching across files for “somePage.html.twig” and finding nothing, you may have more luck searching for for “somePageAction”.  But hopefully you won’t need to search across files now you know about the toolbar! (see above)

Setting variables – Set explicitly in Twig

This one’s a bit easier.  If a variable’s value is set directly, you can just look further up in the template file for an initialisation line like this:

{% set username = 'All rights reserved' %}

Why bother setting a variable for a simple string like this?  Well, you might want to print it in several different places and only ever have to change it in one place.  But, to be honest, you’d normally use variable setting for more complicated things than this.

Setting variables – Passed in when the template is included, or set in a parent template

Previously, I said to “look further up in the file” for a variable’s initialisation.  However, Twig supports nesting templates (which you might remember from my previous article), so the {% set %} command may actually be in a different file to the one you’re editing.

Look at the top of the file you’re editing for a line which begins {% extends … %}.  If there is one, that will tell you the filename of the parent file, so you should look there and see if that’s where the variable is set.

Funky filename?  You may find that the extends statement looks something like this:

{% include 'AcmeUserBundle:Subscription:subsForm.html.twig' %}

You could just search for the filename across your codebase, but it’s helpful to understand how to unpick this “double colon” syntax.  Symfony turns this form of syntax into the following path:

src/Acme/UserBundle/Resources/views/Subscription/subsForm.html.twig

The bits in bold are worked out by Symfony deciphering that double-colon syntax.  The other bits are file-location conventions (as discussed above).

As well as inheritance, you’ll remember that Twig templates can be included inside other templates.  If your template is included inside another, the line which does the including may set some variables as it does so, like this:

{% include 'your-file.html.twig' with { 'small_print': settings.smallPrint, 'help': actions['help'] } %}

Unfortunately, there’s no easy way to work out which templates include the one you’re interested in — you’ll have to search for the filename across the codebase!

Up next

The next article in this series will talk about styling Symfony forms.  Keep an eye out for it!

One Comment

  1. Posted 29 September 2014 at 3:27 pm | Permalink

    Awesome practical breakdown of this topic, Sam!

    Another route that might be relevant here is the temporary setting of variables in a {% for %} loop: even though it feels quite different when defining it, it’s definitely been the answer to plenty of my “what is this variable!?” questions!

    In terms of tracking down where your variable comes from, I think this one’s pretty similar to when it’s done by variable setting.

Post a Comment

Your email address is never published nor shared. Required fields are marked *

Ready to talk?

Whether you want to create a new digital product or make an existing one even better, we'd love to talk it through.

Get in touch