Nov 28 2012
Nov 28
Lullabot logo

Lullabot has trained thousands of Drupal developers & guided the development of some of the largest Drupal websites.

Sep 01 2012
Sep 01

Average: 4.4 (15 votes)


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:

  • 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.

Trackback URL for this post:

http://drupaleasy.com/trackback/525

AttachmentSize 570 bytes 730 bytes
May 17 2012
May 17

Building a slideshow with Views Slideshow 3 and jQuery Cycle

Posted on: Thursday, May 17th 2012 by Sheila Mullins

The Views Slideshow module makes it easy to build a slideshow, once you know all the requirements to set it up. Views slideshow 3.x is only compatible with Views 3.x. It also depends on two other modules: Ctools (not needed for Drupal 7) and Libraries API.

The other key ingredient is the Jquery Cycle plugin, which needs to be downloaded to a libraries folder. Download the plugin from here (latest version) or here (older versions available). The views slideshow project page recommends using version 2.88, and says you will need the jquery_update module in order to use the latest version. I didn't find any initial problems using version 2.999.5 without jquery_update. Whichever version you download, rename the js file to jquery.cycle.all.js (or jquery.cycle.all.min.js if you grabbed a minimized file). If there isn't one already, create a libraries directory in sites/all, and a directory called jquery.cycle in libraries. Drop the js file in there so that you have: sites/all/libraries/jquery.cycle/jquery.cycle.all.js .

Now you should see Slideshow, alongside Grid, HTML list, Table, etc..., as one of the style (Drupal 6) or format (Drupal 7) options in your views. There are flexible formatting options in the settings. The ones I most often customize are the pager and control widgets. Configure Top Widgets or Bottom Widgets depending on where you want to place them.

The Controls widget provides the "previous", "pause" and "next" links. These are just text but can be replaced by images with some css.

The Pager widget is the one to use if you want to have either thumbnails or an icon to represent each of the slides in the slideshow. You can choose whether the slideshow jumps to the represented slide when you click on the thumbnail or icon. To set up the thumbnails, you have to choose which field to display as the pager. I often want to show a generic image, like a dot, just to represent the number of slides in the show. That's where the result counter comes in handy. There is a field available to all views, in the Global group, called "Global: View result counter". It simply outputs the position of the view result. So if I add that field and choose it as the field to use for my pager widget, then I get a list of numbers below (or above) my slideshow. Again, with a little css, the numbers can be replaced with a background image.

There is also a Slide Counter, in case you want to display something like "Slide 5 of 24".

That's it for the basics of creating a views slideshow.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web