How to get value from {{ item.content }} [duplicate]

Question

I have a node named "reviews" and a custom field named "field_rating". I created a field template named field--node--field_rating--reviews.html.twig.

I want inside the node to change the color with an if statement.

I try to do something like that:

{% for item in items %}
  {% if item.content > 5 %}
    <div style="background-color:green">{{ item.content }}</div>
  {% endif %}
{% endfor %}

but it doesn't work.

Any suggestions?

Drupal Version 8.6.1

Answer 1

You are comparing an array with a number:

item.content > 5

Try the field value instead:

element['#items'][key].value > 5

Full code example:

{% for key, item in items %}
  {% if element['#items'][key].value  > 5 %}
    <div style="background-color:green">{{ item.content }}</div>
  {% endif %}
{% endfor %}

Answer 2

Although it is of course possible to implement this kind of logic in Twig (check Hudri's comment of your question), but I would opt for using a preprocess function. In addition, I also recommend to add an extra class attribute, instead of adding an inline style. From my experience, implementing the functionality in this way provides a lot more flexibility. In your (sub-)theme's .theme or custom module's .module file, you can add something like:

/**
 * Implements hook_preprocess_field() for field_rating.
 */
function THEMENAME_preprocess_field__field_rating(&$variables) {
  foreach ($variables['items'] as &$item) {
    if ($item['#key_of_the_value_you_want_to_check'] > 5) {
      $item['content']['#attributes']['class'][] = 'extra_class_attribute';
    }
  }
}

In your css (or Sass) you can then assign the styling:

.extra_class_attribute {
  background-color: green;
}

In the case you needed a wrapping element around your field, you can set the #prefix and #suffix properties of the render array (instead of the #attributes).

Answer 3

I notice that you said:

I have a node named "reviews"

I just wanted to make sure that you meant that you have a Content Type with the machine name "reviews", and not a node title or pathname.

Otherwise, the field template named field--node--field_rating--reviews.html.twig might not even be sourced.

You can test this by printing a debugging statement in your twig template using one of the methods discussed here:

https://www.drupal.org/docs/8/theming/twig/discovering-and-inspecting-variables-in-twig-templates

Make sure that you only use this for local testing, and disable it on production environment.

If the debugging statement prints, then your template is being sourced. You can use dump() or kint() to discover and inspect variables until you find the correct one.

If the debugging statement does not print, turn on theme suggestions as shown here:

https://www.drupal.org/node/2358785

You may find that your twig template really needs to have a different name, such as field--node--field_rating--review.html.twig, or even just field--field_rating.html.twig.

I mention this because I tried the exact code that you pasted above, and it worked for me in an identically-named twig template, so it's possible that something else is at play.