1

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?

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.

  • 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 '17 at 6:51
  • You could add a custom variable via template_preprocess_field(). What's in your field twig file now? – lynbermt Oct 27 '17 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 '17 at 8:01
0

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;
    };
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.