Managing all of your images with Drupal

Are you tired of resizing your images, saving them, uploading them, only to find out that you need to do the whole process over again because you forgot to size the images correctly?

That was editing for the web a decade ago but it doesn't have to be that way any longer.  With Drupal you can manage your images online and this tutorial will show you one way that it can be done.

This howto is based on a Surrey Drupal User's group discussion where Ryan Dempsey talked about his favourite recipe for managing images.  This howto extends that discussion with the addition of some additional "nice to have" modules.

The good news? You can do most anything you need/want to do to images with Drupal.  The bad news?  Some fringe coding might be necessary to make it totally awesome. 

Drupal can make your website fully capable of managing images in a sane and logical way so we don't have to manually resize our images ever again.

**Using Core Components aka. The Old Way
**

Out of the box Drupal supports images by way of the core upload module.  It is not pretty, users must first upload the image by attaching it to a posting.  After the upload the user must then take the URL it creates  and paste it into the HTML code within the body or, if using a WYSIWYG editor, into an image attach dialog box (if you're looking for one, I prefer FCK).  For a web editor this process is familiar and approachable but to end users it is a nightmare.

Also consider that if you go this route your users will probably have to resize and upload their images as web-ready graphics this may not be the best method: it requires knowledge of Photoshop or the Gimp to do most of the handy work. 

At the end of this guide you will have two methods that will allow you to manage images, using a WYSIWYG editor and using a CCK field.  Our goal is to manage all of the images through a centralized interface.  If you are uploading an image using the core upload module, or a CCK ImageField your uploads are categorized in the system based on the node.  That is extremely annoying when users want to re-use imagery on the site.  Under the "upload" paradigm a user might try to re-upload the file each time.  What a hassle!

A Central Gallery

We want to have everything go into a central image gallery.  Once an image is uploaded it can be re-used with other postings.  We no longer have to worry about accidentally deleting an old posting and having our images disappear.  You can customize where users can put things, permission agains what they can access and prevent users from deleting (just in case!).  That is all really great stuff.

Keep in mind that different users are still going to have different needs.  Some need to edit in WYSIWYG editors, while in other circumstances you simply want someone to choose an image from a pre-set location.  Both of these options are possible.

The Image Management Modules

This recipe should cover everything under the sun - so long as you want to keep everything in a centralized gallery.  That is my preferred route because I know a lot of my clients travel a lot and/or wipe their laptops clean every few months.  They don't want their images on their hard drive.  They want them online.  

The idea is that once you put something into the website it should be available for use... always.  From anywhere. 

Here are the modules you will need:

• ImageCache - To manage the resizing, cropping and other basic tasks.
• ImageCache Actions - An expansion pack which allows you to mod the images at display time. 
• Image Resize Filter - Make your WYSIWYG editing awesome(r) no matter which one you use
• IMCE - A gallery to store everything
• IMCE CCK Image - A module which allows you to select an image in a CCK field

This probably goes without saying these days, but you will probably also want:

• Views
• CCK
• FCKeditor or alternatively: WYSIWYG with the WYSIWYG IMCE Bridge

 **The Image Gallery Component - IMCE
**

To get a gallery users can browse through and upload their images into we turn to the IMCE module.  Enabling it will give you a new tab on your "/user" page (right after logging in).  It will also pop up the gallery whenever requested.  Users can upload any time they visit that screen if you have given them permission to do so.

When you configure the settings you will need to ensure that where your uploads are going on the server has appropriate permissions.  This can be frustrating, but keep this in mind, you will have the same issue when you get to ImageCache below. 

I highly recommend setting a maximum image size.  I would like to make a note that with some work on the CCK IMCE Imagefield module we talk about later this requirement will go away so long as you have the disk space available.

I disable resizing at this point and I do not create thumbnails at this stage either - there are better ways of doing both of those things.  Keep reading.

One note about IMCE before we get any further.  It produces a listing of images, not a thumbnail gallery as I was hoping for.  I would imagine this is possible with some clever hacking, but I'll leave that task for someone else to conquer.  It would be nice to have...

Using the images within a WYSIWYG editor

This is one of those steps that "should" be easy but in practice can take some time to configure correctly.  Since I use the FCKeditor module most of the time (and not the Wysiwyg API) this is a little more complex than I expected.  If both FCKeditor and IMCE are installed you should see the option to integrate IMCE with FCK on the IMCE settings page.  Then after doing that, you will want to go to the FCK settings page and set the default file browser to IMCE.  

If you use the Wysiwyig API, you will want to get the IMCE bridge module.  Make sure after enabling IMCE that you go into your toolbar settings and add the IMCE image attach field.  Otherwise you cannot browse the server for images (except, that sometimes you can by editing a file after drafting it... weird).

To test your configuration you will need to completely clear the cache on your desktop machine because the editor(s) often load the settings in JavaScript which is usually archived for a long while on most desktops.  If you have Firefox web developer toolbar installed I recommend clicking "miscellaneous -> clear private data -> caches".  After doing so, you should be able to click the "insert image" icon in FCK (or your favourite editor) and see a new "browse" button next to the URL field when you click it.  

If you let people insert images this way they will eventually want to resize the images.  When working within FCK Editor I think the best method is to let users use the tools most obvious... and I believe that is when the FCK image dialog box pops up.  They see the controls, they use them, and they get results.  Makes sense right?

The Image Resize Filter does the rest.  It searches the body text created by FCK (or any other another editor) to see if the user changed the image dimensions while they were editing.  If your users changed the settings it will automatically create a version of the file with those new dimensions.  What a delight.

Using the images as a CCK field

This part of the equation is still being built but it is one of the most interesting extensions of the IMCE module that I have yet to happen upon.  The IMCE Image Field CCK module allows you to insert an image selector on any existing content type. 

That will let you define places on a page where images must go.  Users can't disrupt the order of things with the WYSIWYG editor so they can get down to business blogging (or whatever it is they do).

After the user selects the image the field allows the user to see the image (which currently renders at full size - ouch) and also type in a caption.  We can turn the caption on or off when you render the images.  That setting is managed by ImageCache.

Formatting images using ImageCache

At display time you can have image presets that render.  Essentially all you need to do is set some presets in your ImageCache settings and then choose places where you want the image to display at that size.  You can specify the size for CCK fields defined in your content type pages.  If you are using views, just choose the one you want from the options provided for each image field.

Images in your preset sizes will not generate immediately.  They are generated as they are needed.  Every time thereafter it will be cached.

Slicing and Dicing the Photos

You can go a step further with image processing on Drupal.  Using ImageCache Actions you can overlay text onto the image, put custom borders on, and even watermark the images.  If you want a sequel to this blog posting that talks about ImageCache options send me an email.  It took a long time to get this posting out the door so it helps if people know it is useful.

**A Quick Final Touch
**

While you're working with Drupal, don't forget to consider using Lightbox as a quick route to making galleries by attaching multiple images to a page.