A Slideshow Feature - part 1

Most of the sites I've developed required at least one slideshow. There are many ways to create a slideshow in Drupal, however one thing you should always try: make it easy to reuse it on other sites. And this is what the Features module is good for.

In this post I'll give a brief overview on how I would create a simple slideshow. I'm not going to give you a step-by-step guide as the goal is to show you what you can automate with Features and drush. In the second part I'll show how to use Features + a drush makefile to make it easy to reuse it on other websites.

1. Creating the slides

I prefer to create a separate node for each slide, this way it's going to be easy to display custom text, etc. on the slides, just by adding some fields to the content type. So the first step is to create a content type and add an image field.

Field configuration

As you can see in the picture above, I store the images in a subdirectory to keep the default files directory clean and also add a file size limit, so that large files will be resized.

Then an image style needs to be created to make sure the slides will be displayed in the right size.

2. Creating the slideshow

Unless the client requires some fancy animation, I prefer to use the Views Slideshow module with the jQuery Cycle plugin. However I don't create the view at this point, as I'm going to use the view that comes with Nodequeue module upon creating queues.

3. Adding slides to the slideshow

This is where it starts to get tricky. You'll probably want a super easy way of adding / removing slides to the slideshow and the order of the slides should also be changed easily.

As mentioned, I'm using the Nodequeue module for ordering the slides. You'll need to create a queue and allow the content type created above to be added to the queue. The order of the slides can be changed easily by going to /admin/structure/nodequeue and clicking on the "View" link for the appropriate queue.

The usual way of adding / removing nodes to / from the queue is to either go to the node edit page and click on the "Nodequeue" tab (node/[nid]/nodequeue) or visiting the admin page at /admin/structure/nodequeue. This is fine for removing the slides for the slideshow.

However when you create a slide, usually the first thing you'll do is to add it to the queue. In that case these extra clicks are a bit awkward, if you are working on a client site, chances are your client will ask if it's possible to automate this. Actually there are two modules that can help auto-add slides to the slideshow:

  • Trigger module: It's only advantage is that at the time of writing Nodequeue integrates with it. However since the sole reason of enabling this module would be to add slides to the slideshow, I usually stay away from it.
  • Rules module: This is the preferred way of solving the task. Rules is a great module, you probably already use it on your site anyway. The only problem is that the Rules and Nodequeue modules don't play well together, you'll need to patch Nodequeue in order to be able to use it with Rules.

4. Creating the slideshow - again

Now since you have created a nodequeue, you should have a view that belongs to that queue. You can clone or edit that view, create a pane display instead of the page or block if you're using Panels, etc. Then you'll simply need to set up the view to display the queue as a slideshow.

+1 Disable access to slide nodes

You probably don't want people to access the actual node page of a slide. You might think it's ok if you don't link to these pages, however Google and spammers could still find them. These pages look a bit weird in Google search results and if you forgot to disable commenting and you don't moderate comments spammers will flood these nodes with links to their sites.

I usually set up a simple redirect for these pages using Page manager in the Ctools module.
(If you are not familiar with Page Manager, here is a great screencast: Learn Page manager!)

Overview - before creating the feature

To sum it up, there are the things I do to create a slideshow:

  1. Create a content type and add at least an image field
  2. Create an image style
  3. Download and enable Ctools, Views, Views Slideshow, Nodequeue, Rules
  4. Patch the Nodequeue module to work together with Rules
  5. Download the jquery cycle plugin
  6. Create a nodequeue to list slides
  7. Create a rule to auto-add slides to the queue
  8. Enable the Views Slideshow: Cycle module, as I forgot this in step 3 :)
  9. Configure the nodequeue view in Views

That sounds like quite some work. In the next part I'll show you how you can do all this in 1 minute.


Drupal theming and sitebuild

  • PSD to Drupal theme
  • Installing and configuring modules (Views, CCK, Rules, etc.)
  • Theming modules' output

Drupal module development

  • Almost every site needs smaller modules to modify HTML output or override certain default functionalities
  • Developing custom modules

From the blog