Automatic avatar resizing and cropping with Drupal

One common problem with Drupal is that users can set up avatar images of any shape. You can set an upper size limit, but you can’t make all the images the same size. Not by default, that is.

Images of avatars before and after resizing

The good news is that it can be done with contributed modules. The bad news is you’ll need quite a bunch of them.

What you’ll need

Drupal 6
ImageCache
For creating presets and storing edited images.
ImageCache Profiles
For using ImageCache with profile images.
ImageAPI
Behind-the-scenes module for handling image editing.
Transliteration
Cleans up unusual characters from filenames.
Either the GD2 or ImageMagick library
Note: These are not Drupal modules, and their installation instructions are too complex for this tutorial. GD2 is already installed on many servers and web hosting services.

Step 1: Check url and download settings

You’ll need to enable either the clean URL or private download setting in Drupal.

  • For clean URLs, go to Administer → Clean URLs.
  • For private downloads, go to Administer → File system.

Step 2: Install the modules

Download and install all the above modules. For help on how to install the image libraries, see GD2 or ImageMagick. Note that you only need one of them, and they may be already installed.

The ImageAPI module comes with two sub-modules. Enable ImageAPI GD2 or ImageAPI ImageMagick, depending on which library you want to use. Also, enable ImageCache UI.

Step 3: Check image toolkit settings

Go to Administer → ImageAPI. You should see that your image library is enabled. If it isn’t, now would be a good time to look into troubleshooting.

Step 4: Create an image preset

ImageCache uses presets for image editing operations. You can think of a preset as a list of changes to perform on an image. Each preset has a name that you choose, like “100×100″ or “cropped_avatar”.

Later on, you’ll choose which preset to use for avatars. You can use different presets for default, comment view and the user profile page.

You can also use presets for many other things like image gallery thumbnails, but that is outside of this tutorial.

To create a preset:

  • Go to Administer → ImageCache
  • Click “Add new preset”
  • Give your preset a descriptive name and click “Save Preset”
  • Add operations to your preset by clicking the operation names.
  • Click “Save Preset” again.

For avatars, the operation you probably want is “Scale and Crop”. You’ll specify a size in pixels, and the images are scaled to fill that size. Whatever doesn’t fit is cropped out.

Step 5: Enable the preset for profile pictures

  • Go to Administer → User settings
  • Make sure “Picture support” is enabled.
  • Choose the presets to use with profile, comment and default.
  • Click “Save configuration”.

One more thing: User pictures don’t appear by default in posts and comments. To enable them:

  • Go to Administer → Themes → Configure
  • Check “User pictures in posts” and/or “User pictures in comments”
  • Click “Save configuration”.

Step the last: Troubleshooting

Unfortunately, it’s my experience that ImageCache does not usually work on the first try. The developers of the module have a pretty good troubleshooting section, and there are also sprawling forum discussions.

One key thing to check is if ImageCache can write into your /sites/all/files directory. The module saves every edited image it creates there.

Comments are closed.