Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Creating Responsive Slideshows in Drupal with FlexSlider

Video loading...

  • 0:01
    Getting Started With Responsive Web Design In Drupal
  • 0:03
    Creating Responsive Slideshows in Drupal with FlexSlider
  • 0:05
    with Amber Himes Matz
  • 0:08
    Our max-width trick is working wonders
  • 0:11
    on our embedded images and videos, but sadly, the images
  • 0:15
    in our Views Slideshow are still breaking out of their containers.
  • 0:19
    This is due to some inline styles provided by Views Slideshow that
  • 0:22
    are declaring static widths based on the size
  • 0:25
    of our admittedly huge slide images.
  • 0:28
    This is effectively overriding the flexible region that
  • 0:31
    contains our slideshow and ruining our fun.
  • 0:34
    But instead of pouting, let's turn back
  • 0:36
    to's contributed modules and find a slideshow that
  • 0:40
    integrates with Views and provides a responsive slideshow experience.
  • 0:44
    I found a popular favorite in the form of FlexSlider module.
  • 0:49
    In this lesson, we'll install and enable FlexSlider, including
  • 0:52
    the JavaScript library that it relies upon.
  • 0:54
    Then we'll update our view to use FlexSlider instead of Views
  • 0:58
    Slideshow, give it a test run, and see how it works.
  • 1:01
    In no time, we'll have a refactored views-based slideshow that's
  • 1:05
    responsive and doesn't break out of our flexible layout.
  • 1:10
    I'm viewing the home page of our case study website
  • 1:13
    in the responsive design view of Firefox,
  • 1:15
    and I want to focus on our slideshow.
  • 1:18
    Now, in the last lesson, we added max width 100%
  • 1:22
    to our images, embed, iFrames, and objects.
  • 1:25
    So all of our very common media selectors have a max width of 100%.
  • 1:30
    This enables our images and these other selectors
  • 1:34
    to scale with our flexible containers.
  • 1:38
    The problem is with our slideshow.
  • 1:41
    Our slideshow is using the Views Slideshow module.
  • 1:43
    And as of the time of this recording,
  • 1:46
    Views Slideshow inserts some static pixel-based widths inline.
  • 1:52
    So in this inline style of this container of the slide,
  • 1:57
    we have this inline style that sets the width to 938 pixels.
  • 2:02
    So our max width is being applied.
  • 2:05
    It's just that our container is no longer flexible.
  • 2:08
    So it's breaking out of our layout, and it's not
  • 2:12
    honoring the flexible percentage-based containers
  • 2:15
    that we set up in our 960.css file.
  • 2:19
    So instead of fighting against Views Slideshow,
  • 2:22
    I'm just going to swap out the module that I'm using
  • 2:24
    as the display plug-in for Views and use FlexSlider instead.
  • 2:29
    So let's go take a look at FlexSlider module on
  • 2:33
    You can find FlexSlider on
  • 2:35
  • 2:40
    And to install FlexSlider, we can scroll down
  • 2:43
    to the Installation section on the project page.
  • 2:45
    And we're going to need Libraries API, which I already have installed
  • 2:49
    due to some other modules that I have going,
  • 2:51
    and we need the FlexSlider library from
  • 2:54
  • 2:58
    So I'm going to go ahead and download this library here
  • 3:01
    before I install the module with Drush.
  • 3:04
    On the GitHub page, in the sidebar, I'm
  • 3:06
    going to click on the Download Zip button.
  • 3:10
    And I'm going to save this to my sites/all/libraries folder.
  • 3:16
    I've unzipped the file
  • 3:18
    and now, I need to rename this FlexSlider-master folder
  • 3:23
    to all lowercase "flexslider" with no spaces and no capitalization.
  • 3:30
    This will ensure that the module can find the library and the files
  • 3:33
    that it needs inside of it.
  • 3:35
    Now, I can get rid of this zip file.
  • 3:39
    Now, I'm going to download FlexSlider using
  • 3:41
    Drush by typing "drush dl flexslider."
  • 3:45
    This will download FlexSlider to my sites/all/modules directory.
  • 3:49
    Since I want to integrate FlexSlider with my view,
  • 3:52
    I'm going to enable the FlexSlider Views module.
  • 3:54
    This will also enable the dependency FlexSlider,
  • 3:58
    which is the main module.
  • 3:59
    Now, both FlexSlider Views and FlexSlider are enabled.
  • 4:02
    You can also enable these through the module page
  • 4:05
    in the administrative UI,
  • 4:07
    but if you have Drush, this can be a quicker process.
  • 4:10
    Now, let's return to a browser where I'm logged in,
  • 4:14
    and now I'll edit the view that is powering this slideshow.
  • 4:19
    So I'm going to go to Structure, Views,
  • 4:21
    and I'm going to edit the Home slideshow.
  • 4:24
    Now, currently, the format being used
  • 4:26
    is slideshow, which is powered by the Views Slideshow module.
  • 4:31
    So I'm going to change this to FlexSlider and apply all displays,
  • 4:34
    since I just have the one block here.
  • 4:36
    There's some additional settings that I'm not going to worry about
  • 4:40
    because I'm just going to use the defaults,
  • 4:42
    but there are some extra options in FlexSlider
  • 4:45
    that you may want to explore.
  • 4:47
    All right.
  • 4:48
    Now, we have FlexSlider enabled.
  • 4:50
    The picture is quite distorted, but let's go ahead and save this
  • 4:55
    for now and see what we need to change.
  • 4:58
    Now, our FlexSlider slideshow is stretching out the image
  • 5:03
    to the full width of the container.
  • 5:05
    So it's a responsive slideshow, and it's
  • 5:08
    going to fill the container that it's in.
  • 5:10
    We also have some residual extra border issues happening because
  • 5:15
    of the way that we styled the other slideshow,
  • 5:18
    and we used a selector that was based on the name of the view.
  • 5:22
    So that's still being applied.
  • 5:23
    So we have some stretching issues and some distortion
  • 5:27
    because our original images weren't big enough,
  • 5:30
    and FlexSlider is trying to be helpful by providing
  • 5:33
    this responsive slideshow that's filling up the entire container.
  • 5:37
    But let's inspect this slide and see what else is going on
  • 5:39
    and what kind of cleanup we need to do here before we decide if this is
  • 5:43
    really a problem we need to address.
  • 5:45
    I'm actually going to take a look at this slideshow
  • 5:48
    in the responsive design view of Firefox.
  • 5:51
    And as you can see, it really sized it up.
  • 5:53
    So if I inspect this element, you can
  • 5:55
    see that the image width is 920.
  • 5:58
    But if I inspect the layout, it's really
  • 6:00
    being stretched out to 1,241 pixels.
  • 6:04
    So unless I upload a larger image that will fill the maximum width
  • 6:10
    of the container, which is quite large,
  • 6:13
    I'm always going to have this distorted image.
  • 6:17
    Now, that is certainly a problem that can be solved.
  • 6:20
    We could set a maximum width of this whole page container
  • 6:25
    so that it doesn't exceed a certain width,
  • 6:28
    and we could ensure that the images that are uploaded to the slideshow
  • 6:32
    all have a uniform dimension and are no smaller
  • 6:37
    than the maximum width of this container.
  • 6:39
    But I don't have any of those qualifications in place.
  • 6:43
    I don't have a maximum width.
  • 6:46
    This image is just going to get bigger and bigger and bigger
  • 6:49
    with the larger and larger screens.
  • 6:51
    So what I'm going to do instead is I'm
  • 6:53
    going to change where this slideshow is placed.
  • 6:57
    Instead of placing it in a full-width, 12-grid container,
  • 7:02
    I'm going to put it in a Grid 6.
  • 7:05
    So the Market Locations and the Market Map blocks
  • 7:09
    are currently in Grid 6.
  • 7:10
    I'm going to move the Schedule Table and the slideshow
  • 7:14
    both into Grid 6, which is the footer left and right regions,
  • 7:18
    so that we don't have this distorted image problem in our slideshow.
  • 7:23
    So let's head back over to Chrome where I'm logged in,
  • 7:26
    and I'm going to go to the Blocks administration page
  • 7:29
    by navigating to Structure, Blocks.
  • 7:32
    And here are our blocks in the Footer regions,
  • 7:35
    and we have several Footer regions-- Footer left
  • 7:37
    and right, which are the Grid 6s, and the Footer
  • 7:40
    bottom, which is the Grid 12s.
  • 7:42
    So I'm going to move the Market Music Schedules block, which
  • 7:45
    is that table of Music Schedules, below the Market Locations,
  • 7:50
    in the Footer left region.
  • 7:52
    Then I'm going to move our slideshow into the Footer right,
  • 7:55
    right below the Market Map.
  • 7:58
    Now, I'll save our blocks and navigate back to the home page.
  • 8:04
    Now, our slideshow is going to be much less likely to exceed
  • 8:09
    the width of our image, which is 920.
  • 8:13
    We can keep everything the same.
  • 8:15
    There's still a little bit of distortion,
  • 8:18
    and so maybe what we will need to do is play with the height
  • 8:22
    a little bit so that there isn't that distortion.
  • 8:24
    But first, let's inspect this page and see how our Grid 6s are
  • 8:28
    responding as the viewport narrows.
  • 8:31
    So I'm going to head back over to Firefox
  • 8:33
    in a responsive design view.
  • 8:35
    I'll refresh the page.
  • 8:37
    We've got our four Grid 6 regions here,
  • 8:40
    and let's see how they do when I resize this viewport.
  • 8:44
    Things are starting to get a little bit squishy and distorted
  • 8:48
    as I narrow this viewport.
  • 8:51
    Our table is starting to be quite stubborn,
  • 8:54
    and now our slideshow is overlapping the table.
  • 8:58
    Our slideshow is responding in width,
  • 9:01
    but the height is very much distorted,
  • 9:04
    and things aren't looking right.
  • 9:06
    Our map is doing OK, but it's really starting
  • 9:09
    to get too narrow to be comfortable.
  • 9:12
    So whereas our sidebar is doing fine, our content region
  • 9:17
    and our sidebar, our header, our navigation are all doing fine.
  • 9:22
    Our Grid 6s seem to cry out for a new media query that addresses
  • 9:27
    this new breakpoint because we are definitely
  • 9:30
    seeing some breaking happening here.
  • 9:32
    So if I widen this out a little bit, once I get to--
  • 9:36
    and I'm looking at this dimension box
  • 9:39
    right here that's changing as I'm resizing this viewport.
  • 9:43
    Once I get to around-- I don't know-- 1,260 or so,
  • 9:48
    that's when the table starts to shift.
  • 9:51
    Things start to shift and get a little squishy and uncomfortable.
  • 9:55
    So let's set a new breakpoint of 1,260 for our Grid 6s.
  • 10:01
    In our 960.css file, we already have some media queries set up
  • 10:06
    to respond to the container, the content
  • 10:09
    containers, and the sidebar.
  • 10:12
    So we have that all set up, but we really
  • 10:14
    have a simplistic set of media queries right now.
  • 10:17
    And in our mobile and small tablet media query with a max width of 750
  • 10:23
    pixels, we've taken all of the grids and just expanded them out
  • 10:28
    to virtually 100%-- 97.91666%-- and that's because of the gutters.
  • 10:34
    And we're just stacking them all.
  • 10:37
    So on the tablet and desktop, we also
  • 10:41
    have a media query for tablet and desktop, which just picks up right
  • 10:45
    where the small mobile media query left
  • 10:49
    off, at a minimum width of 751 pixels.
  • 10:53
    And right now, our Grid 6, which is right here, our container 12 Grid 6
  • 11:00
    has a width of 47%.
  • 11:03
    What we want to do is add an additional breakpoint
  • 11:06
    at 1,260 pixels.
  • 11:09
    So in between 751 and 1,260 pixels, we want this Grid 6 to actually
  • 11:16
    expand out to the full width of the container.
  • 11:20
    So we're going to change this from 47.91666% to 97.916%.
  • 11:28
    And this is going to expand our Grid 6s out
  • 11:31
    to the full width of that container 12
  • 11:34
    and stack them up so that we don't have
  • 11:37
    that uncomfortable squishiness that we currently have.
  • 11:41
    Now, we need to add an additional media query
  • 11:44
    to take care of the 1,260 and up, where we do want our Grid
  • 11:49
    6s side-by-side as they were before.
  • 11:51
    Now, I'm going to find the end of my tablet and desktop media
  • 11:54
    query and start a new section here and a new media query.
  • 11:59
    So we'll do "@media screen" and a min-width of 1,260 pixels.
  • 12:07
    Open up the curly braces, and we're going
  • 12:09
    to target our container 12 Grid 6s.
  • 12:13
    Open up another pair of curly braces,
  • 12:15
    and now we'll put in our width of 47.9166666%.
  • 12:22
    I'll save this and head back into Firefox,
  • 12:25
    and let's refresh the page.
  • 12:28
    Now, we have Grid 6s side-by-side.
  • 12:32
    And if we keep an eye on our dimensions in the corner
  • 12:35
    here, as I resize and we get close-- here's 1,260.
  • 12:40
    Now, our Grid 6s extend the full width
  • 12:44
    of our container, which is about 97%.
  • 12:49
    So we've got full-width market locations, full-width schedules,
  • 12:53
    full-width map, and full-width slideshow,
  • 12:56
    and our slideshow is actually faring pretty well, even
  • 12:59
    at this full width.
  • 13:02
    And we don't have the distortion that we had before.
  • 13:04
    And we have a little bit of a distortion
  • 13:06
    here, so we need to get to the bottom of that.
  • 13:08
    Now, if we take a look at our site at a phone width,
  • 13:12
    everything is stacking up pretty well.
  • 13:14
    Except our table is not stacking up very well,
  • 13:18
    and our slideshow still needs a little bit a love here.
  • 13:22
    So let's inspect this and see what we need to do.
  • 13:25
    We have the max width, but the height is really out of whack.
  • 13:30
    We also have this extra border here, and it looks like we've
  • 13:33
    got a selector of the view home slideshow targeting the image.
  • 13:38
    We've got this border.
  • 13:40
    Let's get rid of that.
  • 13:41
    And this background, let's get rid of that.
  • 13:44
    We also have this fixed padding right here.
  • 13:48
    So we can actually get rid of that altogether.
  • 13:51
    We don't need that anymore.
  • 13:53
    And what if we added, to the selector, a height of auto?
  • 13:59
  • 14:01
    That helps a lot.
  • 14:03
    So now, our slide isn't so distorted,
  • 14:07
    especially when it comes to the width.
  • 14:09
    Let me expand this viewport out.
  • 14:12
    And now, even at any width, that slideshow
  • 14:18
    is looking proportional and not distorted at all.
  • 14:23
    So that's what we needed to do was set a height, rather, of auto
  • 14:27
    to our images in our slideshow.
  • 14:30
    Now, when we narrow this down to the phone width, what's breaking
  • 14:35
    is our table, but our slideshow is no longer distorted.
  • 14:41
    It's sizing with the window, and we can see the full image
  • 14:46
    without any distortion at any width or height for that matter.
  • 14:51
    So in this lesson, we swapped out the module
  • 14:54
    that we're using for the slideshow from Views Slideshow to FlexSlider.
  • 14:59
    We needed to set the height to auto in our images for our slideshow
  • 15:06
    so that we didn't have any distortion.
  • 15:09
    We noticed that our slides could get really, really big in our container
  • 15:13
    12, so we moved our schedules and our slideshow
  • 15:18
    to a new region, which is only a Grid 6.
  • 15:21
    And that Grid 6 isn't going to go any wider than 1,260 pixels
  • 15:28
    because we added a new breakpoint.
  • 15:30
    So now, our slideshow has a cozier home.
  • 15:34
    It's a little more comfortable, given the size of the images.
  • 15:37
    If we wanted to pursue a full-width slideshow at all times,
  • 15:42
    then we would need to really rethink the dimensions and cropping
  • 15:46
    of the images that we originally uploaded and maybe
  • 15:49
    do without an image style altogether and just
  • 15:52
    control it in pre-processing of the image.
  • 15:56
    There are other image styles that come with FlexSlider,
  • 15:59
    but I was just able to use the original one that I
  • 16:02
    had set up before without changing it.

Create Responsive Slideshows in Drupal: FlexSlider


Our image gallery plugin has long been known to be barely navigable on a small screen. Let’s fix our images and replace our photo gallery plugin with a responsive image slider that will work on small to large screens. We'll swap out Views Slideshow in favor of FlexSlider in this lesson.

Log in or sign up to download companion files.
Additional resources: (checkout branch 11-flexslider)