I'm working on Drupal 7 with a custom content type from node--content_type.tpl.php. I try to output an image from an image field with a custom code. It's sad that I only know how to output the original image from field/image directory. This is the code I used:

<?php global $base_url; echo "<img src='".$base_url."/sites/default/files/field/image/".$node->field_image['und'][0]['filename']."'>"; ?>

What I want to do here is output the thumbnail image of that original image. For example the thumbnail image from this directory: sites/default/files/styles/medium/public/field/image

Could it be possible? Sorry for my lack of PHP and Drupal knowledge, I'm new to them.

Any help would be appriciated!



koneru’s picture

In Drupal 7,i am not sure of the process but,a way to do it in drupal 6 may help you.(It will be almost similar,not sure though.).
Image cache module will help you to create presets of different sizes and these presets can be used to display images in many ways.
Install the module and create a preset to display your required size of thumbnail.Then go to content types adminstration page ( Administer › Content management › Your_content_type ) .There you will find a link called Display Fields (admin/content/node-type/Your_content_type/display ).There you will find a drop down menu (next to the image field) in which you will find the previously created preset.Select the preset and save the settings.Now try creating new content and see if it works.

beeleg’s picture

Thanks koneru, the CCK is now in the core of Drupal 7 and this way works too! We can choose which field to display in the body, teaser, rss or search results...but it is really hard to customize the way those contents display. When I edit a content type teaser and attach an image field, I can only choose the thumbnail to display in the teaser and that is all. It should have an extra format field so we can control the output of that field.
No way using the UI to do that work so I try to use PHP template. Because Drupal can render the image field as a thumbnail so I think that there should be a way in the core, I found these lines:

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  $output .= '</div>';

The trick is inside drupal_render($item). I'm trying a new approach to field--body--content_type.tpl.php but still get stuck in that file.

Any idea?

bloke_zero’s picture

there is a theme('image_style') which is roughly analogous to theme('imagecache')

Looks something like:

$hero_image = array(
  'style_name' => 'case_study_teaser',
  'path' => $image['uri'],
  'width' => '',
  'height' => '',
  'alt' => $image['alt'],
  'title' => $image['title'],
print theme('image_style',$hero_image);

might be an easier approach.

ClaudeS’s picture

Koneru had it right - I struggled with this, and reading this post reminded me of something I'd seen.

Home » Administration » Structure » Content types » Product » Manage display
You can set how fields are displayed for the Default view (or Teaser view).
These are obeyed in theme templates (like node--content_type.tpl.php) when you simply do this:

print render($content['field_custom_image']);

So in Manage Display, if you choose Thumbnail, the template will render the thumbnail version of the image. I also get a dropdown with all image sizes I've defined (I've added a custom image style, as well as the default original/thumbnail/medium/large).

I'm still struggling with D7's lack of obvious documentation, as there's no obvious link between writing a theme template, and using the admin screens to configure how the theme renders.

Here's my comment about it with regards to another problem I had when trying to render a text field:

Vali Hutchison’s picture

This is a very handy little function in Drupal 7.

$img_url = 'public://myimagefolder/imgfilename.jpg';  // the orig image uri
$style = 'thumbnail';  // or any other custom image style you've created via /admin/config/media/image-styles
<img src="<?php print image_style_url($style, $img_url) ?>>

The image_style_url() function takes the URI and converts into the relevant URL for the image style provided. Note, you need to use public:// rather than the base url of your site for this function to work.

The great thing is that if the image hasn't yet been created then Drupal does it automatically!

dtsio’s picture

Great, thanks. Just a note that you have forgotten a closing " at the img tag above

martnm’s picture


If I use $style = 'thumbnail' the image_style_url($style, $img_url) function fails. I found out that the subfunction file_stream_wrapper_valid_scheme('thumbnail') returns false.

But 'thumbnail' is in the list of admin/config/media/image-styles.

What is going wrong?


tinny’s picture

The above code is missing a quote. here it is fixed:

$img_url = 'public://myimagefolder/imgfilename.jpg';  // the orig image uri
$style = 'thumbnail';  // or any other custom image style you've created via /admin/config/media/image-styles
<img src="<?php print image_style_url($style, $img_url) ?>">
defconjuan’s picture

This works and is very helpful. The only thing to note is if you're using the private filer system, I believe the code would look like:

$img_url = 'private://myimagefolder/imgfilename.jpg';  // the orig image uri
$style = 'thumbnail';  // or any other custom image style you've created via /admin/config/media/image-styles
<img src="<?php print image_style_url($style, $img_url) ?>">
lanzs’s picture

doesnt work for me =(
tried to do this way: print theme('image_style', array( 'path' => $field_work_image['ru'][0]['uri'], 'style_name' => 'thumbnail')); doesn`t work to.
Both variants returns only ~sites/default/files/styles/thumbnail/public but not the correct path. They even doesnt create a thumbnail.
Don`t know what the problem and how to show thumbnails in node.tpl.php, maybe someone knows how to solve it?

lihygaasd’s picture

Thanks .@roberthernandez

Works like a charm

amrit_b’s picture

Wow Thanks for the snippet. I tried to do the same in drupal 6 way and suddenly couldn't find the "filename" value of the image!

image_style_url() function is really helpful.

BTW, "The great thing is that if the image hasn't yet been created then Drupal does it automatically!" This feature was there in drupal 6 too. If the thumb image was not present, it used to get generated as soon as we call the image.

teddie’s picture

I altered it a little to get the path from a cck image field (imageone) in a node. '$style' didn't seem to like a value of 'none' for the original image but I just created a new style named 'default' and didn't add any effects to the style, it worked.

$imageone = $node->field_imageone['und'][0]['uri']; 
$style = 'default';

<img src="<?php print image_style_url($style, $imageone) ?>">
paulhudson’s picture

You might like to try this:

// Render a user image with the default image style
render(field_view_field('user', $user, 'field_avatar'));
// and a nodes image
render(field_view_field('node', $node, 'field_image'));
// Render with a custom image style, in this case named 'post_avatar'
render(field_view_field('user', $user, 'field_avatar', array('settings' => array('image_style' => 'post_avatar'))));

You'll notice that the $node object in your example has ['und'] which is the language element of the field... change the language and your code probably won't work. It's much cleaner to render fields as above. :-)

emixiak’s picture

I have field_gallery field which, obviously, holds gallery images for the node.
How to render the view for the first item in that field (eg. field_gallery[0]) ?

paulhudson’s picture

You could try this:

$field_gallery = field_get_items('node', $node, 'field_gallery');

if (!empty($field_gallery)) {

  $image_item = array(
    'style_name' => 'thumbnail', // just enter the sytle name you'd like
    'path' => $field_gallery[0]['uri'],
    'width' => '',
    'height' => '',
    'alt' => $field_gallery[0]['alt'], // optional
    'title' => $field_gallery[0]['title'], // optional

  $output =  theme('image_style', $image_item);

  print $output;

You can cycle through the above to render all your gallery images:

// Cycle through image fields rendering them all
$gallery_fields = field_get_items('node', $node, 'field_gallery');

if (!empty($gallery_fields)) {

  $output = '<h2>So hot!</h2>';

  foreach($gallery_fields as $gallery_item) {

    $image_item = array(
      'style_name' => 'thumbnail', // just enter the sytle name you'd like
      'path' => $gallery_item['uri'],
      'width' => '',
      'height' => '',
      'alt' => $gallery_item['alt'], // optional
      'title' => $gallery_item['title'], // optional

    $output .=  theme('image_style', $image_item);
  print $output;
applieddrupal’s picture

I need a solution for rendering fields in search results. This did the trick and well. Thanks!

coderintherye’s picture

You use field_view_value instead
for instance:

render(field_view_value('node', $variables['result']['node'], 'field_fellows_images', 0, array('settings' => array('image_style' => 'thumbnail', 'label' => ''))))
agileadam’s picture

I don't think you can just throw a zero into the 3rd argument.

See first comment here: http://api.drupal.org/api/drupal/modules!field!field.module/function/field_view_value/7

This should work, however (note that my node is the $entity object)

    $image = field_get_items('node', $entity, 'field_fellows_images');
    $image_output = render(field_view_value('node', $entity, 'field_fellows_images', $image[0], array('settings' => array('image_style' => 'thumbnail', 'label' => ''))));
benchesters’s picture

I still don't get this! I have 3 image presets: thumbnail, small & medium and I want to print them using php. In Drupal 6 I used:

<img src="<?php print 'sites/default/files/imagecache/<strong>thumbnail</strong>/' . $node->field_image_cache['0']['filepath']; ?>" />

Can anyone possibly tell me what the equivalent of this is for Drupal 7? Apologies, my php skills are not the best.

lmeurs’s picture

The previous example shows it all. To print out a complete HTML image tag including all the image's properties (width, height, title, etc.), use:

  // Load all images' properties in an array.
  $field_image_cache_items = field_get_items('node', $node, 'field_image_cache');
  // Generate a renderable image array.
  $image_renderable = field_view_value('node', $node, 'field_image_cache', $field_image_cache_items[0], array('settings' => array('image_style' => 'thumbnail')));
  // Output complete image.
  echo render($image_renderable);

If you insist on doing it your way you can use:

  echo '<img src="' . image_style_url('thumb', $node->field_image_cache[LANGUAGE_NONE][0]['uri']) . '">';

But this only works if the field's language is undefined. You could retrieve the field's language first like this:

  $field_language = field_language('node', $node, 'field_image_cache');
  echo '<img src="' . image_style_url('thumb', $node->field_image_cache[$field_language][0]['uri']) . '">';

But this is all too much trouble since Drupal can generate a complete image tag using the first piece of code. Good luck!

Laurens Meurs

zack.wd’s picture

If you are using Media module and format is rendered file then you should change the settings array as below where custom_view_mode is your own view mode.

$field_image_all = field_get_items('node',$node,'field_media');

$img_rendered = field_view_value('node',$node,'field_media',$field_image_all[0],
array('type' => 'file_rendered','settings'=>array('file_view_mode' => 'custom_view_mode')));


kechollazo’s picture

Thanks. This works for me.

franz.skaaning’s picture

if (isset($content['field_image'])):

$field_image_all = field_get_items('node',$node,'field_image');

$img_rendered = field_view_value('node',$node,'field_mage',$field_image_all[0], 
      array('type' => '$img_rendered','settings'=>array('image_style' => 'MYIMAGESTYLE')));

print render($img_rendered);
infoasistencia’s picture

... Still no way using the UI to do that work... so I try to use a clean PHP template and dont work jet.

augustofagioli’s picture

ek.senthil’s picture

You can then do the following:
print theme('image_style', array('style_name' => 'large', 'path' => $node->field_blog_image[LANGUAGE_NONE][0]['uri']));