Creating a Fading Image Slideshow in Drupal 5

I recently had a site that I do volunteer work for ask me if I could create an image slideshow for them on the home page of their Drupal 5.x-powered site. They wanted to showcase various large images on their homepage fading from one to another, as well as be able to control what images were contained in the slideshow. The solution had to be easy to use and maintain as they don't have a dedicated IT person on staff.

Having just viewed Sean Effel's excellent screencast for doing just about the exact thing I needed in Drupal 6, I decided to write this article as a similar exercise for Drupal 5.

To get started, here's the modules you'll need installed and enabled:

Content (CCK)
ImageField
ImageAPI (including ImageAPI GD2 or ImageAPI ImageMagick)
ImageCache (and ImageCache UI)
Views (and Views UI)
Views Slideshow

We're going to be building a image slideshow using a fairly large image: 800 pixels wide by 400 pixels high. The first thing we'll do it set up an ImageCache preset to automatically scale and crop the images to the proper size. Go to "Administer|Site Building|ImageCache" and click the tab to "Add New Preset". Set the namespace to something like "slideshow_image". Then, add a new "Scale And Crop" action. Set the width and height appropriately. When complete, your preset should look like this:

imagecache preset

Next up, we need to create a content type that our slideshow will pull from. Go to "Administer|Content management|Content Types" and click on the "Add content type" tab. Here's the settings I used:

Name: Slideshow Image
Type: slideshow_image
Body field label: (blank)
Default options: Published
Default comment setting: Disabled

Everything else I left at their default values. Next, add an imagefield to the new content type by clicking on "edit" for the "Slideshow Image" content type, and then clicking on the "Add field" tab. Name the field "Photo" and select the "Image" field type. On the Photo field settings page, leave all the default settings except to select the "Required" checkbox. Here's what my completed content type looked like on the "Manage Fields" tab:

slideshow_image content type

At this point, stop and add a few photos via Create Content|Slideshow Image. Go ahead, I'll wait.

All set? Good. Now that we have some images uploaded, it's time to put everything all together. Go to "Administer|Site Building|Views" to create a new view that takes advantage of the Views Slideshow display option. From the main Views page, click the "Add" tab. The view we need to build is fairly simple - here's settings I used:

Basic Information
Name: homepage_slideshow

Block
Provide Block: checked
View Type: Slideshow List
Nodes per Block: 10

Fields
Add "Image: Photo (field_photo) and chang it's "option" to "slideshow_image" - remember, this is the ImageCache preset we set up in the first step. This tells the view how to display the photo.

Filters
Add "Node: Type Is One Of Slideshow Image" - this limits the view to only show our "Slideshow Image" content type.
Also, don't forget to add "Node: Published Equals Yes" - for completeness.

The only thing that is left to do is to display the block on the home page of the site! Go to "Administer|Site Building|Blocks" and move the "homepage_slideshow" block to the "content" region (depending on your site, you might want to put it someplace else). Also, be sure to click to "configure" the block to only appear on the home page:

block page visibility settings

That's all there was too it to get a basic slideshow working! You can customize your slideshow at "Administer|Site Building|Views|Views slideshow configuration". Settings include the slideshow's speed and sort order, among others. You can further customize the slideshow by tweaking the "homepage_slideshow" view as well as the Imagecache preset settings.

I've gone ahead and attached exported versions of both the view and content type I created in this article - feel free to download them below.

Comments

Thanks for the tutorial. It would be great if you could include an example of this code: how does the fading image slideshow look like? Perhaps you could like to the site you do volunteer work for?

I implemented a very similar solution recently, so it was nice to read this. Thank you for taking the time to post.

In case you want to add a link from the image to a specific URL, you may want to consider placing the image in the node body (based on this suggestion: http://drupal.org/node/320428). You would adjust the view described above, making sure your fields include "Node: Body" since that is what will be in the slideshow.

It's not the most elegant solution but it works. NOTE: Be careful with Input Formats... in my Drupal 5 install, Full HTML and Filtered HTML were adding and tags which created unwanted space above the slideshow images. You can get around this by using a custom Input format that doesn't apply any filters.

Submitted by phil (not verified) on Mon, 02/09/2009 - 16:38

I found this extremly useful but for some reason my slideshow is wanting to show one picture on top of another. It then fades out and back in still showing the picks stacked, as opposed to cycling from one to another. I am DEFINITELY A DRUPAL NEWBIE but I'm catchin on, please help!!!

Thanks

Kris

Submitted by Kristopher Wade (not verified) on Sat, 02/14/2009 - 18:46

Author comment

Kristopher,

Are you using a custom theme? If so, try it with one of the core themes and see if you still have the same behavior. If so, then it is an issue with your theme.

-mike

Hey there Mike. Thanks for the reply. I am using a custom theme. I did not set up the drupal site but I have been brought on to figure out specific little things to do since I'm a pretty quick learner/good researcher sort of guy, someone's givin me a shot on some stuff basically. All of that being said, is there anything you can think that I should do to counteract the problem it's having with the theme? The originator of the drupal site had never dealt with this before either so any help of yours would be greatly appreciated.

Thanks

Submitted by Kristopher Wade (not verified) on Sun, 02/15/2009 - 21:41

Author comment

Kris,

Providing you've confirmed that it is a theme issue (switch the site to Garland and see if the issue still exists - you probably don't want to do this on a live site...), then the first thing I'd probably do is try to figure out what is causing the problem. Try first removing (commenting out) any javascript files theme might be using and see if the problem still exists. You can also try the same with css files.

You should be able to narrow it down this way.

-mike

salim - make sure you have selected the appropriate input format. phil

Submitted by phil (not verified) on Mon, 03/23/2009 - 11:48

I found this very useful and was able to implement it very quickly. It potentially will really save the day for me. However, it renders fine in IE7 and not firefox or safari. The divs :

etc. are empty in firefox and safari but not IE.

This must be a setting somewhere?

Submitted by Ivan T (not verified) on Tue, 03/24/2009 - 12:29

Thank you for the article, it is really nice, and I was able to set up the slideshow at this Spanish mantenimiento informatico site.

However, I also tried to add some text along with the images for the slideshow, and then I discover an annoying problem: when fading text, windows Vista (and certain versions of XP) start pixeling the letters and the whole slideshow looks quite ugly... and there is no workaround, but to get the text out of the slideshow (as part of the image), or to deactivate fading.

Just to share my experience with slideshows and let you know

Hi, I think your article was great. One thing I'd like to do is make the slides link to a node...that is, rather than creating a specific content type for the slideshows, I'd just add a cck field for my content type, and select that in the view. This doesn't work, as it seems Views Slideshow only does things at the node level. I'd really love to find a solution for this. Thank you.

Submitted by Guest (not verified) on Mon, 08/17/2009 - 20:16

Guest, you might want to just invoke the jquery cycle plugin directly, by using a class around the CCK fields you want to target. This is very easy to do by adding a new .js file in your theme directory and adding the js file in the theme's .info file.

Supposing you named the file slideshow.js, and you stored the script inside a directory in your theme folder called "scripts", the line in your .info file would look like this:

scripts[] = scripts/slideshow.js

The contents of the file itself could be very simple, and just use a regular jquery $(document).ready, or use Drupal.behaviors, which is also AJAX-friendly, so it doesn't just run on document.ready

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name