How do I output a drupal image field?

StackOverflow https://stackoverflow.com/questions/11141831

Question

It is quite possible that I'm just looking for help finding the name of a function that already exists within drupal (7) but sometimes the documentation is a bit difficult to navigate. Hopefully someone can help me.

I have a node that has a custom field.

I am working within a template field--mycustomcontenttype.tpl.php and so am trying to find the name of the PHP function that outputs and image field with image styles.

mycustomcontenttype is a NODE with the following additional field:

[field_image] => Array
(
    [und] => Array
    (
        [0] => Array
        (
            [fid] => 51
            [alt] => ImageAltText
            [title] => 
            [width] => 150
            [height] => 150
            [uid] => 29
            [filename] => myimagename.jpg
            [uri] => public://myimagename.jpg
            [filemime] => image/jpeg
            [filesize] => 8812
            [status] => 1
            [timestamp] => 1339445372
            [uuid] => a088ea8f-ddf9-47d1-b013-19c8f8cada07
            [metatags] => Array
        (
    )
)

So I could display the image using an (ugly) hand rolled functions that takes the value found in $item['#options']['entity']->field_image and does the substitution of public:// for the actual server path, and then it's also possible that I'm going to want to load the image with the correct drupal image style (thumbnail, custom-style, etc...)

Sadly, I just have no idea what the name of the function that works something like: unknown_function_name_drupal_image_print($item['#options']['entity']->field_image, 'thumnail'); is.

Is there anyone who can help me find this?

Was it helpful?

Solution

You are looking for image_style_url(style_name, image_url);

For example:

<?='<img src="'.image_style_url('fullwidth', $node->field_page_image['und'][0]['filename']).'" />'?>

EDIT

As pointed out you can also set the image style in the Manage Display page for the content type and then output using render.

<?php print render($content['field_image']); ?>

OTHER TIPS

I would do this using a combination of field_get_items and field_view_value.

For example:

    <?php

    // In some preprocessor...
    $images = field_get_items('node', $node, 'field_image');
    if(!empty($images)) {
      $image = field_view_value('node', $node, 'field_image', $images[0], array(
        'type' => 'image',
        'settings' => array(
          'image_style' => 'custom_image_style' // could be 'thumbnail'
        )
      )
     );
    }
    $variables['image'] = $image;

    // Now, in your .tpl.php
    <?php print render($image); ?>

I have a write up about field access and this very thing here.

Good luck.

SpaceBeers' answer is correct - you can print the image in that way. But in Drupal side, it's bad. You have language undefined, and directly using only the first field if it's a multi-value field. Also, you are hardcoding some of the Drupal's nice stuff such as changing image style using the UI. 

<?php print render($content['field_image']); ?>

This will print the image with proper dimensions (in img tag), alt tags, and always respects what you have set in Manage Display tab of the mycustomcontenttype node type.

I use this:

print theme('image_style', array('path' => [image uri from field], 'style_name' => [image style]));

You can also include an "attributes" array variable that contains elements for (eg) class, alt & title. I think this is a better option for allowing your choice of image style, while still using Drupal's (or your theme's) default image rendering.

You should use

<?='<img src="'.image_style_url('fullwidth', $node->field_page_image['und'][0]['uri']).'" />'?>

instead of

<?='<img src="'.image_style_url('fullwidth', $node->field_page_image['und'][0]['filename']).'" />'?>

I think Ayesh K's answer is the preferred Drupal way of printing a field to the page. Much easier to read, and keeps any operations / presets you do to your Image in the UI.

You can break it up, but it seems like that would be for narrow use cases.

<?php
global $base_url;
$nid=6;//node id
$node=node_load($nid);
echo '<div style="margin-right:350px;">';
echo "<marquee>";
foreach($node->field_image_gallery['und'] as $v){
$image=$v['uri'];
$image_path=explode("public://",$image);
$url_path=$base_url.'/sites/default/files/'.$image_path[1];
echo '<img src="'.$url_path.'" width="100" height="100">&nbsp;';
 }

echo "</marquee>";
echo "</div>";
?>

this can be done like that :

   $style='full_width';
   $path=$node->my_img_field['und']['0']['uri'];
   $style_url = image_style_url($style, $path);
   print "<img src=".file_create_url($style_url)." >";

 $field_image = field_view_field('node', $promoNode, 'field_image');
 $variables['promo_image'] = render($field_image);

Renders: 

<div class="field field--name-field-image field--type-image field--label-above">
  <div class="field__label">Image:&nbsp;</div>
  <div class="field__items">
      <div class="field__item even">
        <img typeof="foaf:Image" 
             src="http://domain/sites/domain/files/promo1.png"
             width="360" 
             height="301"
             alt="Promotional Image"
             title="Promotional Image Title">
      </div>
  </div>
</div>

Note: The label-above class could be removed with the content-type Manage-Display settings of the fields, by setting the Label to , but that isn't working for me right now so I'm simply using CSS to hide the .field__label class.

This worked for me for adding an image to my search results page:

<?php if ($result['node']-> field_image): ?>
  <?php
  $search_image_uri = $result['node']-> field_image['und'][0]['uri'];
  // assuming that the uri starts with "public://"
  $search_image_locate = explode('//', $search_image_uri);
  $search_image_filepath = '/sites/actual/path/to/public/' . $search_image_locate[1];
  ?>
  <div class="search-image">
    <img src="<?php print $search_image_filepath; ?>" />
  </div>
<?php endif; ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top