Create custom image token in drupal 8 & 9

Tokens is a fundamental element in any Drupal site. It comprises of custom pieces of text that can be used as placeholders for predefined values. These tokens are placed in a [token:type] format.

In this article, I'll show you how to create custom image token in drupal 8 & 9.

Follow the instructions below to create our custom "custom_image_token" module:

Create custom_image_token.info.yml file:

name: Custom image token
type: module
description: "Return url of image in custom token"
package: Custom
core_version_requirement: ^8 || ^9

Create custom_image_token.module file:

The first thing we’ll need in this file is, hook_tokens_info() This is where we’ll define our token for Drupal. Which will make our new token available in UI.

In the second part of the code, the hook_tokens() function is used to actually make the token perform its desired function.

<?php
use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_token_info()
 * @return array
 */
function custom_image_token_token_info() {
  $type = array(
    'name' => t('Custom'),
    'description' => t('Custom Tokens'),
  );

  $node['custom_image_token'] = array(
    'name' => t("customimagetoken"),
    'description' => t("Custom image token.")
  );

  return array(
    'types' => array('customtoken' => $type),
    'tokens' => array('customtoken' => $node)
  );
}

/**
 * Implements hook_tokens()
 * @param $type
 * @param $tokens
 * @param array $data
 * @param array $options
 * @param \Drupal\Core\Render\BubbleableMetadata $bubbleable_metadata
 * @return array
 */
function custom_image_token_tokens($type, $tokens, array $data, array $options, \Drupal\Core\Render\BubbleableMetadata $bubbleable_metadata) {
  $url_final = '';
  $replacements = array();
  if ($type == 'customtoken' && !empty($data['node'])) {
    $node = $data['node'];
    foreach ($tokens as $name => $original) {
      switch ($name) {
        case 'custom_image_token':
          if($node->getType() == 'article'){
            if(isset($node->get('field_image')->entity)){
              $image_style = 'large';
              $style = ImageStyle::load($image_style);
              $url_final = $style->buildUrl($node->get('field_image')->entity->getFileUri());
            }
          }
          $replacements[$original] = $url_final;
          break;
      }
    }
  }
  return $replacements;
}

Clear your Drupal caches, and then our new token will be available in UI like this.

Next steps

• Clear your Drupal caches. To do this I use this Drush command: drush cr if you don’t currently use Drush, I highly recommend using it, or the Drupal Console.
• Now, go back to your site, and you should be able to see the new custom token.
• I hope you found this article useful. let me know if you have any questions and I’ll be happy to answer them.
• This code can be found and downloaded from https://github.com/codimth/custom_image_token.