Blog / A fully manageable image slideshow for your home page with Drupal

As my first blog post here, I'd like to start by thanking the Agentic team for their great support of the community, and for letting me to take some time on the side to contribute or work on open source projects like FluidGrid or Basic.

Homepage slideshow

This is something that almost every client wants for their landing page nowadays: a nice rotating image slideshow that they can update themselves. And the more I build this, the more I realize that clients expect full control over this, and that most of the solutions out of the box in Drupal aren't as flexible as they could be.

When I say "solutions out of the box in Drupal", I'm talking about multiple modules that when combined with Views allows you to create a slideshow very quickly. The first ones I can think of are:

  • Views Slideshow - Views Slideshow can be used to create a slideshow of any content (not just images) that can appear in a View
  • Views cycle - Views style for using the jQuery cycle plugin.
  • Views Rotator - Views style plugin to display items by rotating through the items displaying one at a time.
  • but so many other exists...

When I want to see a full list of these modules, I practically always go through the same process... As I can never find the comparison page on Google (I must be cursed or something), I google 'katbailey' to find the blog of my friend and ex-coworker Katherine Bailey, where she posted a link to a page she created on, where she compares most of the existing modules that can create a slideshow.

I know, I could also bookmark the page in Firefox, or Delicious... but then I wouldn't be able to talk about Kat's blog, or the amazing work she does for the drupal community :) !

Anyway, after testing ALL of these module, I realized that the only way to get something close to perfection is to not rely on only one module, but to create a system using a combination of several modules working together to create complete awesomeness. The system we're about to build doesn't require any code, and will allow you (or your client) to create new slideshow images, re-order them, crop them, and automatically customize the final rendering of the images. It uses the following modules, all of them available for Drupal 6, and some of them already in core of Drupal 7 (so it might be an easy to upgrade solution) :

  • CCK (content) - to customize the content type
  • Filefield - to be able to use imagefield
  • Imagefield - to add an image field to the content type
  • Imageapi (with GD2)- to be able to use Imagefield Crop and Imagecache
  • Imagefield Crop - to let the user crop the image, also used to restrict the final dimensions
  • Imagecache (optional) - to be able to use imagecache actions
  • Imagecache Actions (optional) - to add a nice overlay if needed
  • Views (with Views UI)- to list the images in a block
  • Views Rotator - to create the slideshow (of course you can also use some other modules, but I like this one as it's very simple.)
  • Draggable Views - to let the user rearange he order of the images.

I know, this is a scary list of modules, BUT, most of them are used in practically all of the websites we build, so these modules are kinda required anyway, whether you build a slideshow or not.

Install modules

The first thing to do is to obviously install all the required modules in your Drupal site. Installing them from top to bottom of my list shouldn't cause any trouble. Not much configuration is needed at this point.

Create the Content Type

First, we're going to create the content type used to create the images to display in the slideshow. It's the simplest content type ever, as it doesn't even require the body, that you can deactivate by deleting the body label when creating the content type

The only thing it needs is a title (not even actually, as you could use this module (Auto Node Title) to avoid having to enter a title), and an imagefield. After adding the new content type in /admin/content/types/add, go to 'manage field' and add a filefield // Image with cropping.

When adding this field, the only things you need to edit is The resolution to crop the image onto, that should be set to the final dimension of your slideshow (I set mine to 620x290) and remember to make this field required, in the Global settings.

I would suggest as a good practice to always set a path for file fields, but this is not mandatory. Once you create this field, your content type is ready to rock! You might want to tweak the display settings, but it's not mandatory either. Now that the content type is ready, we need to create a slideshow to display it, and that's easily done with Views.

Create the slideshow block with Views

I'm assuming here that you already worked with Views, and that you know how to use it. (If not, have a look at the online documentation before going further with this tutorial.)

Create a Node listing views, and add a Block that will list Fields. The only field to add is the imagefield of the content type you just created.

Make sure that you remove the label, and that the format of the image is 'image'.

Set the style of the view to be Views Rotator, or any other rotating plugin you chose. I set the time to 2 seconds so I can quickly check if the block works. Don't add any pager or Ajax, but maybe set the limit to 0 (no limit). As usual, set the filters to only published nodes of the appropriate content type.

Last but not least, set the Sort Criteria to "DraggableViews: Order" (leave it to ascending). This is to order the images depending on the order set by a second view that we are going to create soon. But before, let's save the view and add some images to test it a bit.

Create some images and test the block

To be able to tell if the block works, we need some images. When uploading an image, you should see the imagefield crop in action. Crop the image to your preference and save the node. Do this with few other images.

You might notice that there is a little clearing bug in the cropping tool, that overlaps the preview. I believe that this will be fixed in the next release, and it's not that big of an issue here.

After creating some images, go to the block setting page, assign the view block you just created to the region of your choice. Once assigned, you should see your slideshow block displaying the images with smooth transitions. Until here, nothing magical, but still, it's pretty cool.

Now we can introduce the magic, and have a 're-order' page for our beloved clients.

Create a draggable view to reorder the images in the slideshow.

We need to add a new display in the view we created that will be used to reorder the images. Go back to editing the view and add a page display. Do the following in the right order :

  1. Give a path to the page
  2. Override the Fields (click on "Fields", and then "override", save.)
  3. Remove the imagefield from the field
  4. Add a field title
  5. Add the "DraggableViews: Order" field
  6. Override the styleof the display page to "Draggable Table"
  7. Set the Order Field to "order"
  8. Save the view.

Now if you go to the page view, you should see a draggable table. If you change the order of the nodes, it will modify the order of the images on the slideshow block! So you only need to create a link for your client to this page, and he should be able to re-order the images all by himself at any point.

Adding Awesomeness

As "Po" said in "Kung Fu Panda" : There is no charge for awesomeness - or attractiveness !

You could leave it as is, but here are some minor tweaks you could do to make the system even better.

Improvements on the draggable view: More links and an image thumbnail

You will first need to make sure that you have Imagecache installed. A great feature for the draggable view would be to add a preview of the image you're working with, because if you're like me, you don't always give the best descriptions for the uploaded images, and end up organizing "image 2" and "image 3"... not very meaningful. So the easy thing to do is to create an imagecache profile that would create a thumbnail, and display this in the draggable view.

To do this, go to the imagecache setting page, add a new preset using "scale and crop" to dimensions like 50x50. Once created, go back to your view, and in the page display, add an imagefield using the newly created imagecache preset (leave the label this time). And of course, you can add as many useful fields as you want! I usually add some useful links like "view", "edit", or "delete".

A tiny cup of Nirvana

This last part is my favorite. I've recently played a lot with the great Imagecache Action module, and the possibilities are huge! As a quick example, I'm going to show you how to overlay the slides with a nice shadowing effect.

For this you will need some extra super power: Photoshop. We need to create a transparent image that Drupal will automatically overlay on each slide. For this example, I just created a simple shadow effect, using the 'inner-shadow' effect on a transparent layer. There are billions of ways to do this, so if you don't know how, ask to the closest designer you can find, who'll do this in seconds. The only mandatory thing is that the overlay image needs to be at the same dimensions as the one you set in the imagefield crop settings (so for me 620x290).

Once you have your overlay ready, create a new imagecache preset using "Add Overlay: file image to canvas (watermark)". In the settings, set both positions to 0, and opacity to 100%. Then give the path to your PNG image.

Go back to editing your view, and for the BLOCK display, change the format of the image field to display using the overlay preset you just created. And... well that's it ! Now all your slides should have a nice shadowing effect added to them! And of course, as the PNG is blended to the image, it totally works is all browsers, even the ones not supporting PNG transparency (I won't name any, but you know what I'm talking about...)

It doesn't stop at simple shadowing effects. You can add rounded corners, color shift, black and white etc... Make sure you take a picture of your client when he first discovers what you just built for him :)

N.B. : You can find a nice recipe for the mini cakes used for the slideshow here.


  • Slideshow


    Thanks for the great technique on creating our own slideshow. Very cool! But currently, only the "image" text is displaying for me. I tried to follow your guide step by step but seem to have an issue when creating the view, maybe I am missing something. I am getting an error message after creating my view, I'll keep plugging at it...any advice?



    ****ERROR MESSAGE***

    user warning: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '=' query: SELECT s.uid, v.updated FROM views_object_cache v INNER JOIN sessions s ON v.sid = s.sid WHERE s.sid != 'c4eb947847be8dd0b4b6a904e2e7f0f4' and = 'Slideshow' and v.obj = 'view' ORDER BY v.updated ASC in /home/kind420/public_html/sites/all/modules/views/views_ui.module on line 235.
    user warning: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '=' query: SELECT s.uid, v.updated FROM views_object_cache v INNER JOIN sessions s ON v.sid = s.sid WHERE s.sid != 'c4eb947847be8dd0b4b6a904e2e7f0f4' and = 'Slideshow' and v.obj = 'view' ORDER BY v.updated ASC in /home/kind420/public_html/sites/all/modules/views/views_ui.module on line 235.

  • Is there a way that I can add

    Is there a way that I can add thumbnails to the bottom of the slideshow view?

Sign up for updates