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
Was this useful?
About me
I'm an Acquia-certified Drupal Triple Expert with 17 years of experience, an open-source software maintainer and Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.