Anatomy of a Full-Featured, Responsive Slideshow

Published September 1, 2012


Slideshow screenshotHow 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.
Field Redirection settings 

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.

Slide sorter

The ability for site admins to pre-load future slides

Unpublished slidesWhile 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

Slideshow fieldsIt 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.

Themed fields

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.

Responsive example

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:

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.

Comments

Nice! But isn't using nodes as slides getting old?

We used to take this same approach, almost exactly, to create and manage slideshows. However, we've found that we can slim down the build and avoid the "nodes as slides" issue by leveraging the Beans module and custom view modes.

In short, we create a new Bean type called "slideshow." It contains a field collection for individual slides, as well as their captions and links. (If those slides need to be reused across various slideshows, we leverage the Media module with fielded image entities rather than the field collection approach.)

Then, either create a new view mode or alter the Bean's output (depends on the situation...) to display the contents of the field collection with Flex Slider.

Right now, there's a lot of work being done to provide a more abstract slideshow implementation on top of the Bean module. (See: the BeanSlide module.) However, we find that there's such variation on how captions should work, links, etc., that it's often easiest just to reuse code snippets from one custom implementation to another. (I wish that I could point to a few example sites, but we've got half a dozen sites using this approach that are still a few weeks out from launching...)

Great tutorial! As always, DrupalEasy makes Drupal easy!

I have to agree with Sean; I only use nodes as slides if the nodes were already created for some other reason (the slideshow displays product names and titles).

Shameless plug, try the Nivo Slider module for a responsive, non-node slideshow solution with a very simple admin interface that has all the features of the slideshow mentioned in the article while only requiring one dependency, the Libraries module.

This is not responsive but rather adaptive. You would call it responsive if the size of image is also reduced for mobile phones and tablets using imagestyles presets.

Submitted by Den (not verified) on Sun, 09/02/2012 - 09:09

Have you tried the Image URL Formatter module (http://drupal.org/project/image_url_formatter)? It adds a URL field to insert a link directly with the image itself. I recently implemented the it with amazing success on www.islandresortandcasino.com. I was able to make the view for it in just a few minutes without having to create a new content type. And since I just created multiple images for the input, sorting was done easily on the page's node.

Outside of that, the Field Collection module (http://drupal.org/project/field_collection) would be the way to go if you needed more data than just an image and URL. It allows sorting within its container node so no additional grouping modules would be necessary.

[...] favorite topic.'+ ''+ ''+ ' See How'+ ''+ '', fixedCouldNotClose: true }); }, 3000); }); drupaleasy.com - Today, 2:16 AM [...]

Agree with some of the comments made.
Here's another variant of a slide show that does not need nodes, just a Field Collection field on a single node.

From the project page of http://drupal.org/project/field_slideshow :
Compared to Views slideshows, building the slideshow from multiple nodes, this module builds it from a single node, with a multi-valued Image/Media/Field Collection field.

One of the most painful things in making slideshows, and one that frequently returns for me, is having a little thumbnail caroussel below the actual thumbnails. That caroussel autoscrolls as the slideshow continues, and clicking on a thumbnail jumps to that picture.

I've wasted many hours over and over to get that in. Getting the right code, having the whole thing themeable (right now, for Drupal 7, I've got a hacked version of JCaroussel, because otherwise I couldn't take some elements -- like prev / next buttons -- out).

In total, it took me about a week to figure out how to do this in Drupal 6, and another week to get this working in Drupal 7. And that's with the hacking in the result. It's one of those basic things you can expect having to add to a slideshow, yet one of the hardest things I've had to do in Drupal in the couple of years I've worked with it.

Submitted by Raf (not verified) on Mon, 09/03/2012 - 04:28

Mike,

THIS AWESOME !!!

I would love it if u guys had a page that listed more of your features.

Not a feature server but just a place that has features to download.

For me I this article along with the feature makes it easier to learn as i can read your reasonings for doing so then i dive into the feature and see the configurations.

DRUPAL EASY ROCKS !!!!

Submitted by Kaleem (not verified) on Mon, 09/03/2012 - 10:52

Thank you so much, Mike! I've been struggling with the photo gallery issue for weeks, if not months, mostly because I don't want to end up with hundreds of nodes, want full caption support (not just alt/title tags) and, I want it to be adaptive. (using AIS module for that) I'm glad to see things moving in that direction.

also, Thanks Sean. I will check out the beans module too.

Submitted by Dan Murano (not verified) on Mon, 09/03/2012 - 11:30

The ability to pause a slideshow using the keyboard is an important accessibility feature. Most government sites require a 'pause' button that can be triggered by tabbing using the keyboard.

Kim

Simultaneous, independent convergence. This is nearly exactly the same formula we have been using at DFM with one exception. I throw in custom PHP code to overwrite the link url if an optional link field has been populated, otherwise it behaves as one would expect linking back to content.

Thanks for pulling it all together as a Feature. Will check out the Field Redirection alternative!

Another challenge -- which need custom coding -- is to create a slideshow with left / right pager and scoll the slides left or right depending on the pager was used.

Hi,

Thanks for the awesome post.
Is it possible to get rid of that circle bullet for direct navigation and use something like title or combination of thumbnail and title.

CIsSharp,

I believe those settings are in the js file. I have mine set to numbers, but have not yet gotten them to change or highlight when hovering over them, and the only way (for me so far) to even know that they're clicked is when the photo changes.

You can do thumbnails too, but I don't think that's documented too well. I think I saw that on the Flexslider site.

Dan

@ultimike you are right. But it is so obvious to use views slideshow when creating, well... slideshows or rotating banners I forgot that we have another tools too :)
It would be the best to have a carousel transition type in views slideshow. :)

Hi,

Great article, I will definitively give it a try. I am already using Flexslider + views slideshows + AIS. The only thing I would say is missing in many slideshow implementation is an option to load the images on demands. It all work fine when there is just couple of slide to show, but for a large gallery, let say 30-40 Hi res images, it's really king of slow to loadup all the images at the beginning. Is there any solutionsyou would recommend to do that ?

Thanks

Submitted by arcall (not verified) on Sat, 09/15/2012 - 19:16

Thanks for publishing this article. Looking forward to your presentation at Druapl Atlanta.

Submitted by andrew (not verified) on Tue, 09/25/2012 - 11:34

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

Name
CAPTCHA