Drupal 7: Manual Crop Module

David G - DrupalIn my current websites I like to give clients the freedom to upload images and have those images be scaled by Drupal for use in Responsive Web Design. When clients upload images I want to assure that the image is of a mimimum size for its use on a desktop, and I want to assure the image shows what the client wants. Typically this involves cropping a photo, and this is were the Maypically this involves cropping a photo, and this is were thenual Crop module can save alot of time and effort for me and the client.

RWD Recipe for (some) Images in Drupal

When I create websites typically for example the homepage will have a slideshow. Or perhaps some sections of the site will have a consistent banner image placed into a side block to denote the section of the site you’re navigating, etc. Sometimes images can be used for situational awareness. Other times for example I want to allow a client the ability to upload mugshots or headshots of students or staff for a personnel directory page. In all these cases it’s nice to crop an image arbitrarily. The 2 cases for cropping is usually:

  • For a headshot for example, to center a persons face in an image.
  • For a large panoramic image used in a slideshow (which may be a RAW camera photo at an insane resolution) … to constrain the image to a valid dimension (and hacking off a region of the image).

In both cases the Manual Crop module can be used, typically along with Drupal Image Styles we gain the needed functionality to crop these images, either arbitrarily or with some size constraints for convenience. I typically use size constraints.

After installing Manual Crop I typically:

  • Create Image Styles per CSS Breakpoint to scale an image to the appropriate size for the client device.
  • For the Desktop Image Style I require cropping of the image so that the dimensions of the Desktop image style are the maximum constraints used by Manual Crop when cropping is enabled for a file field configured to store images.

With the above configuration in place a client is free to upload image(s) to a file field and when prompted to crop they can easily maximize the crop selection to the Desktop-sized Image Style and then center/place the crop area selection wherever they please.

Whew that was a mouthful …. what the hell do I mean … perhaps some illustrative images would help!

Manual Crop Usage Example

Admin settings for the Module control how Editors see cropping updates before a Save.

Admin settings for the Module control how Editors see cropping updates before a Save.

Example Image Style(s) for a Responsive slideshow image field image style.

Example Image Style(s) for a Responsive slideshow image field image style.

The "desktop" image style which requires manual cropping to a good dimension for my site layout.

The “desktop” image style which requires manual cropping to a good dimension for my site layout.

Adding/Editing an Image (field) has a cropping button appear after Upload.

Adding/Editing an Image (field) has a cropping button appear after Upload.

Cropping overlay lets you crop the image, in this case to the Image Style dimensions we configured!

Cropping overlay lets you crop the image, in this case to the Image Style dimensions we configured!

Save the field and visit the content item on your Drupal site and you’ll see the cropping and image style(s) take affect.

Note: If the images don’t show up this usually means you have a filesystem permissions issue which caused Apache not to be able to write the derivative images to an image styles directory. Be sure to check your Drupal Files directory permissions values if this occurs.

As you can see this can be a flexible means to allow a client to upload any image(s) say from their iPhone to the site and have it resize and be cropped with little to no hassle by the client. Is it foolproof?! By no means — but it should be straightforward for most clients to use.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *