Last updated 14 May 2012. Created on 14 May 2012.
Edited by Itangalo. Log in to edit this page.

The first step in creating a new image style is to provide it with a machine name. (This is one of the few places in Drupal where you have to enter machine names manually.) The name will be used in the path to style's image derivatives and should only contain lowercase alpha-numericals, dashes (-) and underscores (_). A common practice is to name a style by their use case ('sidebar_small') or their actual sizes ('180x180').

Saving the machine name creates an empty image style and redirects you to the page to edit it. (See figure 8.3.) Here you may add one or several effects, used to manipulate the image. A standard Drupal installation provides the following effects:

  • Crop: This cuts the image down to selected measurements. You can specify which part of the image should be in focus.
  • Desaturate: This converts the image to grey scale.
  • Resize: This streches or shrinks the image to a size that you define, without any cropping.
  • Rotate: This rotates the image a number of degrees. You can set which background color should be used on any blank spots revealed by the rotation or you can optionally have a random rotation, with a specified maximum angle.
  • Scale: This scales down the image to fit within a specified width and height. (You may set only one dimension to scale the image.) You may optionally allow the images to be scaled up too, if it is smaller than the given dimensions.
  • Scale and crop: This scales the image to cover a given width and height, cropping any parts outside the given frame after scaling.

The most commonly used effects are scale and scale and crop. You may chain several effects to create combined image effects. Administrators may reorder effects in a style, add or remove existing effects.

Figure 8.3: Image styles consists of a number of effects, used to process the image.

TIP: Image styles defined by modules, such as the ones included in a standard installation, can't be deleted. You have to actively override the standard settings to be able to edit their effects. You can revert the styles to their default settings later on, if need be.

TIP: The ImageCache Actions module provides a number of new effects for image processing.

07.3 Edit my_style style.png100.13 KB

Looking for support? Visit the forums, or join #drupal-support in IRC.