Using ImageCache and ImageCrop for my Portfolio

28th April 2010

Warning: This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date.

Whilst working on my own portfolio/testimonial website, I decided to have a portfolio page displaying the name of each site and a thumbnail image. For this Blog post, I'll be using a site called Popcorn Strips which I built for a friend earlier this year as an example.

I created a content type called 'Project' with a CCK ImageField called 'Screenshot'. I created a project called Popcorn Strips, used the ScreenGrab add-on for Mozilla Firefox to take a screenshot of the website, and uploaded it to the project node.

I created a View to display the published projects, and an ImageCache preset to create the thumbnail image by scaling and cropping the image to a size of 200x100 pixels.

Although, this automatically focused the crop on the centre of the image, whereas I wanted to crop from the top and left of the image - showing the site's logo and header.

I installed the ImageCrop module, which add a jQuery crop function to the standard ImageCache presents. I removed the original Scale and Crop action and replaced it with a Scale action with a width of 200px.

I then added a new 'Javascript crop' action with the following settings:

  • Width: 200px
  • Height: 100px
  • xoffset: Left
  • yoffset: Top

Questions? Comments? I’m @opdavies on Twitter.

Tags: cck, drupal, drupal-6, imagecache, imagecrop, imagefield

About the Author

Picture of Oliver

Oliver Davies is a full-stack Web Developer and System Administrator based in the UK. He is a Senior Developer at Microserve and a part-time freelancer specialising in Drupal, Symfony and Laravel development and Linux systems administration.