Render the first image of an image field which allow to enter multiple images

Question

I have a template file for my blog page that renders a single image when the blog posts are listed. Originally, the field was for a single image, but it has been changed to accept more than one image and render only the first image. I would like to do within a template file instead of a view.

In that template file I used the following code, which doesn't work anymore since the image field has been changed.

<div class="image"><?php print render($content['field_blog_images']); ?></div>

Instead of that, I tried the following code, which doesn't work too.

<div class="image"><?php print render($content['field_blog_images'][0]); ?></div>

How should I render the first image of a field that accepts multiple images?

Answer 1

It's all about the structure of the image field. You're automatically going to the 0 index, but I bet if you were to do a dump of that variable, you'd find you were at the wrong position in the array. You'll need to loop through it or target the very specific element you're looking to render.

Check out this documentation comment for details and modify for your example. That comment shows the following code to loop through the images.

$node = node_load($nid);
$image = field_get_items('node', $node, 'field_NAME');
foreach ($image as $key => $value) {
  $output = field_view_value('node', $node, 'field_NAME', $image[$key], array(
    'type' => 'image',
    'settings' => array(
      'image_style' => 'thumbnail', //place your image style here
      'image_link' => 'content',
    ),
  ));
  print render($output);
}

That code is showing how to loop through the images in a different context, but the foreach() loop is the same that should be used in your code.

For that reason, it could be worth taking this up to template.php inside hook_preprocess_node() to avoid adding logic in a template file.

function mytheme_preprocess_node(&$variables) {
  if($variables['node']->type == 'blog' {
    // My crazy logic to assign my image variable.
    $variables['blog_image'] = render($somevalue);
  }
}

The template file then just needs a single code line.

print $blog_image;

Answer 2

If you insist on not to use Views for theming your blog teasers, you can use template preprocess_node function to create the hook suggestion and variables for the template file which you're going to use.

Example:

/**
 * Override or insert variables into the node template.
 */
function YOURTHEME_preprocess_node(&$variables) {

  $node = $variables['node'];

  // it allows to use templates for the type and view_mode e.g: node--blog--teaser.tpl.php
  $variables['theme_hook_suggestions'][] = 'node__' . $node->type . '__' . $variables['view_mode'];

  // blog teaser
  if ($node->type == 'blog' && $variables['view_mode'] == 'teaser') {
    $images = field_get_items('node', $node, 'field_blog_images');
    if ($images) {
      $blog_image = field_view_value('node', $node, 'field_blog_images', $images[0], 
        array(
          'type' => 'image',
          'settings' => array(
          'image_style' => 'thumbnail',
          'image_link' => 'content',
        ),
      ));
      $variables['blog_image'] = $blog_image; 
    }
  }
}

Now you can use node--blog--teaser.tpl.php file for theming your blog teasers and print the image:

<div class="image"><?php print render($blog_image); ?></div>