By mherchel on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
10.1.x
Introduced in version: 
10.1.0
Issue links: 
https://www.drupal.org/node/3301853
Description: 

The new |add_class and |set_attribute Twig filters allow for setting CSS classes or attributes on field render arrays. This mitigates the need for modifying field templates or preprocessing just to add a CSS class.

Examples

  • {{ content.field_tags|add_class('my-class') }} adds the my-class CSS class to the field template for field_tags.
  • {{ content.field_tags|set_attribute('aria-hidden', 'true') }} adds the aria-hidden="true" attribute and value to the field template for field_tags.
Impacts: 
Themers

Comments

lussoluca’s picture

lussoluca
he/him
Primary language Italian
Location Italy
commented

Maybe is not "|add_class and |add_suggestion" but "|add_class and |set_attribute" ?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Good catch. Fixed!

Premium component based Drupal themes

kevinhurley23’s picture

kevinhurley23 commented

Am I misunderstanding what this is supposed to do? I am trying to use this filter on a link field like this:
{{ content.field_card_link|add_class('btn') }}
And the resulting link element does not have any classes. This is on Drupal 10.2.0.

alanburke’s picture

alanburke commented

The wrapper will have the class, not the a tag itself.

Drupal development and themeing, Galway, Ireland