Installing modules and making preparations

Modules needed

The following modules should be installed before following along with the guide:

You also need these modules for image handling. Some may be alpha or beta versions, but are fine to use:

Optional modules

These modules will be used in the lesson, but are optional:

Transliteration (sanitizes the characters of uploaded filenames)
FileField Paths (allows renaming of uploaded files with predetermined patterns/data)
Global Redirect (prevents duplicate content penalties from search engines when using Path or Pathauto)
Administration Menu (not related to the guide, but is a must-have for working quickly and effectively with Drupal)

Before beginning, ensure that you have installed and enabled the required modules listed above (and the optional modules if you wish to). Many of the modules have additional "sub-modules" that come with them. You should enable "all" of these sub-modules for this guide EXCEPT as outlined below.

Sub-modules not to enable:

Do not enable Content Permissions module until or unless you plan to choose the permissions for how every user's Role can view every single field you create (a very powerful feature, but also very time consuming). If you don't need this, then do not enable the module. Warning: if you enable Content Permissions module, every field will immediately be unviewable by any other user besides the main site administrator, until you specifically grant each Role access to view the fields. If you already enabled Content Permissions module, disable it now.
If you don't need it, you can skip enabling the "FileField Meta" sub-module.
If your server does not support ImageMagick, then you can skip enabling the "ImageAPI ImageMagick" sub-module.
You should not enabled the "Advanced help example" module.

Some sub-modules do not become available for installation until after you first enable the parent module, or enable another module which that module is dependent on (dependencies are shown in green and red text next to every module). Continue enabling modules in multiple passes until every module required has been enabled.

Preparations if you use a WYSIWYG editor

If you have a WYSIWYG editor installed (such as the popular TinyMCE or FCKeditor, among others), it can potentially get in the way of the settings/configuration forms on many of Drupal's administration pages (often inserting HTML code in places that break your settings). As such it is best to disable the WYSIWYG editor ahead of time for all areas of your site "except" for the content creation/publication pages where it is actually required. Though the process for doing this varies between editors, fortunately most include the means to allow you to choose whether they should be enabled or disabled for any given area of your site. It's much better to choose the few places where the WYSIWYG editor "should" show up, rather than the countless places where it should "not".

FCKeditor

FCKeditor is enabled by default on just about every text area on the site (not good). Go to Administer > Site configuration > FCKeditor and click the "edit" link next to FCKeditor Global Profile... (admin/settings/fckeditor/editg). Settings made here apply globally to all FCKeditor profiles, so you only have to make the settings one time.
Expand the "Visibility settings" fieldset. Change the Use inclusion or exclusion mode setting from exclude to include.
Select all of the text in the Fields to exclude/include box and delete it.
Move down to the currently-empty Paths to exclude/include box, and paste in the following:
node/*
user/*
comment/*
You can add as many other paths as you need to, so that the WYSIWYG editor appears on only those pages.

TinyMCE

TinyMCE is already set by default to show up only on certain pages where it's necessary. In case you've adjusted the default setting though, it can be changed by going to Administer > Site configuration > TinyMCE (admin/settings/tinymce) and then clicking on the "edit" link next to each of your profiles (TinyMCE does not have a global setting). Expand the "Visibility" fieldset in order to adjust the Show tinymce on specific pages setting.

Similar steps may be necessary for other WYSIWYG editors. Please refer to the documentation as well as the settings page of your WYSIWYG editor module.

Prepare Drupal for image handling

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

Go to Administer > Site building > ImageCache (admin/build/imagecache) and click "Add new preset".
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.
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.
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.
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

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.
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.
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.