Seems title
is a render array. You probably have to use title.value
instead. But I'd recommend to simply preprocess that and leave the templates untouched.
You can implement hook_preprocess_hook
and then use TitleResolver::getTitle
and Html::cleanCssIdentifier
to do what you want from inside your theme's *.theme
file or from within a custom module's *.module
file:
/**
* Implements hook_preprocess_HOOK().
*/
function MYTHEME/MYMODULE_preprocess_page_title(&$variables) {
// This won't work properly with Twig debugging enabled.
// $title = $variables['title'];
// Here is a safer method to get the current title.
$request = \Drupal::request();
$route_match = \Drupal::routeMatch();
$title = \Drupal::service('title_resolver')->getTitle($request, $route_match->getRouteObject());
$css_title = \Drupal\Component\Utility\Html::cleanCssIdentifier($title);
$variables['title_attributes']['class'][] = 'page-title';
$variables['title_attributes']['class'][] = strtolower($css_title);
}
You can use nearly the exact same snippet to add that CSS class to the <body>
tag:
/**
* Implements hook_preprocess_HOOK().
*/
function MYTHEME/MYMODULE_preprocess_html(&$variables) {
$request = \Drupal::request();
$route_match = \Drupal::routeMatch();
$title = \Drupal::service('title_resolver')->getTitle($request, $route_match->getRouteObject());
$css_title = \Drupal\Component\Utility\Html::cleanCssIdentifier($title);
$variables['attributes']['class'][] = strtolower($css_title);
}