Creating a Simple Photo Slideshow in Drupal

Drupal has taken it pretty hard regarding its image handling abilities. I won't say that it's not warranted. Drupal 7 has really made some improvements to image handling. The instructions here are for building a simple photo slideshow in Drupal 6. The process would be different (read "easier") in Drupal 7.

Background Info

There are two main schools of thought as to how images can be handled in Drupal:

1. Each image is its own node
2. A single node (such as a gallery or portfolio) contains multiple images

There is no correct choice for all situations. For most of my Image or Photo Gallery use cases, I prefer option 1 above. There are a number of reasons, but I find it very helpful to have each image existing as its own individual node.

Basic Installation

Download Modules and Themes

I used a basic install of Drupal 6 along with the following basic modules for my presentation (in no particular order):

• ImageCache
• ImageAPI
• FileField
• ImageField
• CCK
• Views
• Views Slideshow
• Transliteration - Not required by ImageCache, per se, but it's helpful.
• Administration Menu - Not related or necessary to the example, but it's my favorite way to quickly navigate the back-end of Drupal.

It's up to you, of course, but I used the 960 Robots theme for a change of pace.

In my demo, I used Drush to speed up the downloading and installation of modules and themes, but you can always do it the old-fashioned way.

drush dl imagecache imageapi filefield imagefield cck views views_slideshow transliteration ninesixtyrobots admin_menu

Enabling Modules

I enabled the following modules in Drupal:

• Administration Menu
• Content
• FileField
• ImageField
• Text - I enabled this, but I didn't end up using it in my demo.
• ImageAPI
• ImageAPI GD2 - You have to enable either this or ImageAPI ImageMagick, but not both.
• ImageCache
• ImageCache UI
• Transliteration
• Views
• Views Slideshow
• Views Slideshow: SingleFrame
• Views Slideshow: ThumbnailHover
• Views UI

If you're using Drush, drush en admin_menu content filefield imagefield text imageapi imageapi_gd imagecache imagecache_ui views views_slideshow views_slideshow_singleframe views_slideshow_thumbnailhover views_ui will do take care of the above.

The Steps

1. Create a content type to contain our photos.

   Since each image will be a node in our example, we'll need to create a content type of which all image nodes will be. I chose to create a content type called Photo.

   1. Go to admin/content/types/add and enter a Name and Type for your new content type. I used Photo and photo respectively.
   2. Change any of the Submission form settings, Workflow settings, and/or Comment settings, if desired. I just left these at their default settings.

2. Add an Image field to your new content type.

   1. Go to Manage fields at admin/content/node-type/photo/fields (if you've used my example naming convention).
   2. Give your new field a Label and Name and click Save. I used Photo and photo respectively.
   3. I made the field Required since holding an image was the only real purpose of this content type.
   4. Click Save field settings.

3. Create some content.

   Go to node/add/photo and create as many photo nodes as you'd like. I created five in my example, but as long as you have two or more, you'll be able to continue with the exercise.

4. Build ImageCache presets in order to display your images uniformly.

   Since we may need to display both large versions of the images and thumbnails, we're going to create two ImageCache presets.

   1. Go to the ImageCache administration page at admin/build/imagecache.
   2. Click the Add new preset tab.
   3. This will be our large image preset so I'm gonna name it large_slideshow.
   4. Click Save Preset.
   5. Click Add Scale under the New Actions fieldset.
   6. Enter 600 in the Width field and 400 in the Height field.
   7. Click Create Action.
   8. Now let's create our thumbnail preset. Click the Add new preset tab again.
   9. Name the preset slideshow_thumb.
   10. Click Save Preset.
   11. Click Add Scale And Crop under the New Actions fieldset.
   12. Enter 50 in both the Width and Height fields.
   13. Click Create Action.
   14. I wanted a black and white thumbnail, so I clicked Add Desaturate under the New Actions fieldset.
   15. Click Create Action.

5. Now let's build our slideshow.

   1. Go to admin/build/views.
   2. Click the Add tab to create a new view.
   3. Click the + to the right of Filters to filter out which content will be in our slideshow.
   4. Check the boxes beside Node: Published and Node: Type and click Add.
   5. Select Yes for Published and click Update.
   6. Select Photo for the Node type and click Update.
   7. Click the + to the right of Fields to choose which fields will be displayed in our slideshow.
   8. Check the box beside Content: Photo (field_photo) and click Add.
   9. Change the Label to None.
   10. Choose large_slideshow image from the Format drop-down box.
   11. Click Update
   12. Click Unformatted next to Style under the Basic Settings section.
   13. Choose Slideshow and click Update.
   14. Change any of the slideshow settings that you'd like to change and click Update.
   15. Make sure Page is selected from the Add display drop-down box and click Add display.
   16. Click on None next to the Path label under the Page settings section.
   17. Enter slideshow and click Update.
   18. Click on No menu next to the Menu label under the Page settings section.
   19. Check Normal menu entry.
   20. Enter Slideshow in the title field.
   21. Choose Primary links from the Menu drop-down.
   22. Click Update.
   23. Click the Save button at the bottom of your view.
6. That's it. Go visit your new slideshow.

More

There's lots more that can be done with Views Slideshow and ImageCache. If I get a chance, I'll try to put together a brief screencast of the process I spelled out above.

Here are a few examples of other Views Slideshow implementations I've done:

• The header image as well as the News and Blogs rotators on the front page of http://www.allenacademy.org/
• The upcoming workshop image and info rotator at http://paworkshops.net/Not there any more...
• The front page photo slideshow and all portfolio slideshows at http://cdstuderphotography.com/

Do you have any examples of implementations? Please share them in the comments here.