Drupal: Flexslider Module + Views

flexslider-logoIn the past I’ve written about the Views module and its slideshow cousin. The major drawback of the combination of these 2 modules is the lack of direct support for a Responsive Slideshow.

Responsive Web Design (RWD) is about allowing your content to dynamically change to meet viewport constraints from the visiting device. The design of your site works across many devices with the goal of providing the optimal visual experience.

The Flexslider module allows you bundle the Flexslider javascript library into your site. This is a responsive slider for websites — it can adjust to configuration values you set to appear at the correct dimensions for a given viewport.

The Flexslider Views Slideshow module connects all these items together to create a responsive slideshow for Drupal.

In order to use Flexslider and the responsive slider you need to setup Breakpoints for your theme, and also install the Picture module (whew!). These allow you to define Image Styles tailored to each breakpoint of your site for your responsive slideshow. Then you configure the Views flexslider slideshow to use the appropriate Breakpoint Group.

A sample Breakpoints configuration (group) is seen here for my site:

Breakpoints configuration for responsive website.

Breakpoints configuration for responsive website.

The views flexslider slideshow image display settings can be seen here:

Picture display settings for the views slideshow using Flexslider.

Picture display settings for the views slideshow using Flexslider.

By using these modules you get a slideshow which can scale visually to cater to your device’s viewport. An example of a small size and large size of a sample slideshow image are:

Small slideshow image.

Small slideshow image.

Large slideshow image.

Large slideshow image.

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


× 9 = 72

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>