Technical article

(EDIT: 28 oct. 2011, changed the Drupal 7 version to reflect changes in the 7.9 implementation -- updated solution should work for all versions of D7, see also this issue)

Image styles in Drupal 7 are the equivalent of Imagecache presets in Drupal 6: definitions of a namespace with one or more effects for images. For example, a "thumbnail" image might be 150 pixel-wide version of your image. These image styles are then used in views, displayed nodes, etc.

The problem is: what a "thumbnail" is for one theme might differ from what it is for another theme.

Say you are using thumbnails for image galleries. Drupal 7's default thumbnail might be good for most themes, but you are developing a theme, mytheme, which requires your images to be desaturates (have an old-school black and white look). Your site might be quite complex and use other themes on other parts of the site, and you want thumbnail to be overridden only for mytheme.

The point is: Image styles are intuitively related to the themes, not site-wide presets.

Here is my solution:

By default, a theme will use the image style definition as it normally would. For example: thumbnail.
If your theme (let's call it mytheme) is overriding thumbnail, create a new preset called thumbnail_mytheme, with your desired effects.

Now, add this code to your theme's template.php file:

<?php <br /?>
/**
* Override theme_image_style().
* Use the required image style as usual, except if a special
* imagestylename_themename style exists, in which case that style
* overrides the default.
*/
function PUT_YOUR_THEME_NAME_HERE_image_style($variables) {
global $theme;
if (array_key_exists($variables['style_name'] . '_' . $theme, image_styles())) {
$variables['style_name'] = $variables['style_name'] . '_' . $theme;
}

// Starting with Drupal 7.9, the width and height attributes are
// added to the img tag. Adding the if clause to conserve
// compatibility with Drupal
if (function_exists('image_style_transform_dimensions')) {
// 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['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}
?>

Replace PUT_YOUR_THEME_NAME_HERE with your theme's machine name, clear your cache and voilà.

EDIT (15 May 2011): Version for Drupal 6:<?php <br /?>
function PUT_YOUR_THEME_NAME_HERE_imagecache($namespace, $path, $alt = '', $title = '', $attributes = null) {
global $theme;
if (count(imagecache_preset_by_name($namespace . '_' . $theme))) {
$namespace = $namespace . '_' . $theme;
}
// check is_null so people can intentionally pass an empty array of attributes to override
// the defaults completely... if
if (is_null($attributes)) {
$attributes['class'] = 'imagecache imagecache-' . $namespace;
}
$attributes = drupal_attributes($attributes);
$imagecache_url = imagecache_create_url($namespace, $path);
return '';
}
?>

Comments? Leave them here.

• Français