{"id":46547,"date":"2017-02-28T12:16:25","date_gmt":"2017-02-28T06:46:25","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=46547"},"modified":"2017-05-01T15:36:16","modified_gmt":"2017-05-01T10:06:16","slug":"overview-of-twig-extentions-in-drupal-8","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/overview-of-twig-extentions-in-drupal-8\/","title":{"rendered":"Overview of Twig Extentions in Drupal 8"},"content":{"rendered":"

Drupal 8<\/span><\/a> introduces a great templating system “Twig<\/strong>“<\/span>\u00a0which is originating from Symfony, a PHP framework.<\/p>\n

This has brought about a big change in the Drupal community. Unlike Drupal 7, developers can’t use PHP functions directly\u00a0now on. Twig is a template framework and is a direct replacement for PHP template.<\/p>\n

Twig extension provides more flexibility to process almost anything inside twig. Twig extends in many ways such as\u00a0tags, filters, operators, global variables, and functions.<\/p>\n

Outlined below are the advantages of using Twig Extensions<\/strong>:<\/p>\n

Drupal 8 <\/a>views can increase the challenge in the case\u00a0where you want to change, update or modify a value or need to process the content in the field. When you need to write a code often, try to reuse it rather than writing it from scratch every time.<\/p>\n

Benefits of Twig Extensions<\/strong>:<\/p>\n

Creating twig extension helps to separate the compiled code and the code at runtime execution. Twig extension improves the experience with efficient coding techniques that involve lesser efforts and high flexibility.<\/p>\n

In the below example, we built an extension to render an image alt tag inside twig templates.<\/p>\n

To get started, we need to create a module for TwigExtension.<\/p>\n

Creating your Twig Extension<\/strong><\/p>\n

To start with it\u00a0first, we need to create a module.<\/p>\n

1.) Create a new module inside: \/modules\/custom\/ directory inside your drupal project.<\/p>\n

2.) Our new module structure would look like this:<\/p>\n

[php]
\n|modules
\n|–custom
\n|—-demo_module
\n|——demo_module.info.yml
\n|——demo_module.services.yml
\n|——src
\n|——–TwigExtension.php
\n[\/php]<\/p>\n

3.) demo_module.info.yml contains<\/p>\n

[php]
\nname: demo_module
\ntype: module
\ndescription: \u2018Provides Twig Extension that process the Alt tag of any given image.\u2019
\ncore: 8.x
\nversion: 0.1.1
\n[\/php]<\/p>\n

Information provided inside module_name.info.yml is used to be displayed on admin module page.<\/p>\n

4.) Create a service file inside your module as \u2018module_name.services.yml\u2019<\/p>\n

[php]
\nservices:
\n demo_module.twig.TwigExtension:
\n class: Drupal\\demo_module\\TwigExtension
\n tags:
\n – {name: twig.extension}
\n[\/php]<\/p>\n

5.) The TwigExtension.php contains the following code<\/p>\n

[php]
\n<?php
\nnamespace Drupal\\demo_module;
\nuse Drupal\\block\\Entity\\Block;
\nuse Drupal\\user\\Entity\\User;
\nuse Drupal\\node\\Entity\\Node;<\/p>\n

\/**
\n * Class DefaultService.
\n *
\n * @package Drupal\\demo_module
\n *\/
\nclass TwigExtension extends \\Twig_Extension {<\/p>\n

\/**
\n * {@inheritdoc}
\n * This function must return the name of the extension. It must be unique.
\n *\/
\n public function getName() {
\n return ‘block_display’;
\n }<\/p>\n

\/**
\n * In this function we can declare the extension function.
\n *\/
\n public function getFunctions() {
\n return array(
\n new \\Twig_SimpleFunction(‘getImageAlt’, array($this, ‘getImageAlt’), array(‘is_safe’ => array(‘html’))),
\n );
\n }
\n \/*
\n * This function is used to return alt of an image
\n * Set image title as alt.
\n *\/
\n public function getImageAlt($item) {
\n $image_alt = NULL;
\n if (method_exists($item, ‘getEntity’)) {
\n $entity = $item->getEntity();
\n $slide_image = $entity->get(‘field_image’)->getValue();
\n if ($slide_image) {
\n if (isset($slide_image[0])) {
\n $image = $slide_image[0];
\n \/\/ set "item title" as alt.
\n $item_value = $entity->get(‘field_item_title’)->getValue();
\n $image_alt = trim(strip_tags($item_value[0][‘value’]));
\n if(!empty($image_alt)){
\n return $image_alt;
\n }
\n else {
\n $image_alt = $image[‘alt’];
\n return $image_alt;
\n }
\n }
\n }
\n }
\n return $image_alt;
\n }
\n[\/php]<\/p>\n

6.) Now, enable your demo_module module.
\ndrush en demo_module -y<\/p>\n

7.) Clear the cache.
\ndrush cr<\/p>\n

8.) Applying Twig Extension to your twig template
\nYou can make a call to your TwigExtension directly inside template using \u201c{{ }}\u201d braces. These braces are used to render any content placed inside them.<\/p>\n

[php]
\n{% set imageAlt = getImageAlt(the_image) %}
\n<img class="slide-content" src="{{ image_style_url[key] }}" alt="{{ imageAlt }}" title="{{ the_image.title }}">
\n[\/php]<\/p>\n

Moving further, set\u00a0the value from getImageAlt() function to a variable imageAlt inside node.html.twig placed in themes\/my_theme\/templates directory and then, render the variable imageAlt inside image alt tag.<\/p>\n

TwigExtension provides a great accessibility to the code which is often reused. With easy reusability of the code, it also saves a lot of time and efforts. Hope you will now be able to use Twig in Drupal 8.<\/p>\n

Watch out my blog for more updates on Drupal 8.<\/p>\n","protected":false},"excerpt":{"rendered":"

Drupal 8 introduces a great templating system “Twig“\u00a0which is originating from Symfony, a PHP framework. This has brought about a big change in the Drupal community. Unlike Drupal 7, developers can’t use PHP functions directly\u00a0now on. Twig is a template framework and is a direct replacement for PHP template. Twig extension provides more flexibility to […]<\/p>\n","protected":false},"author":1037,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":16},"categories":[3602,1994,1],"tags":[258,4490,3601,4489,4356,4227,4456,4864],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46547"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1037"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=46547"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46547\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=46547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=46547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=46547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}