function theme_image_style

You are here

7 image.module theme_image_style($variables)
8 image.module theme_image_style($variables)

Returns HTML for an image using a specific image style.

Parameters

$variables: An associative array containing:

  • style_name: The name of the style to be used to alter the original image.
  • path: The path of the image file relative to the Drupal files directory. This function does not work with images outside the files directory nor with remotely hosted images. This should be in a format such as 'images/image.jpg', or using a stream wrapper such as 'public://images/image.jpg'.
  • width: The width of the source image (if known).
  • height: The height of the source image (if known).
  • alt: The alternative text for text-based browsers.
  • 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

1 call to theme_image_style()
ImageDimensionsTestCase::testImageDimensions in modules/image/image.test
Test styled image dimensions cumulatively.
3 theme calls to theme_image_style()
image_field_widget_process in modules/image/image.field.inc
An element #process callback for the image_image field type.
template_preprocess_user_picture in modules/user/user.module
Process variables for user-picture.tpl.php.
theme_image_formatter in modules/image/image.field.inc
Returns HTML for an image field formatter.

File

modules/image/image.module, line 1346
Exposes global functionality for creating image styles.

Code

function theme_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  // Determine the URL for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
  return theme('image', $variables);
}

Comments

getsize does not work in drupal 7.0. You can find the issue here: http://drupal.org/node/1012416

For this function to work, you have to specify the path in the form :

public://name_of_the_image

Not so obvious when you come from D6. I guess it's the case in many other places.

I don't see dimensions set, so I have to manually harcode sizes:

theme('image_style', array('style_name' => 'desthumb', 'path' => $image0path, 'getsize' => TRUE, 'attributes' => array('class' => 'thumb', 'width' => '150', 'height' => '162')));

Three lines to get your width and height, no hardcoding necessary.

<?php 
  $image_uri
= $node->field_image['und'][0]['uri'];
 
$image_for_sizing = image_style_path('blog_top', $image_uri);
 
$image_dimentions = getimagesize($image_for_sizing);
?>

You width can be found in $image_dimentions[0] and your height is at $image_dimentions[1]

So it looks like the argument for getting width and height outputted from theme_image() is still unresolved. http://drupal.org/node/908282

Can anyone tell me how I can make this work for a specific situation on my site? I've got an image slider that doesn't work properly because the slider doesn't know the height of the image before it loads.

http://kidconcept.com:81/node/31

I'm not sure how to solve the problem. I realize that Drupal Core may not include a patch like: http://drupal.org/node/1012416 so I don't want to apply this patch should it get overridden in an update. I don't know enough about theme_image() to potentially solve the problem in my theme, or work around it. Anybody have any help?

Add this to your template.php and replace THEME_ with your theme name:

<?php

function THEME_image_style($variables) {
 
$style_name = $variables['style_name'];
 
$path = $variables['path'];

 

// theme_image() can only honor the $getsize parameter with local file paths.
  // The derivative image is not created until it has been requested so the file
  // may not yet exist, in this case we just fallback to the URL.
 
$style_path = image_style_path($style_name, $path);
  if (!
file_exists($style_path)) {
   
$style_path = image_style_url($style_name, $path);
  }
 
$variables['path'] = $style_path;

  if (

is_file($style_path)) {
    if (list(
$width, $height, $type, $attributes) = @getimagesize($style_path)) {
     
$variables['width'] = $width;
     
$variables['height'] = $height;
    }
  }
 
  return
theme('image', $variables);
}
?>

This function helped me out with a custom image filter I've made that adds nice styling to images...

NOTE that I could not add this function to the template file because it wasn't loaded in time for my filter to process it. I had to therefore include the function in my filter module instead.

I could then extract the width and use it to set a containing element like so:

<?php
if($totalImages == 1) {
  
//we will be using the width property to set the block width
  
$image = _custom_filters_filter_images_image_style($imageProps);
} else {
  
$image = theme('image_style', $imageProps);
}

//extract width from the image
$widths = array();
$width = preg_match('!width="([\d]*)"!', $image, $widths);
//dpm($widths);

if(count($widths) > 1) {
  
$widthVal = $widths[1];
  
// add padding and borders from css styling
  
$widthVal += 5 + 5 + 2 + 2;
  
  
$width = 'width:'.$widthVal.'px;';
} else {
  
$width = '';
}

$imageDivs .= "<div class='singleImage' style='$width'>";
// ...
?>

I hope to contribute the whole filter somewhere as the end effect is also a nice 'lightbox' style feature for viewing images.

I've written a little tutorial on how to use image styles for images not stored in the Drupal files directory (e.g. files that come with your module or theme.)

Hope it's useful.

The problem with this approach is you create the derivative in a sychrone way. Good chance you run out of memory on a page with a lot of image.

Maybe submit a patch.

how would you attach a unique css class to every image_style like image cache did before?

that's something I would like to know too
a global overwrite that I can place in my template.php for all my future sites would be great :)

Working the example by me :

<?php

// function callback
                
$image = array(
                   
'style_name' => 'in_the_news', // style name
                   
'path' => $images_logo[0]['uri'], //  uri (String, 27 characters ) public://thb_cd_thumb_3.jpg

                   

'alt' => $node->title,
                   
'title' => $node->title,
                    );
                              
$node->images = $image

// templates
print theme('image_style', $node->images);
?>

Good to hook theme

If you're getting

Notice: Undefined index: width in theme_image_style()
Notice: Undefined index: height in theme_image_style()

I've found that passing NULL for width and height takes care of it.

$config = array(
  "style_name" => "my_image_style_name",
  "path" =>$my_node->field_name[$my_node->language][0]['uri'],
  "height" => NULL,
  "width" => NULL,
);
$goatse_picture= theme_image_style($config);

Where do you apply that change?

I am having the same problem, but I didn't understand where you apply that change.

Nice variable naming convention... can't believe no one caught it already

I have been struggling to theme a form for a while now and decided to nreak it down to even smaller pieces, until I get a better grasp on theming.

Ultimately I want to have a checkbox with a thumbnail pic and some text. I coded this in PHP on a non drupal site in a matter of minutes. However within the drupal framwork I have been fighting this for over a week. Tried different tuorials and suggestions so far I can only get bits of it working at a time. The closest I've gotten is eveything I want but with a full size pic and and unformatted text.

So for my first step getting the pic the size I want. Any hardcoded formatting gets strip so I figure I try theme_image_style since it sounds promissing. However, I can't figure out what to use for the image URL

If I use the following (where id is the image id)
$file = file_load( $id );
$iurl = file_create_url($file->uri);
I get the correct path to the image, but theme_image_style errors with an invalid object error

If I use (as suggested in another comment)
$iurl = 'public://my_pic.jpg';

The same call to theme_image_style works (I get a the correct img styling) but of course this is the incorrect path to the image

Using this theme call

theme('image_style', array('style_name' => 'desthumb', 'path' => $iurl, 'getsize' => TRUE, 'attributes' => array('class' => 'thumb', 'width' => '32', 'height' => '32')));

the img tag contains
http://m.mytestsite.com/drupal/sites/default/files/styles/desthumb/publi...

the pic is actually

http://m.mytestsite.com/drupal/sites/default/files/pictures/my_module_pi...

From the above I suspect I cannot use theme_style_name unless I place and preformat my pics under the files/styles/"some_stye"/public directory.

Is there anyway around this

IMG tag with dimensions

<?php
$variables
= array(
       
'style_name' => 'my_custom_style',
       
'path' => $node->field_image[LANGUAGE_NONE][0]['uri'],
       
'width' => $node->field_image[LANGUAGE_NONE][0]['width'],
       
'height' => $node->field_image[LANGUAGE_NONE][0]['height'],
        ...
);
print
theme( 'image_style', $variables );
?>

and the result:

<img typeof="foaf:Image" src="http://domain/path/image.jpg" width="200" height="267" alt="..." title="..." />

Only dimensions

If you want only dimensions then this function will be your friend:
image_style_transform_dimensions()

Example:

<?php
$dimensions
= array(
       
'width' => 150,
       
'height' => 200,
);
image_style_transform_dimensions( 'my_custom_style', $dimensions );
print_r( $dimension );
?>

And you will get your dimensions:

Array
(
    [width] => 200
    [height] => 267
)

Found this little snippet on Drupal Stack Exchange that turns the style name into the class: http://drupal.stackexchange.com/a/40483

Copy and paste the code from theme_image_style to your theme's template.php.
replace theme in theme_image_style with your theme's name.

function MYTHEME_image_style($variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);

image_style_transform_dimensions($variables['style_name'], $dimensions);

$variables['width'] = $dimensions['width'];
$variables['height'] = $dimensions['height'];

$variables['attributes'] = array(
'class' => $variables['style_name'],
);

// Determine the url for the styled image.
$variables['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}

I'm trying to display a random image for each term that doesn't have it's own but I'm getting "access denied" images if I don't set $conf['image_allow_insecure_derivatives'] = TRUE; which I don't want to set... Does anyone know of a simple alternative?