← back to the blog


Twig basic syntax, variables, filters and functions

Posted on October 26th, 2018 in Miscellaneous by George

Delimiters:


1. {%        %}  used to execute statements such as for-loops and filters;

2. {{         }} used to print the result of an expression to the templatep;

If you want to try the code go to TWIG PLAYGROUND  and for full reference on twig go to Twig Documentation

//set variable to string

{%set Name = 'george'%}
{% set Ocupation = 'Web developer'%}

//set variable to array, index 1 has a tag
{% set Colors  = ['red','<p>blue</p>','orange']%}

// Refence Name variable and use '|' pipe symbol to apply filter
// in this case 'title' is the filter which transforms the Name var first character 
//to upper case 
<h1>{{ Name | title }}</h1>

//for loop to iterate orver Colors array
{% for color in Colors%}
  
   //take all the colors, filter all the tags out (see the raw array above), apply title filter
  <div> {{ color|striptags |title }} </div>

//end of for loop
  {% endfor %}




***************Outpu here ****************************
<h1>George</h1>


  <div> Red </div>
    <div> Blue </div>
    <div> Orange </div>



***************End of Outpu here ****************************


 

 


//Function example

Here the range function it is used to print integers from 1 to 5

________________index.html.twig_____________________

{% for i in range(1, 5) %}

    <div> Number: {{  i }} </div>

{% endfor %}



*************** Outpu here ****************************


//Function example

    <div> Number: 1 </div>
    <div> Number: 2 </div>
    <div> Number: 3 </div>
    <div> Number: 4 </div>
    <div> Number: 5 </div>


***************End of Outpu here ****************************

 

 Source function example

Source it is used to import a template from a different file into current file. The code imported it comes raw meaning that it is not compiled to html. If you want to use code to be compiled then use function include.

{{ include('sidebar.html') }}
//Example of source function 

//create a new file 'name.html.twig' is my case temp.html.twig
// and inside the file write the twig template

_____________________temp.html.twig_____________________

{% set employees = ['Robert', 'Martin', 'Richard'] %}

{% for individual in employees %}

  <div> {{ individual|striptags |upper }} </div>
  
 <div> My name is {{ individual}} </div> {{'\n'}}
  
  {% endfor %}

_________________index.html.twig_____________________________-

//now getting back to the index.twig.html file

//Using the source function we will import the source code of temp.html.twig

{% for i in range(1, 5) %}

    <div> Number: {{  i }} </div>

{% endfor %}

   {{ source('temp.html.twig') }}





***************Outpu here ****************************

//Function example

    <div> Number: 1 </div>       
    <div> Number: 2 </div>       
    <div> Number: 3 </div>       
    <div> Number: 4 </div>       
    <div> Number: 5 </div>       


//Source Example

{% set employees = ['Robert', 'Martin', 'Richard'] %}

{% for individual in employees %}

  <div> {{ individual|striptags |upper }} </div>
  
 <div> My name is {{ individual}} </div> {{'\n'}}
  
  {% endfor %}



***************End of Outpu here ****************************

If you want to try the code go to TWIG PLAYGROUND and for full reference on functions go to Twig Functions .