By kopeboy on

How to add the term id (tid) as a CSS class on every taxonomy term field?

Example: field_tags
Multiple value. If I display it using the Link formatter, I have this result:

<div class="field field-name-field-tags">
  <a href="/tags/tag-1" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Tag 1</a>
  <a href="/tags/tag-2" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Tag 2</a>
</div>

on which I would like to add the term id as a CSS class, like:
...
<a href="/tags/tag-1" class="tid-1" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Tag 1</a>
<a href="/tags/tag-2" class="tid-2" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Tag 2</a>
...

⋅ Categories: Drupal 7.x

Comments

himanshupathak3’s picture

himanshupathak3 commented 
function YOURTHEME_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if (isset($element['#field_name'])) {
    if ($element['#field_name'] == 'field_tags') {
      foreach ($variables['items'] as $index => $item) {
        $variables['items'][$index]['#options']['attributes']['class'][] = 'tid-*'; // you can generate tid from ['#options']['entity']
      }
    }
  }
}

Himanshu

kopeboy’s picture

kopeboy commented

Thank you!

Should I put this in my theme's template.php ?

And is the tid already in ['#options']['entity'] or do I need to load anything more?

efrainh’s picture

efrainh
Primary language Spanish
commented

Yes, you can get the tid with: ['#options']['entity']->tid.

Yes, you can put it in your template.php file in a hook like this one:

/**
 * Implements template_preprocess_field
 *
 */
function my_theme_preprocess_field(&$variables) {
  $element = $variables["element"];
  $name    = $element["#field_name"];
  switch($name){
    case 'field_tags' : // this is a (multiple) taxonomy terms reference field that shows links to every term associated
      foreach ($variables['items'] as $delta => &$item) {
        // Add and attribute with the tid to each link to the taxonomy term
        $item['#options']['attributes']['data-tid'] = $item['#options']['entity']->tid;
        // Add a new class to every link in this field
        $item['#options']['attributes']['class'][] = 'link-with-tid' 
      }
      // This is a class for the whole field wrapper
      $variables['classes_array'][] = 'margin-bottom';
    break;
    ...
  }
}
mahmoud-zayed’s picture

mahmoud-zayed commented 
/**
 * Implements hook_preprocess_field().
 */
function HOOK_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  // Check field_name
  if ($element['#field_name'] == 'field_MACHINE_NAME') {
    foreach ($variables['items'] as $index => $item) {
      // Add to field content attributes.
      $variables['items'][$index]['content']['#options']['attributes']['class'][] = 'btn any-class-you-need-to-add';
    }
  }
}

Thanks,
Mahmoud Zayed

martin_klima’s picture

martin_klima
he/his
Primary language Czech
commented

In my case (Drupal v.8.4.5, Drupal commerce 2.4, custom field for product variation type) the row

$variables['items'][$index]['content']['#options']['attributes']['class'][] = 'my-class'

didn't work. I used:

$variables['attributes']['class'][] = 'my-class';

with success.

msupko’s picture

msupko commented

I found that this:

$variables['items'][$index]['content']['#options']['attributes']['class'][] = 'my-class'

works for tags printed as links...it applies the class directly to the <a> tag.  For other scenarios, such as plain text output, it may not work.  And this:

$variables['attributes']['class'][] = 'my-class';

Targets the wrapper around the entire field—not each individual item within the field, in case you want the classes on those to be different.

If you want to target the wrapper div around each item in a multi-value field, use:

$variables['items'][$index]['attributes']->addClass('my-new-class');

See Attribute::addClass for more.

TTNT’s picture

TTNT commented

Any idea how to get the term id as a class instead of a custom class?

lexsaenko’s picture

lexsaenko commented

For Drupal 8

function theme_preprocess_field(&$variables, $hook) {
  
  $element = $variables['element'];
  if (isset($element['#field_name'])) {
    if ($element['#field_name'] == 'field_tags') {
      
      foreach ($variables['items'] as $index => $item) {
      
        $variables['items'][$index]['content']['#options']['attributes']['class'][] = 'tid-item tid-' . $item['content']['#options']['entity']->id();
        // you can generate tid from ['#options']['entity']
      }
    }
  }
}
VVS’s picture

VVS commented 
Error: Call to a member function id() on null

How to get taxonomy id?

afagioli’s picture

afagioli
Location Rome
commented

Works great!

Thanks