(Views) How to style an image field conditionally based on term

Question

I have a Drupal website in which there is a content type named Article. In that content type, there is a taxonomy field called "Topic" which is term reference field pointing to a vocabulary called Topics.

Example article URLs:

mysite.com/topic-term/the-article-title
i.e
mysite.com/books/100-days-around-the-world
or
mysite.com/culture/chinese-and-medicine

Every article has a main image field called "image". The problem starts from here.

I want to style the main image for the articles classified under the term "books" differently; i.e., I want the image to have greater height than width.

The only way that I could think to do that is to make a new view for it. I tried to make such a view, but it only rendered the first article of books. The following screen shot shows the View settings:

The real problem, indeed, I don't know a view that render the articles content page! When I contacted the theme author, for previous modification request, they told me to do it by coding in node--article.tpl.php! So I have only two ways:

1. Creating a view that could be able to render articles by the access way described above mysite.con/topic-term....
2. Using code in node--article.tpl.php that set conditionally a style for the field image if the article topic term equals to 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