2

I am trying to target a specific div with CSS. But for that, I need a unique class in order to target a specific taxonomy term. I look at this question, but that doesn't work as it will target all taxonomy terms.

I have created a vocabulary called 'Titles' which has the following terms in it:

enter image description here

Which will display the following in my browser:

enter image description here

Note that I am not using a view to display these titles. Instead, I used a preprocess function:

function MYTHEME_preprocess_node(&$variables) {
  $variables['authortitle'] = \Drupal::entityTypeManager()->getViewBuilder('user')->view($variables['node']->getOwner(), 'nodetitle');
}

How can I add "Writer" as a class to the <a> tag?

Improve this question

3 Answers 3

Reset to default
2

To append a term's name as CSS class to the term field itself you could simply implement template_preprocess_field() like so:

use Drupal\taxonomy\Entity\Term;
use Drupal\Component\Utility\Html;

/**
 * Implements template_preprocess_field().
 */
function MYTHEME_preprocess_field(&$variables) {

  if ($variables['field_name'] == 'field_MYFIELD') {

    if (!$variables['element']['#items']->isEmpty()) {

      // Get the term ID.
      $tid = $variables['element']['#items']->getValue()[0]['target_id'];

      // Load the term.
      $term = Term::load($tid);

      // Get the term name.
      $name = $term->getName();

      // Make the term name safe to be used as CSS class.
      $name_safe = strtolower(Html::cleanCssIdentifier($name));

      // Append class.
      $variables['attributes']['class'][] = $name_safe;
    };
  }
}
Improve this answer
0

Using content values for classes can be accomplished in twig. For something as simple as your example above I'd override taxonomy-term.html.twig for my theme. Adding class="{{ name}}" to the 'a' tag in there should do it.

You could also use attributes.addClass() similar to the way node information is added in those twig files.

Improve this answer
3
  • Hi @lynbermt, thank you for your answer. Unfortunately, this only works on a taxonomy page. I am loading a taxonomy term on the homepage using field.html.twig. Your solutions doesn't work here, do you have another suggestion? :)
    – Rubenxfd
    Oct 27, 2017 at 6:51
  • You could add a custom variable via template_preprocess_field(). What's in your field twig file now?
    – lynbermt
    Oct 27, 2017 at 16:01
  • I managed to add the value as a class with class="{{ item.content }}". This only works on taxonomy page as I put it in the field.twig.html.
    – Rubenxfd
    Nov 3, 2017 at 8:01
0

I find very useful to have taxonomy based classes in the <body> tag.

Typical: you want to hide the "share to social" field form some kind (term) of pages.

Having a term based class in body you can

body.tid-123 field-with-social-links  {
  display none;
}

Find out how to in https://drupal.stackexchange.com/a/220751/13760

Improve this answer

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.