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.
10 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 
Khởi động Google Code từ Dec 1st trong đó có Drupal, năm 2014

Khởi động Google Code từ Dec 1st trong đó có Drupal, năm 2014

The Code-In contest will end January 19th 2015 and Drupal has an awesome chance to connect

Ví dụ sử dụng 2 function theme_table() và theme_fieldset() trong Drupal 7

Ví dụ sử dụng 2 function theme_table() và theme_fieldset() trong Drupal 7

In Drupal 7 API there is a chapter dedicated to site theming. All elements of a site, without exclusion, should go through the theming process.

Cách restore lại website Drupal khi bị hacked Site

There are two ways to find out whether your site has been hacked. With "git status" and by searching the database.