theme_image_style

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

Default theme implementations
Functions and templates for the user interface to be implemented by themes.

1 call to theme_image_style()

3 theme calls to theme_image_style()

File

modules/image/image.module, line 1253
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

Posted by redndahead on January 3, 2011 at 12:59am

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

Path

Posted by Countzero on January 11, 2011 at 10:11am

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,

Posted by gausarts on February 17, 2011 at 8:00am

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')));

Width and Height

Posted by kidconcept on March 15, 2011 at 8:39pm

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?

You could override theme_image_style()

Posted by Wolfgang Reszel on May 27, 2011 at 12:24pm

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);
}
?>

using with filters

Posted by dynamicdan on October 23, 2011 at 12:57pm

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.

Using image styles outside of the Drupal files directory

Posted by seddonym on August 25, 2011 at 3:02pm

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

Posted by gagarine on September 14, 2011 at 2:08pm

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.

this should be in core

Posted by SKAUGHT on November 11, 2011 at 5:12pm

Maybe submit a patch.

how would you attach a unique

Posted by rucx on September 11, 2011 at 5:32pm

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

that's something I would like

Posted by comfused on February 29, 2012 at 9:17am

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 :)

i can do it

Posted by pavennt on February 17, 2012 at 11:24am

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

Notice: Undefined index: width in theme_image_style()

Posted by hermes_costell on March 13, 2012 at 4:53am

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 to apply it?

Posted by chicodasilva on March 19, 2012 at 1:43am

Where do you apply that change?

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

Login or register to post comments