3

I'd like to add custom class in my drupal template, in header region, but it doesn't works.

<!-- BEGIN OUTPUT from 'themes/marinenat/templates/layout/page.html.twig' -->
<div class="layout-container">

  <header role="banner">
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   x region--header.html.twig
   * region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/marinenat/templates/layout/region--header.html.twig' -->
<div class="nav">

I'd like to add this class after "nav" class di region--header.

Anyone can help me

antoine
  • 45
  • 2
  • 6

1 Answers1

6

You already have all you need in the output.

Many roads lead to Rome

If themes/marineat is you base theme, simply copy themes/marinenat/templates/layout/region--header.html.twig into your subtheme's themes/MYSUBTHEME/templates directory and edit this file. Flush cache. Done.

If themes/marinenat is you custom subtheme simply edit the suggested template file /themes/marinenat/templates/layout/region--header.html.twig/ and add your class there. Flush cache. Done.

Last but not least you can also add classes to a region from a preprocess function from your MYSUBTHEME.theme file or any MYMODULE.module file.

/**
 * Implements template_preprocess_region().
 */
function MYTHEME/MYMODULE_preprocess_region(&$variables) {

  if (isset($variables['region']) && $variables['region'] == 'header') {
    $variables['attributes']['class'][] = 'MYCLASS';
  }
}

How to pass a string from PHP to Twig

/**
 * Implements template_preprocess_region().
 */
function MYTHEME/MYMODULE_preprocess_region(&$variables) {

  $variables['foo'] = FALSE;

  if (isset($variables['region']) && $variables['region'] == 'header') {       

    // Get the current node.
    $node = \Drupal::routeMatch()->getParameter('node');

    if ($node instanceof \Drupal\node\NodeInterface) {

      // Get the node type.
      $node_type = $node->bundle();

      // Do what ever else you need to do to retrieve your class dynamically.
      $variables['foo'] = $node_type;
    }
  }
}

Then in your region--header.html.twig Twig file it's:

{% if foo %}
  <div class="nav {{ foo }}">
    {{ content }}
  </div>
{% endif %}
leymannx
  • 5,138
  • 5
  • 45
  • 48
  • Hello, I add in marinenat.theme preprocess region function and flush cache, but class not appear – antoine May 25 '18 at 07:36
  • @antoine - What exactly did you add? Did you replace `MYTHEME/MYMODULE_preprocess_region` with `marineat_preprocess_region`? If it's still not working edit the template `/themes/marinenat/templates/layout/region--header.html.twig/`. – leymannx May 25 '18 at 08:02
  • My template /themes/marinenat/templates/layout/region--header.html.twig is :
    {% if content %} {{ content }} {% endif %}
    – antoine May 25 '18 at 08:07
  • Guess what happens when you change it to `
    {% if content %} {{ content }} {% endif %}
    `?     – leymannx May 25 '18 at 08:08
  • Yes, exactly, but I'd like to add class dynamically – antoine May 25 '18 at 08:29
  • @antoine – This is the first time you tell us about some conditions. What conditions? Maybe you should add this to your question. I updated my answer to show you how to pass a string from PHP to Twig. You can easily make this to follow your desired logic – dynamically. – leymannx May 25 '18 at 08:37
  • you're right. I'd like to add a class foo dynamically according the content type, just near "nav" class in the header – antoine May 25 '18 at 08:41