Kevin Bridges

I needed to apply the concepts outlined at http://drupal.org/node/101748 to create a listing of node teasers that contained thumbnail images. That article was written for 4.7 and was useful, but not completely helpful for Drupal 5.1 which I am running. Here's a way to create a teaser list with thumbnails ... keep in mind I am also not a Drupal expert, but a Drupal learner. This is just what worked for me.

Install the Modules
You will need to install and enable the following modules:

• The CCK module - http://drupal.org/project/cck
• The imagefield module - http://drupal.org/project/imagefield
• The imagecache module - http://drupal.org/project/imagecache

Configure Imagecache
The imagecache settings are at http://www.example.com/admin/settings/imagecache (replace example.com with your domain). We are going to define a generic thumbnail namespace that can be reused for different purposes. This namespace will exist to scale the uploaded images to a size of 100x100 pixels for display in the listings.

1. Enter a name in the Preset Namespace field and click the Create Preset button. I used the name thumbnail for this example.
2. In the Add a New Action dropdown select the value scale and click the Update Preset button.
3. Enter the Width and Height you want your thumbnail to be. When you are finished press the Update Preset button. For this example, I entered 100 in both fields.

Modify the Node Type with CCK
This example is modifying the Blog node so navigate to http://example.com/admin/content/types/blog. We will be adding an image field to the existing node type.

1. Click the Add field tab.
2. Enter a machine readable name into the Name field. For this example, I entered thumbnail.
3. Toggle on the Image radio button.
4. Press the Create field button to submit the form.
5. Optionally enter a directory to store the images in the Image path field. For this example, I entered blogs
6. Optionally check the Enable custom alternate text checkbox to allow for a clear description of the image.
7. Press the Save field settings button to submit the form.

Create Content and Upload an Image
Now create a new instance of the modified node.

1. Navigate to the create page of the node type you are working with. For this example, I used http://example.com/node/add/blog
2. Upload an image. If you are following this tutorial, you will have a new upload entitled thumbnail. If not, the fieldset will be named after the data you entered in step 2 of Modify the Node Type with CCK
3. Submit your content.

Create a Module
I use a custom module for each site that I do that contains functions specific to that site I would like to keep removed from the templates. Not sure if it is the correct Drupal way of doing things, but it works for me. This is a simple module with 2 files, example.info and example.module The module itself will contain a simple function that can be called from any template to generate a teaser list of that node type complete with images.Create the following two files and upload them to an example folder in your modules directory. Don't forget to activate the module before proceeding.
Create example.info
name = "Teaser List"
description = "Example Teaser listing of a node complte with thumbnail images."
version = "1.0"
Create example.module
function example_getBlogTeasers() {
$results = db_query("SELECT nid FROM {node} WHERE type = '%s'", 'blog');
$output = '';
while ( $data = db_fetch_object($results) ) {
$node = node_load($data->nid);
$output .= l($node->title, 'node/'.$node->nid);
$output .= theme('imagecache', 'thumbnail', $node->field_thumbnail[0]['filepath']);
$output .= $node->teaser;
$output .= '';
}
return $output;
}
This is not ideal code ... but it is functional code. There are many ways to tweak the output of this listing. In a production environment you may want to enclose the content in divs or as a list that can be styled and displayed to your liking. You may need to alter the query to select your specific node type. For the purpose of this tutorial we will keep it simple and move on.
Modify Your Theme
THis is the easy part. Simply add the following code to a template page you would like to display your teaser list on:<?php echo example_getBlogTeasers(); ?>
Conclusion
It took me a while to figure this out so I do hope it helps someone. This is the first content I've contributed to Drupal, so by all means let me know if there is an easier or more correct way to accomplish any of the above.Here's a list of articles that I used to figure this out:

• http://www.lullabot.com/articles/image_and_image_exact_sizes_vs_imagefield_and_imagecache
• http://drupal.org/node/101748