How do I conditionally style an image field based on terms

Question

I have a Drupal website with a content type (Article) which has a taxonomy term reference field (Topic) for the Topics vocabulary.

The Article path aliases, based on the taxonomy term are, for example, the following one.

• /books/100-days-around-the-world
• /culture/chinese-and-medicine

The content type has also an image field (Image). I want to style the main image for the articles classified under books differently; I want the image to have greater height than width.

The only way I could think to achieve that is creating a new view for it. I tried to create it, but it only rendered the first article of books. The following screenshot shows the view settings.

The real problem is that I don't know a view that renders the article content page. When I contacted the theme author], for previous modification requests, I was told to use the node--article.tpl.php template file. So I have only two ways:

1. Create a view that renders articles as I described earlier
2. Write code in the node--article.tpl.php template file that conditionally set a style for the image field when the article topic term is books

I don't know how to get what I need using the two approaches.

Answer 1

Method 1. Use a node preprocessor

Add this to your theme's template.php, then clear the cache:

function THEMENAME_preprocess_node(&$variables) {
  
  // This only applies to content type 'article' in teaser view.
  if ($variables['node']->type == 'article' && $variables['view_mode'] == 'teaser') {
     
     // Find out if node has at least one tag and an image.
     if (isset($variables['content']['field_tags']) && isset($variables['content']['field_image'])) {
      
      // Map tags to style names.
      $settings = array(
        'apple' => 'medium', 
        'banana' => 'large',
      );
      
      // Build an array of tag names.
      $tags = array();
      foreach ($variables['content']['field_tags'] as $k => $v) {
        if (is_int($k)) {
          $tags[] = $v['#title'];
        }
      }
      
      // For each mapping, check if the tag exists in the $tags array; 
      // if yes, apply the style.
      foreach ($settings as $tag => $style_name) {
        if (in_array($tag, $tags)) {
          $variables['content']['field_image'][0]['#image_style'] = $style_name;
        }
      }
    }
  }
}

Note that we could also do something similar in node--article.tpl.php, but generally you want to keep code logic out of the template files.

---

Method 2. Use Rules and Field formatter conditions modules (no coding required!)

The example below will set the image style of field_image to 'thumbnail' in the node's teaser view if field_tags contains a term with an ID of 18.

The Field formatter conditions module an image style to be conditionally set based on the outcome of a rule. It involves creating a rule, then going to Structure > Content types > [content type] > Manage display and adding the condition in the configuration options of your display (in this case the "Teaser" display).

Note: This example only checks for a single term. To compare against more terms, add more "List contains item" conditions, one for each term.

Here is the rule:

Here are the formatter settings:

Answer 2

Simplest way is to add/edit the node--article.tpl.php (don't forget to flush caches after you have). Once you have done this you can vary the output based on the values in the $node object.

Node template API reference