Anatomy of a Full-Featured, Responsive Slideshow

How many times do you find yourself building the same bit of functionality on Drupal sites for various clients? Whether it be a photo gallery, multi-user blog, or slideshow, as Drupal site builders, we often find ourselves re-inventing the wheel. Personally, I’ve been asked to build slideshows on many client (and volunteer) sites that I’m involved with. Over the years, I’ve developed a recipe for a powerful and flexible slideshow that often exceeds the needs of all but the most particular clients. I recently added the ability for the slideshow to be responsive, and now seems to be a good time to share what I’ve done. At the end of this post, I’ve provided the slideshow as a Features that you can implement on your sites.

So, what makes a full-featured slideshow? Here’s my take on what’s essential:

• The ability for any slide to be linked to any URL.
• The ability for site admins to rearrange the order of the slides.
• The ability for site admins to pre-load future slides.
• The ability to tweak the settings of the slideshow data.
• The ability to theme the slides to have HTML titles, descriptions, and attribution information appear as desired.
• The ability for the slideshow to render properly across a wide-range of devices.

Let’s take a closer look at each of these features and their implementation details.

The ability for any slide to be linked to any URL

A common method for creating a slideshow is to simply add a "slideshow image" field to a node type, then filter on that field in the slideshow view. This method has obvious disadvantages - the main one being that slideshow slides can then only be linked to nodes. In a full-featured slideshow, we want the ability for the slideshow slide to be linked to any URL - either internal or external to the current site. This is accomplished by creating a separate "slideshow slide" content type with title, description, and source/attribution fields to describe the slide. Then, with the addition of a URL field (via the Link module) we can also specify where the slide leads to when clicked. The handy Field Redirection module handles the automatic redirection to the URL specified. This custom content type then allows the site administration to create slides that can direct the user to anywhere on (or off) the site.
 

The ability for site admins to rearrange the order of the slides

Understandably, site administrators often want to be able to control the order of the slides as they’re displayed to their users. I used to utilize the excellent Nodequeue module for this, but I’ve recently switched over to the slightly easier-to-use Draggable Views module. This method allows me to create a block that I can place on the Administrative Dashboard that allows the site administration to quickly see all of the current slides, as well as re-order them as often as they’d like to.

The ability for site admins to pre-load future slides

While not a breakthrough feature by any stretch of the imagination, most site administrators often request the ability to pre-load slides that they’re planning on publishing in the future. Since we’re utilizing a custom content type, site administrators can easily use Drupal core’s "published" flag to control this. By creating an "unpublished slides" view block for the Administrative Dashboard, site administrators can quickly see all unpublished slides. By leveraging the Administrative Dashboard, we can give site administrators a complete overview of their slideshow slides.

The ability to tweak the settings of the slideshow data

It is common practice when creating slideshows in Drupal to use one of the many Views display plugin modules. My module of choice is the Views Slideshow module combined with the Flexslider library module (more on this later.) Views Slideshow is a rock-star module in the Drupal community, having well over 120,000 reported installs. By integrating with Views, the site administrator has complete control over which fields are displayed along with the slideshow image. I often include fields like the title, description, and source/attribution information for the image.

The ability to theme the slides to have HTML titles, descriptions, and attribution information appear as desired

Once the desired data is present on each slide, custom CSS can then be applied to the slideshow to overlay the data on the slideshow image, or have it appear virtually anywhere on the page, transitioning in-sync with the slideshow. Your site’s custom CSS must take into account the responsive nature of the slideshow and adapt gracefully. As an example, just 41 lines of CSS were used to style the title, description, and source field as displayed below. The CSS used is attached to the bottom of this post.

The ability for the slideshow to render properly across a wide-range of device

Finally, with the addition of the Flexslider library module, we add responsive hotness to the slideshow. The Flexslider library allows the slideshow to stretch or shrink to fit the width available to it, making it a responsible part of any responsive theme.

Test Drive

Rather than providing step-by-step instructions to recreate this type of full-featured slideshow, I’ve decided to share it by exporting it as a feature. You’ll need a number of modules in addition to the DrupalEasy Slideshow feature download from Drupal.org, but once you have them, you should just be able to go to admin/structure/features and click to enable the DruaplEasy Slideshow. Here’s a list of the modules you’ll need:

• Flex Slider - be sure to also install the Flexslider jQuery plugin in your sites/all/libraries directory according to Flexslider’s installation instructions.

If you're familiar with Drush make, feel free to utilze the .make file I've attached below and save yourself a bunch of time.

What's missing?

Are there any options missing from this slideshow that you consider part of full-featured slideshows that you build? If so, let me know in the comments and I’ll consider adding them to the feature.