Drupal ImageCache tutorial - How to use Image Cache in Drupal

Why using ImageCache? Obviously, to make your website look good. Suppose I create a view for a list of my blog entries. I will need all thumbnail images of those entries to have the same size, or at least the same width, so my blog does not look messy. To set the same format for those thumbnails, I use the Drupal ImageCache module.

Create a preset for images

The first step is to create a preset. When you want different formats for different content, for example, thumbnails images and user profile pictures, you need to create different presets.  

1. Go to Administer -> Site Building -> Image cache.
2. Label a new namespace preset: for example "blog" and click on the 'Create preset' button.
3. Choose an action: scale, resize, or crop. Scale works well when you want to keep the aspect ratio, you only need to enter one of the dimensions in this case. Resize will allow you to produce images of any arbitrary size, even if that results in a distorted image. Crop will allow you to display only part of the image.
4. After that, give the preset a width and height, you can use a percentage or enter an absolute value in pixels.

When you have the preset, you can apply it to many cases: a Drupal content type with CCK and ImageField, a View and user profile pictures.

Using images cache with CCK and ImageField

When you’ve successfully created our preset namespace, we need to edit the CCK field to automatically resize the images. 

1. Go to Administer -> Content Management -> Content Types.
2. Click on the configure link for the content type that contains the content type that has the field you want to configure.
3. Then just select display fields and set Teaser field to the desired preset. Click on 'Submit' (in this case "blog"). You could also edit Full field if you wanted the images to be resized even when browsing full content.

Using images cache with View

When you create a view which has the image field, you can use ImageCache to make all images in your view have the same format.

1. Go to Administrator -> Site building -> Views.
2. Click to edit link to open a view.
3. Click to image field, at format select box, choose preset of imageCache. For example: image blog link to node.
4. Click update button.

Using images cache with user profile picture

Drupal’s core profile module gives you some basic image resizing capabilities, but that’s not helpful enough if you want to be able to use different sizes of user pictures in different parts of your site. Use ImageCache Profiles in this case! After installing this module, follow these steps:

1. Go to admin/user/settings to enable user pictures
2. If setting a default picture it should use a relative url path (ex. sites/default/files/default-picture.png) 
3. Set up Picture settings at bottm of User Settings page: 
   • Set picture maximum dimensions to 1600x1400
   • Set picture maximum file size to 1024
   • Set your picture guidelines text to: "Photo must be larger than 200x200 pixels." To prevent upscaling, these dimensions should be the dimensions of your largest preset.
4. Select the ImageCache presets (added in the first part of this article): 
   • Profile picture preset: Select the ImageCache preset to set the user picture size on a user's profile page
   • Comment picture preset: Select the ImageCache preset to set the user picture size within comments
   • Default picture preset: Select the ImageCache preset to set the default user picture size throughout the site

Good luck.

Related posts

• Learn the power of Drupal Fusion theme with our free Drupal template ST Octavin
• Taxonomy Drupal tutorial - menus and views
• Taxonomy Drupal tutorial - basic concepts
• How to display location info on Gmap in Drupal