Drupal Flex Slider Tutorial

Posted in Tutorials

In this Drupal tutorial, we will show you how to use the Flex Slider module to put a slide show on your Drupal homepage.

 

Flex Slider is quite complex because there are a lot of options and it can do a lot of thing.  Instead of giving you a full list of steps which is too long to memorize, this tutorial shows you the reasoning process on how to get modules working.  Hence it may take you down the path of trial and error.

1. We start with an empty homepage on our Drupal site in which we want to add our Flex Slider.  Before doing any major experiments like what we are about to do, it is good to make a full backup (database and files) of the site.

2.  Then download the Flex Slider module from https://www.drupal.org/project/flexslider

We are using Drupal 7 and the version of the module downloaded is 7.x-2.0-alpha3

3. Install the module, by unzipping it, and copying the “flexslider” module to “/sites/all/modules/contrib/”   If you don’t have a contrib folder, create one.  You could have placed it in “”/sites/all/modules/” but many people like to put contributed module in its own contrib subfolder and their custom module in a separate “custom” subfolder.

4. Go to Dashboard -> Modules and see that Flex Slider is dependent on many other modules.  It also comes with an sample implementation which we want to see.

So install all the required modules to make the FlexSlider and Flex Slider Example work.  For us, we have to install “Context”, “Features”, “Libraries”, “Ctools”, “Views”, and “Strongarm”.  I told you, FlexSlider is complex.  If you know drush, you can use that to install.

5.  After you install all these, you can enable the dependencies and then activate FlexSlider and Flex Slider Example in the “Modules” page.  Then I like to click the “permissions” link next to the Flexslider module to see that the Admin has permission to work the module (usually is the case, but doesn’t hurt to check).

6. Let’s figure out how the Flex Slider Example works.  First place to look is at content.  We see that no content was added for us.  If you go to “Content -> Add Content”, we see that there is a new context type “Flexslider Example”.

7.  So click “FlexSlider Example” to add a Flex Slider Example content with title “Example Slideshow”. In the “FlexSlider Example Image” section, we uploaded three images: sun.jpg, reindeers.jpg, and milkbottle.jpg.  If you don’t have your own images, you can use the sample images in “\sites\all\modules\contrib\flexslider\assets\images”

They are of different sizes.  The sun and reindeers are in landscape orientation and the milkbottle is in portrait orientation.  Let’s see what happens.8. The page also has a section for uploading “FlexSlider Example Slideshow”.  Not sure what is the difference yet.  So we upload the same three image to that section as well.

We see that this give us an title to fill in four our image which is to be used for tool tip upon hover.9.  For menu setting, we say provide a menu link (so we can easily find what it put up).  For URL alias, we give “example-slideshow”.  For Publish, we only checkmark “Publish”.  Save configuration.10.  When we view our page in the URL alias, we see our images, but no slideshow.  Note that there is a tool tip on image and a image title.  This indicates that “FlexSlider Example Slideshow” is the one being used.

The browser javascript console show javascript error “undefined is not a function”.

8.  Time to google the error or read the installation instructions to see if we missed something.  And in fact, we did miss the WooThemes FlexSlider library.  The installation instruction says to download from GitHub

And extract its contents to “sites\all\libraries\flexslider”

There is demo of the flexslider library at /sites/all/libraries/flexslider/demo/basic-carousel.html

9. Do “Performance -> Clear All Cache” and clear browser cache.  If it still doesn’t work, turn on the non-minified js file by going to “Modules -> FlexSlider -> Configure -> Advanced Settings -> Enable Debug Mode”.

The example slideshow should be working now.

But the problem is that it takes on the height of the tallest slide and does not auto adjust height, leaving the first two landscape slides with gaps.   So now we know it is best to use slides that have the same dimension or have Drupal resize them (as we shall see later).

10.  Before we make our own slider, there are more examples that FlexSlider provides us to look at.  Go to “Structure -> Blocks” and see that they gave us a “FlexSlider Example” block.   Let’s put this block in the “Content” region …

Go to the homepage and we see that we get some links to examples …

Click through these examples, and you see that in these they were able to adjust the height correctly of our three images.  Click on the link “Basic Slider (Views)” as shown above.  We are going to model our homepage slider on that.

10.  We see that some of the example uses “Views”.  Go to “Structure -> Modules” and enable “Views UI”.  This enables the Dashboard to let you see and edit views.  Go to “Structure -> Views” and you see that they gave use a “Flexslider Views Example”…

11.  Now we know that the Flexslider uses Views.  Click the “Edit” button for that view and you will see how the example views are configured….

Did I mention that FlexSlider is complex?   And this is just for “Basic Slider” setting (which we will just confined ourselves to in this tutorial).

12.  Now that we know how the samples are constructed.  We are going to create our own based on this sample.   The settings that we just saw are “Views” settings.  So we will be using a View.  A view is a showing of some content type.  So we need to create a particular content type for our slider images.  And display those content type as a view.

13.  In the example, the view is querying for “FlexSlider Example Image” content type.  For our slider, we will create a new content type called “Homepage Featured Image” by going to “Structure -> content type -> Add content type” and input these settings …

For the publishing options, we selected only “Published”.  For display settings, we checked nothing. For comments settings, we say no comments.  And for menu settings, we leave everything unchecked.

Click “Save and add fields”

14.  The title field is required.  But we don’t need the body field, so click “Delete” link for that.  And we add an image field.

15.  Click Save.  It will take you to the “Fields Settings”, where we set upload destination to “Public files” and not choose a default image.  Click “Save Field Settings”.

16.  Then we make the image field settings as shown.

Save everything.

17. If you go to the “Manage Display” tab of the Homepage Featured Image content type, you see it is possible to have an image format and an image style if you click on the settings icon.

18.  Creating an image style will enable Drupal to crop the uploaded image to a specific size.  Do this by going to “Configuration -> Image Styles -> Add Style” and give the new style the name “homepage slider image”.  For the style, we want Drupal to scale to width of 800px and then crop from center so the height is 300px.

19. Update the “Homepage Featured Image” with the new image style by going to “Structure -> Content Types -> Manage Display -> Settings icon -> image style” …

20.  Now let’s add our three images to our new Content Type “Homepage Featured Image” that we just created.

21.  Now we need to create a view that queries these three “Homepage Featured Image” content type.  Go to “Structure -> View -> Add New View” with these settings …

22.  Click “Continue & edit” and add the “slideshow image” as  shown…

And set its image style as “homepage slider image” …

Apply to all displays.

23.  Remove the title field by clicking the Rearrange menu as shown …

24. Save the view.   Since we created this as a “block” view.  The block needs to be placed in a region.  Go to “Structure -> Blocks” and remove “FlexSlider Example” from the “Content” region which we had placed in our previous experiment.  Then add “View: Homepage Slider” to the “Content” region, make sure to move this to the top of the content region as shown…

25.  Save and then click the “configure” link for the Homepage Slider.   Set the visibility of the slider block to be on the front page only…

26.  Take a look at the home page and see our slider working.

 

To remove the “Homepage Slider”, enter “<none>” in the Block title for the slider block.  The other stuff can be adjusted and made to look better via the theme CSS.

 

 

---