Integrate with taxonomy terms

Integrating the Tags component

We will use the Tags Taxonomy vocabulary that comes out of the box with Drupal.

Creating a view mode for the tags vocabulary

1. Go to the Tags Manage Display screen and create a new view mode for Tags called Blog. Creating a view mode for tags will allow us to create custom twig templates that will only affect tags in blog posts. Typically tags look the same across an entire website, but there are times when some tags may need to look different depending where they appear.

2. After the view mode has been created be sure to enable it in the Tags vocabulary.

3. Hide the label for the description inside the Blog view mode.

Update the Article content type

Now let's make a quick change to the Tags field in the Article content type so we can change the tag's format from Label to Rendered entity.

1. Go to the Article content type's Teaser view mode

2. Change the Tags fields format to Rendered entity and hide its label if not already done.

3. Change the Tags fields view mode to Blog by clicking the little cogwheel icon to the right of the Tags' field.

4. Be sure to click Update and then Save

Template suggestions for Taxonomy terms

If you recall when we built the Tags component above we did it in two steps, first we built a single tag item, then we built a list of tags by including the single item in a loop. We will follow the same approach for integrating the component with Drupal. We will create a twig template suggestion for a single link item, then we will create another one to wrap the entire list of tags.

1. Inspect the tags found in the homepage From our blog section (right-click + Inspect)

2. Identify the twig template suggestions for taxonomy. This will be the template for the individual tag item.

Taxonomy term template suggestions.

The first template suggestions above give us 3 options. We are going to name our template taxonomy-term--tags.html.twig.

1. Go ahead and copy the source template from its original location into your theme's /templates/content folder.

2. Rename the copy of the template to match our desired name.

Don't forget to clear Drupal's cache every time you add a new template to your theme.

The next template we need will be found just above the first one. The code looks like this:

As I mentioned before, we only want to affect tags that appear on blog posts. Looking at the list of options for template suggestions I can see that field--node--field-tags--article.html.twig (top one), is the one that gives us the more specific target. This template is for the Tags field in the Article content type and at the end it includes the view mode we just created for the Tags vocabulary, blog.

Go ahead and make a copy of this template from its original location into your theme's /templates/field folder, and rename it as we just discussed. This will be the template for the entire list of tags.

Time to integrate the tags

1. Open taxonomy-term--tags.html.twig and remove all the code except the comments

2. Add the following code at the bottom of the template:

taxonomy-term--tags.html.twig

{% include '@training_theme/tags/tag-item.twig' %}

• Since our tag item template (tag-item.twig) was built as a single link with variables for url and name, all we need to integrate it with Drupal is to include the template. No need for fields mapping because the taxonomy term template provides url and name by default.

• Open field--node--field-tags--article.html.twig and also remove all of the code except for the comments

• Add the following code at the bottom of the template:

field--node--field-blog-tags--article.html.twig

{% embed '@training_theme/tags/tags.twig' %}
  {% block tag_item %}
    {{ item.content }}
  {% endblock %}
{% endembed %}

• Twig blocks to the rescue again. We're embedding the tags component and using the tag_item twig block to pass the template's variables so they match what Drupal expects.

Now if you save your changes and clear Drupal's cache, reload the homepage and the regular cards will now displayed as shown in our designs.