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

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.

Purple

Green

Blue

Orange

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!

Color vocabulary list in Drupal 8

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.

Manage fields screen in Drupal 8

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!

Discover

Design

Develop

Deploy

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.

Bạn thấy bài viết này như thế nào?: 
Average: 8.6 (8 votes)
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: asaleotestf@gmail.com
  • Telegram Messenger: https:/t.me/tommytran0401

Bình luận (1)

Ảnh của Nick
Nick (chưa được kiểm chứng)- Oct 22, 2020 08:58 AM Reply

$tid = $para->get('field_category')->getString();
$tname = $para->get('field_category')
->get(0)
->get('entity')
->getString();

 

Add Comment

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
3 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Hướng dẫn viết Conditional CSS for IE10 và IE 11

Hướng dẫn viết Conditional CSS for IE10 và IE 11

While working on recent Drupal projects, I learned that Internet 10 and 11 (IE10-11) no longer support IE conditional comments

A HTC Sensation 4G Review

A HTC Sensation 4G Review

The HTC Sensation 4G sensation is a gorgeous phone and my opinion one of the best smart phones in the market so far. Anyone who is out shopping for a stylish and elegant phone should definitely take a good look at this particular phone.

ZAGGkeys FLEX – bàn phím không dây siêu đẹp cho máy tính bảng

ZAGGkeys FLEX – bàn phím không dây siêu đẹp cho máy tính bảng

Được ra đời với mục đích dành riêng cho máy tính bảng, thiết bị này còn sở hữu pin tự sạc cho thời gian sử dụng lâu hơn.