2

I want to add a class to the body to distinguish the node's view page from the edit page.

In classy you have 'page-node-type-' ~ node_type|clean_class. I'd like to add page-node-type-' ~ node_type|clean_class ~ '-edit' if we're on the edit page, but I can't figure out what that if statement would have in its condition.

Which code should I use to add that class only when a node is being edited?

3
  • I think what you may want to do is handle this in the .theme file and add logic to pass additional classes in based on the path. See this question: drupal.stackexchange.com/a/208617/57
    – Kevin
    Commented Mar 30, 2017 at 23:14
  • Beautiful! I think that's an answer though? It's appearing it will solve my question quite well. Commented Mar 30, 2017 at 23:30
  • Alright, I will post it as an answer. Some people don't want to write anything in the .theme file, which is why I asked first.
    – Kevin
    Commented Mar 30, 2017 at 23:31

2 Answers 2

3

In this case you'd want to look at parts of the url. The easiest way to do that would be passing in additional classes from a preprocess function in the .theme file, and by looking at the URL path:

$current_path = \Drupal::service('path.current')->getPath();
$path_args = explode('/', $current_path);

if ($path_args[0] == 'node' && $path_args[2] == 'edit') {
  // add classes
}

This would be similar to using the arg() function from previous versions.

5
  • Worked great! Made a small edit in practice, I cliped off the first char of $current_path, it's a /, and if you don't $path_args[0] was an empty string. Also made sure that the 0 and 2 index existed so I don't get an error on pages that don't have 3 args. Commented Mar 30, 2017 at 23:37
  • In practice I also decided to set a var $variables['is_node_edit'], might come in handy more than once, and then I'm still setting all of my classes in the twig file. Commented Mar 30, 2017 at 23:40
  • Nevermind the slice - first you'd have to split the var by '/' then use slice against it. It's a bit too much for a twig template in my opinion.
    – Kevin
    Commented Mar 30, 2017 at 23:42
  • Is the node.html.twig template used when a node is being edited? I would think it is not used when a node is edited.
    – apaderno
    Commented Mar 31, 2017 at 7:14
  • I needed the class on the body tag so I could style the page title, so node.html.twig wasn't what I needed. On the edit page it doesn't use the node template at all, it uses form.html.twig Commented Mar 31, 2017 at 16:23
0

The node.html.twig template is just used when the a node is displayed, as the documentation itself says. (Emphasis is mine.) So you don't have any need of using a if statement to distinguish the view case from the edit case, since the template files used are two different ones.

Default theme implementation to display a node.

The template used when a node is being edited is a different one. In the comments in the theme_get_suggestions() function, you can see which template files are suggested for a path like node/1/edit.

  • page__node
  • page__node__%
  • page__node__1
  • page__node__edit

The last one is more specific for your case, since you need to use it when a node is being edited, independently from the node ID.

If you just need to add a CSS class when a node is being edited, you can take the code in seven_preprocess_html() as guide.

  $path_args = explode('/', \Drupal::request()->getPathInfo());
  if ($suggestions = theme_get_suggestions($path_args, 'page', '-')) {
    foreach ($suggestions as $suggestion) {
      if ($suggestion === 'page-node-edit' || strpos($suggestion, 'page-node-add') !== FALSE) {
        $variables['attributes']['class'][] = $the_class_you_want_to_add;
      }
    }
  }

That code adds a CSS class when a node is created or edited; if you just need to add a CSS class when an existing node is edited, you can simplify the code.

  $path_args = explode('/', \Drupal::request()->getPathInfo());
  if ($suggestions = theme_get_suggestions($path_args, 'page', '-')) {
    foreach ($suggestions as $suggestion) {
      if ($suggestion === 'page-node-edit') {
        $variables['attributes']['class'][] = $the_class_you_want_to_add;
      }
    }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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