function theme_image

7 theme.inc theme_image($variables)
4.6 theme.inc theme_image($path, $alt = '', $title = '', $attr = '', $getsize = true)
4.7 theme.inc theme_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE)
5 theme.inc theme_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE)
6 theme.inc theme_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE)
8 theme.inc theme_image($variables)

Returns HTML for an image.

Parameters

$variables: An associative array containing:

  • path: Either the path of the image file (relative to base_path()) or a full URL.
  • width: The width of the image (if known).
  • height: The height of the image (if known).
  • alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft allows the alt attribute to be omitted in some cases. Therefore, this variable defaults to an empty string, but can be set to NULL for the attribute to be omitted. Usually, neither omission nor an empty string satisfies accessibility requirements, so it is strongly encouraged for code calling theme('image') to pass a meaningful value for this variable.

  • title: The title text is displayed when the image is hovered in some popular browsers.
  • attributes: Associative array of attributes to be placed in the img tag.

Related topics

Default theme implementations
Functions and templates for the user interface to be implemented by themes.
17 theme calls to theme_image()
ImageFieldDisplayTestCase::testImageFieldDefaultImage in modules/image/image.test
Test use of a default image with an image field.
ImageFieldDisplayTestCase::testImageFieldSettings in modules/image/image.test
Tests for image field settings.
ImageFieldDisplayTestCase::_testImageFieldFormatters in modules/image/image.test
Test image formatters on node display.
seven_tablesort_indicator in themes/seven/template.php
Override of theme_tablesort_indicator().
simpletest_result_status_image in modules/simpletest/simpletest.pages.inc
Get the appropriate image for the status.

... See full list

File

includes/theme.inc, line 1772
The theme system, which controls the output of Drupal.

Code

function theme_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}

Comments

Posted by sylv3st3r on

See http://api.drupal.org/api/drupal/modules--image--image.module/function/t... for theming image with style

Posted by derjochenmeyer on
<?php

  $variables

= array(
      'path' => 'path/to/img.jpg',
      'alt' => 'Test alt',
      'title' => 'Test title',
      'width' => '50%',
      'height' => '50%',
      'attributes' => array('class' => 'some-img', 'id' => 'my-img'),
      );
  $img = theme('image', $variables);
?>

Posted by Bagz on

This example seems to be misaligned with the topic. The topic is about the theme_image($variables) function, but the example does not show this.
The example shows the theme() function which is a different function.
Staying on topic, the example should show as the last line $img = theme_image($variables);

Posted by johnvsc on

This always trips up n00bies.

Posted by dazweeja on

The example is correct as it allows this theme function to be overridden in a template or module. Calling theme_image directly does not and so is not recommended.

Posted by daggar on

There are several good reasons to use theme() instead of theme_image(), but that's a different discussion. Here's a correct example of theme_image for drupal 7:

<?php

$arbitrary_array

= array(
  'path' => '/sites/all/arbitrary_theme/images/image.jpg',
  'alt' => 'Alternate Text',
  'title' => 'Image Title',
  'width' => '100px',
  'height' => '50px',
  'attributes' => array('class' => 'some-img', 'id' => 'my-img'),
);
print theme_image($arbitrary_array);
?>

Note that I used the 'print' command. theme_image, on its own, only produces code without outputting it.

Posted by blainelang on

D7: There's lots of cross linking to other issues but I still don't really understand why all the options now have to be specified when you call theme_image() and I can't just pass in array('path' => $mypath')

Why does theme_image not default the parameters like most other theme functions?

Posted by blainelang on

So re-reading the notes on issue: http://drupal.org/node/1004556 and I see that it's recommended that we use theme('image', array('path' => $mypath)); instead of theme_image();

Can do as in my case, allows me to not pass in the other parameters and now I don't get the PHP notice messages.

Posted by daggar on

Drupal 7's API is more of a PI-- that is, not very advanced. For any image in the system, all the relevant information is stored in existing structures, but the API does not access any of it, and requires the coder to supply the most basic information. D7 seems to be falling victim to abstraction fetishism at the cost of everyday usability.

Posted by avukonke on

I share the same sentiment, the way that images are used and manipulated in the Drupal way is so counter-productive. Spent an hour trying to insert a simple image, just because there is no specificity with regards to image manipulation. PHP and Drupal. Python is the future. I would have this done in 5min and 5 lines

Posted by scotself on

in case any themers end up here as I did, in D7, it's as simple as <?php print render($content['field_mypic']); ?> to stick a fully rendered version of your image field in your tpl files.

Posted by jamesbenison on

Without using hook theme registry alter.

I have seen plastered all over the internet people asking this same question.

I have read many chapters in many books that do not answer this question. Some of these books devote several chapters to theming.

Brownie button to the first person that can answer this.

Bonus points if anyone can explain why array('width', 'height', 'alt', 'title') got hard coded into this function.

Posted by chrisNtampa on

The default parameters seem sufficient for an <img /> tag. You can pass additional markup in the attributes array. A class for example...

<?php
array(
  'attributes' => array('class' => array('myImageClass')
)
?>

Note, I believe the class name needs to be in an array even if it contains only one value.

So in my node template file I might do something like this...

<?php
print theme_image(array('path' => $node->field_imagefield['und'][0]['uri'], 'attributes' => array('class' => array('myclass'))));
?>

That will output something like this...
<img src="http://example.com/sites/default/files/myfieldimage.jpg" class="myclass">

Posted by meustrus on

The documentation for the 'path' variable seems inconsistent with actual usage. Should 'path' be a URI and not "Either the path of the image file (relative to base_path()) or a full URL"? For that matter, if it's going to be used that way, shouldn't it be called 'uri' instead of 'path'?

Posted by avukonke on

For anyone that has experienced a similar problem and has need to hard code the image (via the tag) then these are a couple of lines that could come in handy:

Firstly ensure that in your view you specify;

Formatter (Image URL)
Image Style (None)
Link Image URL (Nothing)

Under Style Settings select "Customize field HTML" and then under
HTML ELEMENT(nothing), this is done because for some unknown reason Drupal inserts opening and closing tags to the image.

The Syntax is as follows :

<?php
    $image_url = $fields['field_speaker_image']->content;
    $speaker_image_url = "'$image_url'";
           
    $image_alt = $fields['field_speaker_name']->content;
    $speaker_image_alt = "'$image_alt'";
           
    $image_title = $fields['field_speaker_title']->content;
    $speaker_image_title = "'$image_title'";
           
?>

The image_url is the image path retrieved from the view. The image alt and image_title are optional extras, that you can add in as you please.

Then finally here is the image tag that you can manipulate as you wish:

<img src= <?php print $speaker_image_url; ?>  alt= <?php print $speaker_image_alt; ?> title= <?php print $speaker_image_title; ?> width="50" height="70" style="some_style"/>

Enjoy !!!

Posted by zterry95 on

ah..
another tips for using this api.
For example, if you want to add border to image, coding like below.

<?php
$image = theme('image_style',array(
    'style_name' => 'mail_image_big',
    'path' => $image_obj['uri'],
    'attributes' => array('style' => 'border:1px solid #aaa;')
  )
);
?>