Presets and Actions

The main ImageCache administration panel at AdministersSite buildingsImageCache (admin/build/imagecache), shown in Figure 7-9, displays a list of the presets available on the site. An image preset starts as nothing but a name, describing the actions that are performed on this style of image. You can add, edit, or delete presets, as well as

Purchase Order Process Flow Chart
Figure 7-8. ImageCache workflow for creating a thumbnail

"flush" them. The Flush option lets you clear out all created images for a preset. Because images are generated on the fly, you can delete all the thumbnails on your site at any time and they'll be re-created the first time they're requested. You might try flushing the cache for a preset if images somehow become out of date with the original.

Imagecache

Add new preset

Manage imagecache preset. Preset Name preview thumbnail

Actions

Edit Delete Flush Edit Delete Flush

Figure 7-9. The ImageCache module preset administration screen

The preset name will be part of the URL of all generated images, so it's good to keep it short, all lowercase, and use only alphanumeric characters, underscores, and dashes. If building a site where standard image sizes will be used in a variety of places, a name that describes the final output is also a good idea, such as "160_square," "200_width," or "300x200_resize." For our examples, we'll use names like "thumbnail" and "preview," which are semantic in their use.

The real fun comes in when adding new actions to a preset. Multiple actions may be added to a single preset, and the actions will be performed from top to bottom. Whenever you edit a preset, the cached files will all be flushed so that they can be regenerated. This makes it easy to change all the images on the site from using a 100-pixel thumbnail to 120-pixel thumbnail (or any other possible changes). The configuration form for adding a new preset to an action is shown in Figure 7-10.

Figure 7-10. Actions on an ImageCache preset

Because each action has unique settings beyond weight, we'll describe only the most basic actions: crop, resize, scale, and scale and crop.

Crop

Crop allows you to trim off edges of the image that are not wanted. Crop also can take pixel values, but the most common usage of crop values are the keywords top, right, bottom, left, and center. The end result of a cropping action will be similar to Figure 7-11.

Figure 7-11. Cropping will trim off edges of an image

Resize

Resize can be used to force an image to a particular dimension. Width and height values can be integers to scale to a specific pixel size, or include the percent symbol to scale to a percentage.

Usually, you'll want to use the scale action instead of resize, as resizing will make your image look squished or stretched. Rather than maintain proportions, resize forces an image to be exactly those dimensions, as shown in Figure 7-12.

Resize 100 width and height.

100px

Figure 7-12. Resizing can change the aspect ratio of an image

Scale

Scale is used to size images proportionally. Unlike resize, you need to enter either a width or height. The dimension without a value will be determined by scaling the image to the given dimension. If both dimensions are entered, the image will be scaled to fit within both values.

Figure 7-13. Scaling an image maintains the aspect ratio

If your site absolutely needs images to be no smaller than a certain size, you can use the Allow Upscaling option to enlarge images to the entered dimensions.

Scaling will always maintain the original aspect ratio of the original image. The end result of a scaling action is shown in Figure 7-13.

Scale and crop

As the name might imply, the scale and crop action is a single-action combination of the scale and crop actions. In this action, the image is scaled until one dimension fits within the given size, then the larger dimension is cropped off (also called a zoom crop). This action is most helpful for making square thumbnails while maintaining the aspect ratio of the original image. An example of the result of the scale and crop action is shown in Figure 7-14.

Figure 7-14. The scale and crop action trims off the larger side while maintaining the aspect ratio

v More actions are available in ImageCache than those listed here, and

*jf, more are being added all the time. Some other actions you may use ' ' 1.4' include: rotate, watermark, border, text placement, brightness, and transparency. For a complete list, see the ImageCache project page at http://drupal.org/project/imagecache. For an expanded set of actions, you can install the ImageCache Actions module, available at http://dru pal.org/project/imagecache_actions.

0 0

Post a comment