1

I am new to Drupal 8 theming and I've been long time trying the following:

I want to add classes to page-title in the template, page-title.html.twig. Two new classes:

1.- 'page_title'

2.- The real title of the page

The code I'm using is,:

{{ title_prefix }}

{%
set classes = [
'page-title',
title|clean_class
]
%}

{% if title %}
<h1{{ title_attributes.addClass( classes ) }}>{{ title }}</h1>
{% endif %}

{{ title_suffix }}

it renders:

<h1 class="js-quickedit-page-title page-title array">FORMACIÓN: CURSOS Y  TALLERES</h1>

The string 'page-title' is working well but the variable title provoke an error:

Notice: Array to string conversion in Drupal\Component\Utility\Html::getClass() (line 72 of core\lib\Drupal\Component\Utility\Html.php).

And print the class, array.

Any help?

1

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.