ImageCache + Filefield image + Image javascript crop

Tech Notes

I've just been trying to implement this today for a current project and ran in to some difficulties figuring out a good workflow. Here are some notes. Admin interface Interfacing this module from an admin point of view requires 3 different configuration screens.

  1. Image javascript crop config - admin/settings/imagecrop - the defaults are fine
  2. Imagecache presets - admin/build/imagecache - see notes below on logic patterns
  3. Content type fields - admin/content/types then edit fields

Admin logic patterns The desire to leave the straight forward Imagecache paradigm is to provide better fixed shape and size image thumbnails. Out of the box crops are centred and scaled which will often be best but sometime will remove heads. Out of the box Image javascript crops require using the scale drop down during the crop (which requires a server call and slows editing down) which may also result in thumbnails that are too small. A fair work around is a 3-step Imagecache workflow.

  1. Scale the image to something reasonable - perhaps 10x the size of the final thumbnail. This provides enough resolution to choose quite a specific crop without being unmanageable on small screens. I'm using 840x630
  2. Javascript crop. Resizable on, ratio: CROP, at my final size of 84x63.
  3. And as a fallback, incase the user doesn't create a crop at all, an auto scale & crop at my final size (84x63)