4

In Drupal 8, what is the twig template name for a node edit form for a custom content type called for example "device".

  • For a default node we use node-edit-form.html.twig
  • So what is the edit template name for a custom content type ?

I would appreciate your help. Thank you !

6

You could have a look at this comment. It suggests adding a theme suggestion like this:

This feels hacky, but it's the best I can come up with. First add this code to your admin .theme file (likely a sub-theme of Seven):

function NAMEOFTHEME_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
   if ($hook == 'node_edit_form') {
     if ($node = \Drupal::routeMatch()->getParameter('node')) {
      $content_type = $node->bundle();
     }
     else {
       $current_path = \Drupal::service('path.current')->getPath();
       $path_args = explode('/', $current_path);
       $content_type = $path_args[3];
     }
     $suggestions[] = 'node_edit_form__' . $content_type;
   } 
 }

Next, create twig templates in your theme's template directory in the form of node-edit-form--NODE-TYPE-SEPARATED-WITH-DASHES.html.twig.

1
  • Approach looks pretty ok, but there is no reason for parsing the url like that, just get the node type with \Drupal::routeMatch()->getParameter('node_type') (not sure about node type, would have to look up the route to be certain)
    – Berdir
    Mar 14 '17 at 0:11
1

Based on Neograph734's answer and Berdir his comment on it, the node type is indeed already available (no need get it out of the path). I would recommend to add the theme suggestion using:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for node_edit_form.
 */
function example_theme_suggestions_node_edit_form_alter(array &$suggestions, array $variables) {
  $route_match = \Drupal::routeMatch();

  if ($node = $route_match->getParameter('node')) {
    // When editing an existing node, add the node's bundle as the theme hook
    // suggestion.
    $suggestions[] = $variables['theme_hook_original'] . '__' . $node->bundle();
  } elseif ($node_type = $route_match->getParameter('node_type')) {
    // When a new node is created, the node type (object) is provided.
    $suggestions[] = $variables['theme_hook_original'] . '__' . $node_type->id();
  }

  return $suggestions;
}

This allows you to write targeted Twig templates and/or pre-process functions. When your node type's machine name is device, your Twig template should be named node-edit-form--device.html.twig and your pre-process function example_preprocess_node_edit_form__device(&$variables), where example is the name of your theme (or module).

-1

If you want to theme a specific form, for example the edit form of a node type, then all you have to do is

/**
 * Implements hook_theme().
 */
function THEMENAME_theme($existing, $type, $theme, $path) {
  return [
    // form id (weather it's an edit node for or a new node form)
    'node_NODE_CONTENT_TYPE_edit_form' => [
      'render element' => 'form',
    ],
  ];
}

Then create a twig file node-NODE-CONTENT-TYPE-edit-form.html.twig

and theme it like so:

{{ form.field_MACHINE_NAME_OF_FIELD }}
{{ form.field_MACHINE_NAME_OF_FIELD2 }}
...
{# this prints out the submit button #}
{{ form.actions }}
{# you need to have this for the form to work properly #}
{{ form|without('name', 'field_MACHINE_NAME_OF_FIELD2', 'field_MACHINE_NAME_OF_FIELD3') }}

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.