4

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?

1
  • 2
    sry but is not the case if you just use a if on node.html.twig something like {% if content.field_tags %} <div class="article_tags"> <h3>{{ "Tags"|t }}</h3> {{ content.field_tags }} </div> {% endif %} and on field--node--field-tags.html.twig just something like {% for item in items %} {{ item.content }} {% endfor %}. Its better you use the proper template file for each element, try not use a node template to format a field, will be easier to maintain in the future.
    – Vagner
    Apr 28, 2016 at 18:21

3 Answers 3

3

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.

8
+50
  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 }}

2
  • I just guessed, item['#url'] will work - also updated the other two ideas.
    – rémy
    Apr 27, 2016 at 21:27
  • path('entity.taxonomy_term.canonical', {'taxonomy_term': item['#options'].entity.tid}) worked for me. Don't know why ['#title'] thing didn't. This answer deserved +50. :-) Aug 26, 2017 at 21:35
5

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 %}
1
  • Yep, this one 👆 Gets the term from the node instead of from content and by that is independent from the display settings. As content only contains what's been configured to be displayed. While node links to the actual data. 👌
    – leymannx
    Dec 8, 2021 at 10:02

Your Answer

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

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