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 drupal.org'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 drupal.org.
  • 2:33
    You can find FlexSlider on drupal.org
  • 2:35
    at drupal.com/project/flexslider.
  • 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
    github.com/woothemes/flexslider.
  • 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
    A-ha.
  • 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

Loading...

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.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 11-flexslider)