Using the Views Slideshow Module in Drupal 7

Slideshows are one of the most popular things that people want on their website and the Views Slideshow Module is the most popular way to create slideshows in Drupal.

So, it's no surprise that Views Slideshow is one of the most popular Drupal modules.

Creating a Views Slideshow isn't too difficult, but there are a quite a few steps to go through. If you're a beginner, this will be a complete installation guide.

In this tutoirial we're going to build a slideshow that will show rotatings testimonials in a block on our site.

Step 1. Install the necessary modules and files

To start, you're going to need the following 5 or 6 modules to use Views Slideshow. Install and enable all of them.

• Views


• Views Slideshow


• Chaos tool suite


• Libraries


• Link Field


• Token (optional)

You'll also need to install jQuery which will make the slideshow work.

• Be sure the Libraries Module is installed.


• You need to install the jQuery cycle .js file.The process is a little different than a module installation. Start by saving the file from here: http://malsup.com/jquery/cycle. Click the download link on the site and it will open the actual file. Save the file to your computer.


• Login to access your Drupal site files and browse to the /sites/all/ folder. Create a directory here called /libraries/.


• Now create another folder inside /libraries/ called /jquery.cycle/. The full path to this folder will be /sites/all/libraries/jquery.cycle/.


• Copy or upload the file jquery.cycle.all.js to the same folder. The full path will be /sites/all/libraries/jquery.cycle/jquerycycle.all.js.

Step 2. Create an image style for the thumbnails

• Go to Configuration > Image styles > Add style.


• After you click Add style you will be prompted to give the style a name. Name the new style testimonial_thumbnail.


• Choose Resize from the Effects menu. Click Add.

Set the size of the testimonial_thumbnail. Make it small, 75x75 should work. Click Add effect.

Step 3. Create a new content type

Go to Structure > Content types > Add new content type.

Create a content type called Testimonials. Click Save and Add Fields when you are finished.

Step 4. Add an image field

• Add a new field named Testimonial Image.


• Add the field name testimonial_image.


• Choose Image as the type from the drop down,


• The form element will select itself.


• Click Save three times until the field is created.

Step 5. Add a link field

• Add a new field named Testimonial Links.


• Add the field Name testimonial_link.


• Choose Link from the dropdown.


• The form element will select itself.


• Click Save.

You can repeat these last two steps step for as many fields as you want to add to the Testimonial Content Type. I'm going to add one more called Signed. It will be a text field where I can put the name of the person who left the testimonials.

Step 6. Manage the display of the fields

Click Manage Display to edit the way the fields are displayed.

We're going to specify the image style to be used with this content type.

• Adjust the positioning of the fields as needed using the drag and drop method.


• Click the cog icon on the Testimonial image row.


• Select the image style from the dropdown menu.


• Choose testimonial_thumbnail. This is the image style you created back in Step 2.


• Choose the link destination. (in this picture it's hidden below the style drop down.) You probably want it to link to the content.


• Click update.

• Make any other changes to other fields you want.


• Click Save at the bottom of the screen.

Step 7. Define the elements that make up the teaser

• Look for the Teaser button toward the top right of the window. Click this to set the length of Teaser text and other details.


• The Teaser settings show you that only 600 characters will be used for the teaser text. To change it click the cog icon.


• Also, make sure the fields Signed, Testimonial Link and Testimonial image are set hidden in the teaser.

• Click and drag the plus sign next to Testimonial Image.


• Move it above the Hidden Field label so it will be part of the teaser.


• The hidden fields will show in the full testimonial, but not in the teaser.

Now you have finished creating the fields and display for the Testimonials content type. Now we need to go and work with Views to complete the slideshow.

Step 8. Add the View

• Go to Structure > Views > Add a new view.


• Enter the settings below. Make sure to define the view as a block.

1. Name it Testimonial Slider.


2. Check Description and give it a description.


3. Choose the to Show Content and then the content type you want to show.


4. Uncheck Create a page.


5. Check Create a block.


6. Type Testimonial Slider into Block Title.


7. Choose the Slideshow Format made up of teasers.


8. Decide the number of items to show on the page. Use "0" if you want to scroll through all testimonials. Otherwise it will loop through 5 of them.


9. Click Continue & edit

Step 9. Edit the View

• Click on None under Block Settings.


• Give your block a name.


• Click Settings under FORMAT and next to Slideshow.

Scroll through the options and make changes. From here you can add classes, choose the transition type for the slides and and Internet Explorer tweaks. Take some time to look at all your choices. This is where you will control the look and performance of the slides. Be sure to save any changes you make.

 

Step 10. Publish the block

• Go to Structure > Blocks.


• Your new block will now show in the list of disabled blocks, and you can add it to a region like any other block. Add it to the region of your choice. I added it to Sidebar second.

Step 11. Add some testimonials

Now let's create some content and try it out. Get some sample images to use for the thumbnails and create some testimonials.

TIP: if you want to quickly create sample items with Lorum Ipsum text, you can use a module called Drupal Ipsum, which allows you to just check a box to fill the article with dummy text when you create it. That's what I used here.

Go to Content > Add content.

Choose Testimonials and create several so you can get a good idea of how the scroller and the block appear.

Step 12. Go to your homepage and look at the result

Your block should now show on your site.

Step 13. Edit the slideshow

Now that we can see the block in action, we may want to make changes. Here's how to make them:

• Mouse over the corner of the block so the gear appears.


• Click the dropdown arrow.


• Click Edit view

Step 14: Edit the slideshow settings

• Choose Settings next to Slideshow.


• In this example, we're going to change the speed to 700 so that slideshow operates more quickly.

Summary

There are a wide variety of possibilities and options available to you with Views Slideshow. You might now want to go back and change anything from the image styles, to the fields, to the content, to the slideshow settings.

This tutorial hasn't taken you in depth with any of those, but hopefully you now feel confident enough to start to build your own slideshows. You now know where to edit the image styles, fields, content and slideshow settings.

From here, it's a question of practice and we're sure you'll build some great slideshows.