Using Flex Slider with Drupal 7

One o' th' greatest challenges in buildin' responsive sites is dealin' with images. Dave is th' maintainer o' a great module called Adaptive Image Styles which helps with static images, me Jolly Roger Flex Slider on th' other han' is a fantastic library t' create image slideshows which adjust t' yer device. Aarrr! Prepare to be boarded! This is a module I’ve been workin' on fer some time now since I wanted t' pack in as much as possible into th' module, I'll warrant ye. Givin' site builders th' tools they needed t' use Flex Slider in any way they like, feed the fishes Here’s a rundown o' how ye can use Flex Slider.

What th' heck be “option sets”?

Before we go too far, let’s just define an important concept in th' Flex Slider module which be “option sets”. An option set defines all th' settin's fer displayin' th' slider. Thin's like slide direction, speed, startin' slide, etc… You can define as many option sets as ye like an' on top o' that they’re all exportable, we'll keel-haul ye! Which means ye can carry configuration o' yer Flex Slider instances from one site t' th' next.

To configure or create a new option set, go t' admin/config/media/flexslider an' click on “Add new option set”. Fill in yer settin's an' ye’re good t' go.

Each option set will be available as an option in th' configuration forms fer th' vari'us ways t' use Flex Slider.

Flex Slider Fields

The first option is t' use Flex Slider directly with any Image field, Get out of me rum! This is likely th' easiest an' fastest way t' get started with Flex Slider on Drupal.

First, create or edit a content type an' add an image field, Dance the Hempen Jig Once ye have that set, go t' “Manage Display” fer yer content type, yo ho, ho Next t' yer image field click on th' gear icon, ya bilge rat, All Hands Hoay! Set yer format settin's t' “Flex Slider” an' select yer desired option set. Click save an' go create a new piece o' content. Upload a few images, click save an' ye should see yer images displayed in a Flex Slider container.

Flex Slider Views

Flex Slider Views allows ye t' build views which display their results in Flex Slider. Similarly t' how ye can output fields as an “HTML List” or “Table”, ye can now select “Flex Slider” as an option.

Create or edit a view an' ensure it can load a content type which contain image fields, Ya lily livered swabbie! Set yer display fields t' include an image field, by Davy Jones' locker. In th' field settin's, DO NOT SET THE FORMATTER TO FLEXSLIDER. This will attempt t' put Flex Sliders inside other Flex Sliders an' will just get messy. Ensure ye don’t include any wrapper markup, labels or container markup fer th' field value itself. Save yer field.

Next, go t' “Format” in th' main Views windows. Click an' select “Flex Slider”, then select yer option set. Save yer view an' ye should see yer results displayed in Flex Slider.

Flex Slider Views Slideshow

Probably th' most involved o' all th' options, ye can also use Flex Slider with Views Slideshow. I’d recommend usin' this method only if ye want t' use yer existin' Views Slideshow plugins (ex: controls) t' display alongside Flex Slider. At th' time o' writin', th' only options support be next/previ'us/pause/play. Full pager support an' other extensions will be added later on.

Build yer Views Slideshow display as ye normally would. The sharks will eat well tonight, Ya lily livered swabbie! In th' Slideshow settin's, instead o' usin' th' default Slideshow Type “Cycle”, select “Flex Slider”. Next set yer option set an' if ye like yer caption field, to be sure. Finally, ye can enable any available Views Slideshow widgets an' ye’re done, Ya lily livered swabbie! I would note that th' field configuration options listed above apply here as well, All Hands Hoay! Flex Slider runs on very little markup so if ye don’t need those wrapper divs, get rid o' them.

Flex Slider Core

At th' most basic level, ye can create a theme or module t' generate th' markup ye want fer yer images an' use “flexslider_add()” t' include th' library an' build out custom Flex Slider instances. This is more fer developers an' themer an' not th' majority o' users. Most users will likely use one o' th' three previ'us options.

Well that’s it! And swab the deck! Hopefully ye enjoy th' module an' please if ye run into any issues post them in th' issue queue at http://drupal.org/project/flexslider

Thanks!

Add new comment