Creating Responsive Image Slider Galleries with Adaptive Images with Drupal 7

Creating a responsive image slider gallery that uses adaptive images with Drupal 7, despite the intimidating title, is actually quite easy to do. In fact, you only need to use two contributed modules to do it.

The first module is Flexslider. This modules is a wrapper for jQuery Flexslider, which provides a simple image slider that grows and shrinks into the space provided so that it renders well in mobile and desktop browsers. One of the draw backs is that the images used are always the full sized images, and therefore regardless of their final size, the full sizes must be downloaded and resized by the browser.

This is where the AIS module comes in. The AIS (Adaptive Image Styles) module provides an image style that generates different image sizes, depending on the width of the browser window (which sizes and when those sizes are sent is configurable in the module). When the browser window is smaller, the images downloaded by the browser will also be smaller.

While, there are many ways to used Flexslider and AIS together, here’s the fastest way to assemble a responsive slider with adaptive images.

  1. Download the Flexslider module.
    • To enable the module, you’ll to also download the jQuery Flexslider library and decompress it into a directory called ‘sites/all/libraries/flexslider’ in your Drupal installation.
  2. Download the AIS module.
    • For the AIS module to work, you’ll need to make a small modification to you Drupal installation’s htaccess file. It’s a small change, and is described in the module’s documentation.
  3. Enable the FlexSlider Fields, FlexSlider, and AIS modules in the modules admin page in your Drupal site.
  4. Go to Configuration -> Media -> flexslider and edit the ‘Default’ option set.
  5. Set the options set to use the image style ‘Adaptive’ and save you changes. Now flexsliders on your site using the Default options set will be adaptive, so lets create a flexslider.
  6. For this example, we’re build a flexslider using FlexSlider Fields. This provides a new display to images fields that displays a flexslider.
  7. Go to Structure -> Content Types and either create a new content type or edit an exiting one.
  8. Add a field to the content type with the field type of ‘image’ and widget ‘image’, and save it. You also need to set the number of values that field can have to ‘unlimited’.
  9. Click the ‘Manage Displays’ tab, and change the ‘Format’ of that field to be ‘flexslider’. The option set ‘Default’ should automatically be choosen.
  10. Don’t forget to save your changes to the display.

Once you’re done that, when you create content with the content type, the images stored in the field you defined will be rendered as a responsive image slider (using jQuery FlexSlider) and the images used will be adaptive.

Add new comment