Hướng dẫn thêm Colors vào Taxonomy Terms trong Drupal 8

A common design strategy used when showcasing content organized into categories is to use a unique color to represent each category. In this article, I’ll explain step-by-step how to assign colors to taxonomy terms and how you can use these values in your Drupal 8 theme.

>> Hướng dẫn display Entity Reference Fallbacks trong Drupal 8

>> Hướng dẫn xây dựng 1 Accessible Accordion trong Drupal 8

1. Define a color palette

Instead of using a color-picker to give content editors free-reign to select any color of the rainbow, it is recommended to define a color palette that coincides with the brand that you’re working with. Not only does this ensure that the overall design is consistent, but it also makes it easier for content-editors by reducing the amount of options they have to pick from.

2. Create a color vocabulary and add terms

Create a simple vocabulary named “Color,” and then add a term for each color in the color palette that you defined in Step 1. You can add as many or as few colors as you need!

2.5. Add taxonomy term reference field to other vocabularies

This step is optional, but if you would like an extra layer of abstraction between the color and the content, then you can always add other vocabularies — like categories — and add a taxonomy term reference field referencing the color to those vocabularies. This is especially nice to implement if you have multiple vocabularies that need to use the same color palette.

3. Add a taxonomy term reference field to content types

Now, on each of your color-coded content types, add a taxonomy term reference field and use the new Color vocabulary that you created in Step 2.

4. Use a node preprocess function to apply a class to nodes

In order to express our color choice in css, we will have to add a class to our node type based on the color field’s value. To do this, add this node preprocess function to your THEME.theme file:

use Drupal\Component\Utility\Html;

/**
 * Implements hook_preprocess_HOOK() for node.html.twig.
 */
function THEME_preprocess_node(&$variables) {
  $node = $variables['node'];

  // Check if this node has a five-fold calling assigned.
  if ($node->hasField('field_color') && !$node->get('field_color')->isEmpty()) {
    $color = $node->field_color->entity->getName();
    $variables['attributes']['class'][] = Html::cleanCssIdentifier($color);
  }
}

This block of code first checks to see if the node has the color field. If it does, it adds a class to the node that matches the value of the color selected. 

Keep in mind, if you added the extra vocabulary from Step 2.5, your preprocess code would probably look more like this:

use Drupal\Component\Utility\Html;

/**
 * Implements hook_preprocess_HOOK() for node.html.twig.
 */
function THEME_preprocess_node(&$variables) {
  $node = $variables['node'];

  // Check if this node has a five-fold calling assigned.
  if ($node->hasField('field_color_category') && !$node->get('field_color_category')->isEmpty()) {
    $color = $node->field_color_category->entity->field_color->entity->getName();
    $variables['attributes']['class'][] = Html::cleanCssIdentifier($color);
  }
}

5. Apply CSS styles to your new color classes!

Using this newly applied color class, you can write the css needed to express each color. Because we are applying the class to the entire node and not just the field, we are able to apply unique color styles for each different content type and view mode. I love this technique because it allows for a lot of flexibility!

Why use taxonomy terms?

We could just add a color field directly to our content types, so why should we bother with the extra work with taxonomy terms? Using taxonomy terms allows us to easily add, remove, and edit our color values over time. It also allows us to link different types of color-changing content types and behaviors using a single vocabulary, making it a very flexible and future-proof solution.

Final Thoughts

As with almost everything in Drupal 8, there are many different ways that you could go about color-coding taxonomy terms. For me, this approach works best because it allows for a lot of flexibility in terms of CSS styling and adding or removing colors over time.