For freedom and solidarity online

Styles d'images (equivalent de imagecache) spécifiques au thème dans Drupal 7

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

 * 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 < 7.9
  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: '; } ?>

Comments? Leave them here.

Call us

☏ +1 514 907 9494
Lun: 10h à 12h et 13h à 16h
Mar: 10h à 12h
Mer: 10h à 12h et 13h à 16h
Jeu: 10h à 12h
Mon: 10am to 12pm and 1pm to 4pm
Tue: 10am to 12pm
Wed: 10am to 12pm and 1pm to 4pm
Thu: 10am to 12pm

Come and See Us!

1883, rue Atateken,
Montréal (Québec) H2L 3L7, Canada
Veuillez noter que nos bureaux n'ont pas de stationnement attitré.
1883 Atateken Street,
Montreal, Quebec, H2L 3L7, Canada
Please note that you'll need to find on-street parking.

Write to Us

Informations générales

Support technique

Pour une demande de devis, voir le formulaire à la page contact.

Nos clefs PGP

Politique de confidentialité

General inquiries

Technical support

For a free estimate, see the form on our contact page.

Our PGP keys

Privacy Policy

Follow Us