Symfony template engine by default is Twig, it works much like Smarty, to me is one of the best improvements in Symfony: the view part is really separated from controller and model, really! 

Very powerful, Twig extends templates between templates and layout separating the view layer from the model this is extremely convenient if you work with designers, end of conflicts now!

And a template can generate content of many types (HTML,XML,CSV, LaTeX...)

Twig quick syntax

{{ myVar }}: Double curly braces to print a variable

{% for page in arrPages %}: Curly braces with percent execute a loop or define a block.

{# comments #}: Comments syntax in the template

Extending templates

We can take a base template as a main layout and later define blocks or parts that will extend from it, they will be embedded into the main template layout.

The main project layout file is in the file:

/app/Resources/views/base.html.twig

{% block title %}My Project{% endblock %}
{% block stylesheets %}{% endblock %}



{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}

This is the default layout, common to the templates in the whole project, as you can see block names are easy to interpret:

• title: To change tag
• stylesheets: To include custom css files
• body: To print the content
• javascripts: To include the javascript files which are declared at the bottom to improve web performance

Now we are going to create a child template to overload the blocks in this base template layout to use it in our controller template.
Remember that we created a Controller called "Front"? Open the file: MyBundle/Resources/views/Front/index.html.twig to edit it

MyBundle/Resources/views/Front/index.html.twig

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

{% block title %}Front Index{% endblock %}
{% block stylesheets %}

{% endblock %}

{% block body %}

Front Index

{{param}}, Welcome to my awesome front page.

{% endblock %}

To override blocks just keep the same blocks names and rewrite content. The first sentence {% extends '::base.html.twig' %} is very important, meaning that it is a child template extending from the base template.

And how you would use a Twig loop? When you need to print a list, here is a simple sample to test how it works, first create an array with data in your controller action:

  public function indexAction()
  {
       $carData[]=array('model'=>"Volswagen",'color'=>"White",'year'=>"2012");
       $carData[]=array('model'=>"Mazda",'color'=>"Blue",'year'=>"2010");
       $carData[]=array('model'=>"Chrysler",'color'=>"Red",'year'=>"2004");
     

       return array('carlist'=>$carData);
    }

Then in your template file add the for loop:

carlist">

{% for data in

carlist

%}

  
• Model: {{data.model}}, Color: {{data.color}}, Year: {{data.year}}

{% endfor %}

Browse to see results

• Model: Volswagen, Color: White, Year: 2012
• Model: Mazda, Color: Blue, Year: 2010
• Model: Chrysler, Color: Red, Year: 2004

Create a link with the path() function

path() creates the good url that had been defined in the routing, just add the routing parameter to the path function to make it work

Just add

<a href="{{ path('homepage') }}">Home</a>

inside the body block and that's it

To create a link with a parameter

Visit <a href="{{ path('_front',{'id':'IdValue'}) }}">Front page</a>

Assets: images, Javascript and stylesheets

To include images, javaScripts and stylesheets Symfony2 provides the asset function:

For these to work the css/styles.css file and an images/logo.png file should be in the "web" folder.

[Back to Learn Symfony]