WebWise Solutions

You know what drives designers crazy? When you turn their beautiful (stock photo- and lorem ipsum-laden) comps into a community with users who've been empowered to color outside the lines (or in this case, outside the designer's painstakingly thought-out grid).

Case in point, we had a client who commissioned us to implement a pretty straight-forward Drupal design. The design became problematic when we realized users were able to upload all manor of mugshots (tall, skinny, short, stubby, or square) as long as they fit within the 85px by 85px max size restriction we set for picture uploads.

Because of these odd-sized avatars, the working community looked a little "rough". Definitely not as precise and aligned as the designer's comp.

That may not bother you but it really bugs designers (and brand-conscious clients).

So we turned to the ImageCache module.

According to the project page, "ImageCache is a dynamic image derivative generator. It allows you to assign a set of image manipulation functions to a preset and generate images on the fly based on the preset name."

Here's what that means to me:

• With ImageCache you can require users to upload a single, large, high-quality photo. From that photo, ImageCache can create (on-the-fly) versions of the photo that are cropped and resized to fit a specific need.
• If you start with a large photo (and store it for the future) you'll never be stuck when a new designer decides the avatars should be twice their normal size this year. You set up a new size profile in ImageCache and it'll use the master photo to create new, high-quality avatars.
• Once the images are created they are indeed cached. Later requests for the image will be served by the web server directly.
• ImageCache comes in handy when you want to use 125x125 images for profile pages (like this site)
  
  or 85x85 images for story posts (also like this site)
  
  or 50x50 images for forum posts or comments (we're working on it)
  
  or 25x25 images like the article lists on CNET.com
  
• Product Catalogs would be another cool place to use ImageCache. You could upload a single product shot and have it generate a plethora of image sizes that could be used on list, catalog, or product information pages.

Nate Haug wrote a very nice tutorial to get you started with ImageCache.

Nate also wrote a complimentary (and indispensable) module that, among other things, adds validation functions to the picture upload form to make sure your users are indeed uploading photos that meet the minimum size requirements you've set. It also does some magic to flush old images from the cache if a user decides to change their photo and upload another. You can get the imagecache_profiles module here.