n Create custom image token in drupal 8 & 9 | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

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.

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'){
              $image_style = 'large';
              $style = ImageStyle::load($image_style);
              $url_final = $style->buildUrl($node->get('field_image')->entity->getFileUri());
          $replacements[$original] = $url_final;
  return $replacements;

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

custom image token


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.





Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook