How to print taxonomy terms field in node templates?

Question

How can I display node taxonomy terms field in node templates of Drupal 8?

We do this in Drupal 7 by add this code to node.tpl.php file:

print render($content['field_tags']);

I tried adding the below code in Drupal 8:

{{ content.field_tags }}

but with this code have problems:

1. If I add some styles or make some changes to field--node--field-tags.html.twig file these changes displays in all content types also.

2. If I don't want to show default taxonomy terms in the bottom of article nodes (I want to move and show taxonomy terms in the top of the article) and I assign "Hidden" value in "Administration>Structure>Content types>Article" in "Format" section, this settings cause to not displays all the taxonomy terms fields in throughout of the article nodes at all.

3. Taxonomy terms Label always display even if no tags added to the node. How can I show taxonomy terms label and their values only when have been added any tags to it?

Answer 1

To answer the questions:

If I add some style to field--node--field-tags.html.twig file that's also displayed again in node.html.twig file?

If I don't want to show default taxonomy terms in end of an article node and i assign "hidden" value in "Administration>Structure>Content types>Article" in "Format" section, that's also not displayed?

Both questions are connected and I think they come from a D7 background. In D7 when you print a field, it will be hidden from further output. This is not the case in D8. If you print a single field in a node twig:

{{ content.field_tags }}

You have to exclude it later when the complete content is outputted:

{{ content|without('field_tags') }}

That is the only way. You can't hide it in the "Format" section, because then you have no field content you can use for the first twig statement.

It always displays Taxonomy Terms even if no tags added to node. How can I show only Taxonomy Terms name and their links without any previously added style, if added any tags to node?

You can configure if the label will be displayed in the "format" section mentioned before. But you can also use

field--field-tags.html.twig

to change wether and in what form the label should be displayed. You can also use this twig to theme the html and prepare for css. You need some css for nice tags.

Answer 2

1. Yes, this will be used in all nodes with that field ! You could add a contenttype specific node.html.twig (see next point), or if you only want to add classes, do it in template_preprocess_node(&$variables), add classes to $variables['content']['field_tags'][x]['attributes']['class'][] = 'my-style', you can check there for the contenttype.

2. What are you rendering ? If you render the node's field, you'll only get the assigned terms ?! For custom node-specific theming you could use something like this in

node--type-your_contenttype.html.twig:

   {% for item in content.field_tags %}
      {% if item['#title'] %}
        <a href="{{ item['#url']}}" class="link-item">{{ item['#title']  }}</a>
      {% endif %}
    {% endfor %}

Also {{ item['#options'].entity.url() }} or {{ path('entity.taxonomy_term.canonical', {'taxonomy_term': item['#options'].entity.tid}) }} could be used to retrieve the URL.

---

Regarding your icons

Use tid or parent and name it like icon-34. Access it in twig like: item['#options'].entity.parent or item['#options'].entity.tid.

But I would recommend the use of a preprocess function to add a key-value pair to each item array where you set the name. For example from a field you added to your taxonomy. You could then access it in twig like {{ item.key }}

Answer 3

Displaying the name of a single term associated with the node:

<div class="term-display">{{ node.field_my_taxonomy.entity.name.value }}</div>

Looping through list of term names within that taxonomy (if you have multiple values):

{% for item in node.field_my_taxonomy %}
  <div class="term-display">{{ item.entity.name.value }}</div>
{% endfor %}