Heard about DrupalEasy Academy Career Training? Learn more about our 10-week quickstart Drupal Career Starter Program.
Interested in learning more about Drupal, but can't find the training you're looking for? Help us help you by letting us know what workshops interest you. Take this short survey to let us know!
DrupalEasy is the collective expertise of Ryan Price and Michael Anello, who joined forces to provide training and consulting services worldwide. Read all about them and what they can do.
Drupal is a free, super-powerful content management system for sites that require information posting and collection, including blogs, forums, videos, photos, and databases of information. We think it is the best platform available. Here's why...
More and more savvy organizations are going with Drupal for content management, and its no mystery why. It’s free, flexible, and easy to maintain for small or large volume sites. Learn more...
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:
Let’s take a closer look at each of these features and their implementation details.
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.
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.
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.
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.
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.
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.
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.
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.
We are meticulous experts in Drupal and how to leverage the web for business, outreach and data collection. DrupalEasy Consulting focuses on timely solutions that work for our clients and their end users.
Learn more about DrupalEasy Consulting.
DrupalEasy Training gets you up to speed fast. Standard workshops are available throughout the US, and can also be presented as association, user group and corporate/organization customized training events. Check out our upcoming schedule as well as our past workshops.
Learn more about DrupalEasy Training.