Drupal 6 – “Best Practice” for adding images to content.

"Best Practice" in this instance is open to interpretation - this is my first effort at writing for Drupal. Best Practice for Placing Images depends on your individual site, but I think most people seem to like using CCK with Filefield and ImageField (and perhaps Insert module with Lightbox2). You'll also probably need to use ImageCache with this.

Install CCK (checking Content, Content Permissions, and File Field) and then install ImageField and ImageCache (Image Cache UI, Image Api and GD2) and lastly Insert and Lightbox2.

Now go to Image Cache and set up some imagecache presets - such as scale images to 150px wide, 200px wide, 250px wide, scale and crop images to “150px x 100px”, etc.

Adding Thumbnails linked to node
Go to Content and click on "Edit" beside the content type you wish to add images to, and add a new field (using "File" for type of field and "Image" for Widget type). I usually call the field that I am going to use as a thumbnail "add_image" and place it above the body field ((some css later on will tell the imagecache present that will populate this to float left); if I wish to have an image that will float right, I add a second field called "add_image_right" (and add some css to the theme to tell it to float right). Click save.

On the configure page (that you are automatically brought to), you can select which presets you wish to attach to this field. I usually only add information for the “Alt Text” and “Title” settings and enable the “Description” field. Click save.

Now click on “Display Fields”. On the “Label” field, set this to “Hidden” (so that there is no text saying “Add Image” above the image.

For the “Teaser” field choose an imagecache preset that will be used here – I choose “teaser-left linked to node” (having already set up an imagecache preset called “teaser-left” (and setting this to “Scale and Crop” 150px wide by 100px high). This means that if you click on the image when viewing a list of teasers, it will open up the page/node.

For the “Full Node”, choose an imagecache preset that will be used here – I choose something like “Lightbox2 – full-node to add_image_500px” (having set up imagecache presets called “full node” (image scaled to 250px wide, for example) and “add_image_500px” (image scaled to 500px wide). This means that if you click on the image when viewing the page it will open up in a Lightbox2 window at 500 pixels wide, but display on the page at 250px wide.

Repeat the above steps for “teaser-right” and “full-node-right”.

If you use the above, you’ll notice that your images are displayed above your content, rather than inline with it. To get them to display inline, you need to add the following css to your theme’s css file (probably style.css):

/* BEGIN imagecache classes */

.imagecache-teaser
{
 float: left;
} 

.imagecache-teaser-right
{
 float: right;
} 

.imagecache-full-node
{
 float: left;
}

.imagecache-full-node-right
{
 float: right;
}

To add identical fields to other content types, you simply click on “Edit” beside the content type and then scroll down to “Add existing field” and choose the field(s) you wish to add, ensuring to “drag and drop” the field(s) above the “body” field.

Adding extra images to nodes
Once I have the above done, I add another field called “Extra Images” and place it below the “Body” field. On the “configure” page, I set the maximium resolution to 640x480, set the “Alt Text” and “Title Text” settings (ensuring to check the box to allow custom text), and then turn on “Insert” and choose the imagecache presets that I wish to allow here (usually scale image to 200px, 250px, 300px, 350px and 500px and also the relevant settings that will allow each of these be displayed in a Lightbox2 window at 500px). (When you click on “Insert” when adding images to nodes, you will also have to click on the “image” icon in TinyMCE (or CKEditor or similar) or use html to float the image left/right and set margins etc. (unless you have it all set up in the css).)

Under “Global Settings” there is an option to limit the number of images, I usually set this to “unlimited” and also enable the “Description” field (this is the field that is used to give a description of the image in the Lightbox2 window).

Click on “Save” and on the “Display Fields” page, set everything for this field to “hidden” so labels do not show above your field and your images do not show up twice (once with this preset and once because you will have used the “Insert” button when creating nodes).

To make sure that the Lightbox2 settings work correctly, go to “Input Formats” and click on “configure” beside the Input Format you wish to edit (usually “Full HTML”), then check “Lightbox Filter”.

Setting Permissions
Lastly, we have to go to our “User” settings and “Permissions” and allow whatever roles you need to to view the necessary fields under “content_permissions module”. Click “Save”.