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: Customcore_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 crif 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.
