Enhancing Drupal with custom Twig functions and filters

Twig Extensions – Drupal

Introduction

Drupal, a leading content management system (CMS), is renowned for its adaptability and scalability, offering developers a platform to create tailored digital solutions. At the heart of Drupal’s theming layer lies Twig, a versatile templating engine. This blog explores the utilization of custom Twig functions and filters, explaining how these extensions can enrich Drupal projects, from version 9 to the latest iteration, Drupal 10.

Understanding Twig in Drupal:

Twig, introduced in Drupal 8 and continuing through Drupal 9 and beyond, provides an elegant means to construct templates. It promotes clean, secure, and maintainable code by separating application logic from presentation. Twig templates define the visual representation of content, dictating how data is rendered for end-users.

While Drupal’s core offers a robust set of Twig functions and filters, custom implementations can extend its capabilities significantly. Let’s explore how custom Twig functions and filters can enhance Drupal sites’ theming layer.

Utilizing Twig Functions and Filters: Their Purpose and Advantages in Drupal

• Separation of Concerns: Twig separates the presentation layer (HTML output) from the business logic, ensuring cleaner and more maintainable code.
• Customization: While Drupal provides core Twig functions and filters, custom ones allow developers to tailor templates to specific project needs without modifying core code.
• Reusability: Functions and filters encapsulate frequently used or complex logic, promoting code reuse across templates and reducing redundancy.
• Enhanced Theming: They enable dynamic content manipulation, such as formatting dates, manipulating strings, or decoding URLs, which is crucial for delivering a personalized and user-friendly experience.

Custom Twig Functions:

Twig functions execute specific tasks within templates. Custom Twig functions enable developers to encapsulate complex logic or frequently used functionality, enhancing reusability and maintainability.

For instance, consider the need to reverse the given string. A custom Twig function can streamline this process, accepting parameter as string and return reversed string.

Define the service for the Twig extension in the twig_extensions_demo.services.yml file:

services:
  twig_extensions_demo.twig_extension:
    class: Drupal\twig_extensions_demo\TwigExtension\CustomTwigExtensions
    tags:
      - { name: twig.extension }

Create the Twig extension class with our custom function in src/TwigExtension/CustomTwigExtensions.php:

<?php

namespace Drupal\twig_extensions_demo\TwigExtension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

/**
 * CustomTwigExtensions provides custom twig extensions.
 */
class CustomTwigExtensions extends AbstractExtension {

  /**
   * Twig functions
   *
   * @return \Twig\TwigFunction[]
   *   TwigFunction array.
   */
  public function getFilters() {
    return [
      new TwigFunction(
        'reverseString',
        [$this, 'reverseString']
      ),
    ];
  }

  /**
   * Custom Twig function callback to reverse a string.
   *
   * @param string $string
   *   The string to be reversed.
   *
   * @return string
   *   The reversed string.
   */
  public function reverseString($string) {
    return strrev($string);
  }

}

Custom Twig Filters:

Twig filters modify variables or data within templates, allowing dynamic transformations or formatting. Custom Twig filters tailor content presentation to site-specific requirements.

For instance, a custom Twig filter can decode URLs, transforming encoded characters back into their original form, thereby facilitating the manipulation and presentation of web addresses within your Drupal templates.

Create the Twig extension class with our custom filter in src/TwigExtension/CustomTwigExtensions.php:

<?php

namespace Drupal\twig_extensions_demo\TwigExtension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

/**
 * CustomTwigExtensions provides custom twig extensions.
 */
class CustomTwigExtensions extends AbstractExtension {

  /**
   * Twig filters
   *
   * @return \Twig\TwigFilter[]
   *   TwigFilter array.
   */
  public function getFilters() {
    return [
      new TwigFilter(
        'url_decode',
        [$this, 'urlDecoder']
      ),
    ];
  }

  /**
   * Function to decode url
   *
   * @param string $string
   *  Html as string
   *
   * @return string
   *  Filtered html
   */
  public static function urlDecoder(string $string) {
    return urldecode($string);
  }

}

Implementing Custom Twig Extensions:

Custom Twig functions and filters are implemented as Twig extensions in Drupal. These extensions encapsulate custom logic, making it available for seamless integration into templates.

To utilize these custom Twig extensions in your Drupal templates:

{# Example usage of custom Twig function #}
{{ reverseString('Hello World') }}

{# Example usage of custom Twig filter #}
{{ 'https%3A%2F%2Fexample.com%2Fpage'|urlDecoder }}

Integrating Twig Functions and Filters into Drupal Views:

Drupal Views are powerful tools for creating lists and grids of content, such as articles, products, or users. Integrating Twig functions and filters within Views enhances their flexibility and presentation capabilities.

Example Scenario:

Suppose you have a Drupal View displaying a list of articles, and you want to customize how certain fields are displayed using Twig functions and filters.

Steps:

Create Custom Twig Functions or Filters:
Define your custom Twig functions or filters in a Twig extension class, similar to the examples provided earlier. These could include functions to format dates, manipulate strings, or apply custom logic specific to your content types.

Implement Twig Extensions:
Ensure your Twig extensions are registered and available to your Drupal site as described in the blog. This involves defining the service in ‘services.yml’ and implementing the Twig extension class.

Apply Twig Functions or Filters in Views:
In your Drupal View configuration:

• Edit the field you want to customize (e.g., article title, publication date).
• Use Twig syntax directly in the field settings to apply your custom function or filter.

Example Usage:

Suppose you have a custom Twig filter ‘urlDecoder’ that decodes URLs:

{{ view.field.article_url | urlDecoder }}

This would decode the URL stored in the ‘article_url’ field of your View.

Benefits:

• Flexibility: Customize how fields are rendered without modifying underlying data or View configuration.
• Consistency: Apply consistent formatting across different Views or content types using the same Twig functions or filters.
• Maintainability: Keep logic centralized in Twig extensions, making it easier to update and debug.

By incorporating Twig functions and filters into Drupal Views, developers can leverage the full power of Twig’s templating capabilities to deliver dynamic and tailored content presentations, enhancing both functionality and user experience.

Conclusion:

Custom Twig functions and filters enhance the presentation layer of Drupal sites, promoting streamlined development and consistent user experiences. Leveraging these extensions, developers can elevate their Drupal projects, delivering dynamic and engaging digital solutions.

As Drupal evolves, embracing the full potential of Twig customization remains pivotal. By harnessing custom Twig functions and filters, developers can unlock new possibilities, ensuring their Drupal sites stand at the forefront of innovation and user experience.