Drupal Preprocess Functions

Preprocess functions are used to modify variables before they are used in the template. This allows developers to customize the output of a page without having to modify the template itself. Preprocess functions are used to add, remove, or alter variables that are used in the template.

Preprocess functions are typically used when you need to modify the variables that are used in the template. For example, if you need to add a custom variable to the template, you can use a preprocess function to do so.

Where to add these functions

themename.theme

Overview

• preprocess functions are optional - if they can be used they will be if not they will be skipped
• preprocess functions are Specific to a template (hook) based on naming convention
• preprocess functions always has 1 param

When to use Preprocess functions

• Use a preprocess function to alter/remove or add variables
• Make small alterations to the html output
• Any logic that is more complex then a simple if / else file consider refactoring into a preprocess function to keep template files nice and clean.

Naming Convention

function THEME_preprocess_H00K()

• HOOK is the name of the template your preprocessing variables for

The easiest way to determine what hook to use is to enable twig debug mode

Example

function THEMENAME_preprocess_node(&$variables) {
   $variables['simple_string'] = array(
   '#markup' => 'a simple_string'
   );
}

<div class = "string">
   
</div>

** Example - Add suffix to post author lable if logged in **

function THEMENAME_preprocess_node(&$variables) {
   if($variables['logged_in'] == TRUE && $variables['node']->getOwnerId() == $variables['user']->id()) {
      $variables['label']['#suffix'] = '-you are the author';
   }
}

** Example - Add new variable to template **

Use twig dump function to see the new variable added to the template

function THEMENAME_preprocess_node(&$variables) {
   $variables['current_user_is_owner'] = FALSE;

   if($variables['logged_in'] == TRUE && $variables['node']->getOwnerId() == $variables['user']->id()) {
      $variables['label']['#suffix'] = '-you are the author';
      $variables['current_user_is_owner'] = TRUE;
      }
}

Function Naming Conventions

Function THEME_preprocess_HOOK()

**example**
function bartik_preprocess_page()

** More specific targeting example **

THEMENAME_preprocess_node__42(): This is the most specific version and will only be called for a node with an ID of 42.
THEMENAME_preprocess_node__article(): This would be called for any article node, but not for other node types.
THEMENAME_preprocess_node(): This will be called for all nodes.

• The hook refers to the base name of the template file
• Use Twig Debug to find the hook name for the template file

You can ommit the hook part and add hook as param instead, for adding a variable to every template file - warning this will be called alot

Prepocess Examples

Inject var into every template

function THEMENAME_preprocess(&$variables, $hook)

Dynamically add layout class to a field

Based on a boolean value which is set in the paragraph block.

function THEME_preprocess_paragraph(&$variables) {
  // Get the paragraph type.
  $paragraph_type = $variables['paragraph']->bundle();

  if ($paragraph_type === 'cards') {
    // Add a class to the paragraph's attributes.
    $variables['attributes']['class'][] = 'container cards__wrapper';

    //dynamically add layout class to cards to set the layout
    // Access the boolean field value.
    $boolean_value = $variables['paragraph']->get('field_brand')->value;

    // Add a variable for use in the Twig template.
    $variables['is_active'] = (bool) $boolean_value;

    // Optionally, add logic based on the value.
    if ($boolean_value) {
      if (isset($variables['content']['field_card_micro_content'])) {
        // Add a custom CSS class to the field wrapper.
        $variables['content']['field_card_micro_content']['#attributes']['class'][] = 'row-cols-2';
      }
    } else {
      if (isset($variables['content']['field_card_micro_content'])) {
        // Add a custom CSS class to the field wrapper.
        $variables['content']['field_card_micro_content']['#attributes']['class'][] = 'row-cols-4';
      }
    }
  }
  }

Extensive example

function DERO_preprocess_field(&$variables) {

  /**
   * title 1 for edge advantage
   */
    if ($variables['element']['#field_name'] == 'field_dero_edge_title_1') {
      // Pass a flag or tag type to the template.
      $variables['custom_tag'] = 'h3';
      $variables['attributes']['class'][] = 'edge-advantage__title';
    }

  /**
   * title 2 for edge advantage
   */
  if ($variables['element']['#field_name'] == 'field_dero_edge_title_2') {
    // Pass a flag or tag type to the template.
    $variables['custom_tag'] = 'h3';
    $variables['attributes']['class'][] = 'edge-advantage__title';
  }

  /**
   * title 3 for edge advantage
   */
  if ($variables['element']['#field_name'] == 'field_dero_edge_title_3') {
    // Pass a flag or tag type to the template.
    $variables['custom_tag'] = 'h3';
    $variables['attributes']['class'][] = 'edge-advantage__title';
  }

  // Add a custom CSS class to edge_text field
  if ($variables['element']['#field_name'] == 'field_dero_edge_text_1') {
    $variables['attributes']['class'][] = 'edge-advantage__text';
  }

  if ($variables['element']['#field_name'] == 'field_dero_edge_text_2') {
    $variables['attributes']['class'][] = 'edge-advantage__text';
  }

  if ($variables['element']['#field_name'] == 'field_dero_edge_text_3') {
    $variables['attributes']['class'][] = 'edge-advantage__text';
  }
}

//More efficient way to add classes to fields

function DERO_preprocess_field(&$variables) {
  // Define a mapping of field names to CSS classes.
  $field_class_map = [
    'field_stat_number_1' => 'stats__number',
    'field_stat_number_2' => 'stats__number',
  ];

  // Check if the current field is in the map and apply the corresponding class.
  $field_name = $variables['element']['#field_name'];
  if (isset($field_class_map[$field_name])) {
    $variables['attributes']['class'][] = $field_class_map[$field_name];
  }
}

//Target paragraphs on a page

function THEMENAME_preprocess_paragraph(&$variables) {

  /**
   * Implements hook_preprocess_paragraph().
   */
    // Get the paragraph type.
    $paragraph_type = $variables['paragraph']->bundle();

    // Add a CSS class based on paragraph type.
    if ($paragraph_type === 'stats') {
      // Add a class to the paragraph's attributes.
      $variables['attributes']['class'][] = 'container stats__wrapper';
    }

    // Add a class based on specific conditions.
    if ($paragraph_type === 'image_block' && $variables['paragraph']->id() == 123) {
      $variables['attributes']['class'][] = 'special-image-block-class';
    }
}

More info

more