How do I override a field template?

Question

I am trying to override a field template with my own one. The field is called field_test, so I created a field--field-test--mynodetype.html.twig template file ` in root-theme-directory/templates/, but Drupal doesn't recognize it.

I cleared the cache from the UI, enabled debug mode in settings.yaml, installed the Devel module, and re-generate the theme registry on each request, but nothing seems to help. The field gets always rendered with the default field.html.twig template.

How do I override the field template Drupal uses?

Answer 1

You need to specify the entity type (node, taxonomy_term, ...) in the template name suggestion as you specified, i.e. field--node--field-test.html.twig.

node is the entity type, and field-test is the field name.

If you want to know which template is generating a particular markup element, you can use Twig's debug option. You enable Twig debugging in sites/default/services.yml; set the value of debug in twig.config to true.

I have added the field_test field to the Article nodes, and I got the template suggestions in the HTML source.

<!-- FILE NAME SUGGESTIONS:
   * field--node--field-test--article.html.twig
   * field--node--field-test.html.twig
   * field--node--article.html.twig
   * field--field-test.html.twig
   * field--string.html.twig
   x field.html.twig
-->

After getting the suggestion, I created a template file and kept this in the templates directory of the theme.

Remember to clear the cache.

See Working With Twig Templates for more information.

Answer 2

Templates must be placed in a 'templates' directory in your theme. They won't be picked up in the root of your theme. See https://www.drupal.org/node/2349803#templates (which I just updated to note the difference from the Drupal 7 behaviour).