By David - Posted on 16 February 2009

Set up the File system

If you have installed Drupal but have not yet begun working with uploaded files, it's possible that you have not yet configured Drupal's "File system" settings. Go to Administer > Site configuration > File system (admin/settings/file-system). The default File system path setting should generally be fine, but if you wish to change it, now is the time. Ensure that a functional temporary directory is set (on a remote web host this is often /tmp). Unless you have a specific reason not to, you should choose the Public download method.

If Drupal presents any error messages, follow any instructions given on the screen, and seek help on drupal.org if you get stuck. It's very important that Drupal is able to upload and read/write files and folders within the directories specified here.

Set up ImageAPI module

Go to Administer > Site configuration > ImageAPI (admin/settings/imageapi). If your server offers ImageMagick (and the option is available), then you should use that (it has more capabilities than GD), though if not, then leaving GD selected is fine.

Click on "Configure". Choose a value for the JPEG quality setting, and if you want to choose a Crop background color besides the default, enter the color value. If you have ImageMagick installed, you can configure its settings here as well.

Configure the Image Toolkit setting

Go to Administer > Site configuration > Image toolkit (admin/settings/image-toolkit). You will instantly notice that there is "another" JPEG quality setting here. What?! The setting in ImageAPI will take care of nearly every image on the site, but one spot that it doesn't is for the preview image that appears on the Create or Edit content page for images that you upload. This probably won't affect viewers of your site, but will affect how you see the preview image as you upload it. You can leave this setting alone, or set it to match the value you chose in ImageAPI.

Create ImageCache presets

ImageCache is a module that allows you to take a single image, and generate an unlimited number of scaled and/or cropped versions of it (or process it in other various ways), without changing the original source file. In this step you will create several image presets that will be used later on in the lesson. You can use different width/height settings if you prefer, or use the ones provided in the example, as you can go back and change them easily at any time (when you change them, all of your images will automatically show at the new adjusted size).

Create a "small" preset

  1. Go to Administer > Site building > ImageCache (admin/build/imagecache) and click "Add new preset".
  2. The first preset will be for a small image that will show in the "teasers" of your content. For Preset Namespace enter small and the click the "Create New Preset" button.
  3. In the "New Actions" area click on "Add Scale". This is the type of resize you should always use (unless you have a reason otherwise), since it will maintain the aspect ratio of your image. Enter 150 for both the Width and the Height. This will scale your image so that neither its width or height is more than 150 pixels. Leave the Weight and Allow Upscaling options alone. Click the "Update Action" button, and on the following screen you will see that the Scale action has been added to your preset. A sample image is shown at the bottom to illustrate how your image will be affected by this action.
  4. Expand the "New Actions" fieldset to reveal the rest of the options, and click "Add Crop". Enter 150 for the Width, and 100 for the Height. For X offset and Y offset, enter the word center. The Crop action is like a cookie cutter - in this case it is a 150 x 100 cookie cutter being placed in the center of a 150 x 150 area. Once you've set the values (you can leave Weight alone), click the "Add Action" button.
  5. The "small" preset is now complete and ready for when it will be needed in later steps of the guide. One thing to note is the drag and drop handles next to each action. The order in which the actions appear is the order in which the original image will be processed, in sequence, by those actions (so in this case, first scaled down and then cropped).

Create a "medium" preset

  1. You will now create a preset called medium which will be shown on the content page itself. This image will be larger than the small preset, and will not be cropped.
  2. Click the "ImageCache" link in the breadcrumbs at the top of the page to get back to the main page of ImageCache. As you did while making the last preset, click the "Create New Preset" button and enter the name medium for the Preset Namespace.
  3. Click "Add Scale" as before. This time, for Width set a value of 250, and leave Height blank. Click "Update Action". This will scale the original image down so that its width is no more than 250px and its height will be whatever height is correct to maintain the image's original aspect ratio.

Create a "large" preset

Repeat the process one more time to create a large preset. The only difference from the medium preset is the name, and and to use a Width of 970. This image will appear "outside" of the boundaries of your website layout in a hovering window known as a "lightbox" so it is fine for the width to exceed the size of your site layout. 970 is a relatively good choice, since it should be about full screen on a 1024x768 display. Setting the value too high will lead to longer download times.

Set up ImageAPI module

...

and if you want to choose a Crop background color

There is no option for chosing a Crop background color with GD.