Skip to main content

twig templating

Twig is a PHP-based compiled templating language. When your web page renders, the Twig engine takes the template and converts it into a 'compiled' PHP template which is stored in a protected directory in sites/default/files/php/twig. The compilation is done once, template files are cached for reuse and are recompiled on clearing the Twig cache.

Preprocessing for Template Files :

The main role of the preprocessors is to set up variables to be placed within the template (.tpl.php) or twig files.
Every layer in Drupal from core, modules, engines and themes can have numerous preprocessors

Mainly There are two main functions to override the  code .. preprocess and preprocess_HOOKS respectly,
first is template,module,engine,theme, Most used is theme preprocess and process

THEME_preprocess(&$variables,$hook) Where hooks are like menu,page,html, etc
THEME_preprocess_HOOK(&$variables)

Features of Twig : 

Twig Block in Drupal 8 : It is performed by tempelate inheritance,Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.

Setting Variables : 

{% set foo = 'foo' %}
Filters are separated from the variable by a pipe symbol (|). Multiple filters can be chained
{{ name|striptags|title }}

Loops in Twig :
    {% for user in users if user.active %}
  • {{ user.username|e }}
    {% endfor %} 

      {% for key, user in users %}
    • {{ key }}: {{ user.username|e }}
      {% endfor %}

      Twig allows you to do math in templates;
      %: Calculates the remainder of an integer division. {{ 11 % 7 }} is 4.
      //: Divides two numbers and returns the floored integer result. {{ 20 // 7 }} is 2
      **: Raises the left operand to the power of the right operand. {{ 2 ** 3 }} would return 8.

      • and: Returns true if the left and the right operands are both true.
      • or: Returns true if the left or the right operand is true.
      • not: Negates a statement.
      • (expr): Groups an expression.
      You can also check if a string starts with or ends with another string:
      {% if 'Fabien' starts with 'F' %}
      {% endif %}
      
      {% if 'Fabien' ends with 'n' %}
      {% endif %}

      Containment Operator

      The in operator performs containment test. It returns true if the left operand is contained in the right:
      1
      2
      3
      4
      5
      {# returns true #}
      
      {{ 1 in [1, 2, 3] }}
      
      {{ 'cd' in 'abcde' }}

      Test Operator

      The is operator performs tests. Tests can be used to test a variable against a common expression. The right operand is name of the test:
      {# find out if a variable is odd #}
      
      {{ name is odd }}

      Other Operators : 

      |: Applies a filter.
      ..: Creates a sequence based on the operand before and after the operator (this is syntactic sugar for the range function):
      {{ 1..5 }}
      
      {# equivalent to #}
      {{ range(1, 5) }}
      ~: Converts all operands into strings and concatenates them. {{ "Hello " ~ name ~ "!" }} would return (assuming name is 'John') Hello John!.
      ., []: Gets an attribute of a variable.
      ?:: The ternary operator:
      {{ foo ?: 'no' }} is the same as {{ foo ? foo : 'no' }}
      ??: The null-coalescing operator:
      1
      2
      {# returns the value of foo if it is defined and not null, 'no' otherwise #}
      {{ foo ?? 'no' }}

      Comments

      Popular posts from this blog

      Get The field values of node in Drupal 8

      use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...

      Drupal Setup with docker

      Option 1:  docker pull mysql docker pull phpmyadmin docker pull drupal docker run -d --name MysqlClient -e MYSQL_ROOT_PASSWORD=drupal mysql Download the phpmyadmin image and Setup Container: docker run --name phpmyadmin -d --link MysqlClient:db -p 8083:80 phpmyadmin Download the Drupal image and Setup Container: docker run -d --name dweb2 --link MysqlClient -p 8082:80 -e MYSQL_USER:root -e MYSQL_PASSWORD:drupal drupal   We are using docker4 drupal and following below URL https://wodby.com/docs/1.0/stacks/drupal/local/ From Mount my codebase Download and unpack docker4drupal.tar.gz with hidden files in a new directory, also get the drupal code with in web directory composer create - project drupal / recommended - project my_site_name_dir It means with in new directory we have docker files and drupal files also has web folder for drupal. now run docker-compose up -d Now PROJECT_BASE_URL is mentioned in .env file open this url in the web with port, it will open the drupal page, ...