Drupal-lovers

Who love to Drupal

Using the Views Slideshow Module in Drupal 7

Posted by drupallovers on March 30, 2012

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

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

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

tutuploadsmedia_1331163031317.png
  • 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.
tutuploadsmedia_1331163440590.png

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

tutuploadsmedia_1331163502577.png

Step 3. Create a new content type

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

tutuploadsmedia_1331164645120.png

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

tutuploadsmedia_1331166506658.png

Step 4. Add an image field

tutuploadsmedia_1331167891419.png
  • 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

tutuploadsmedia_1331168531613.png
  • 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.

tutuploadsmedia_1331170440659.png

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

tutuploadsmedia_1331170129653.png
  • 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.
tutuploadsmedia_1331170181692.png
  • 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

tutuploadsmedia_1331171042145.png
  • 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.
tutuploadsmedia_1331171368521.png
  • 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.
tutuploadsmedia_1331226423347.png
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.
tutuploadsmedia_1331224560504.png
  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.
tutuploadsmedia_1331230229715.png

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.

tutuploadsmedia_1331230426361.png

 

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.
tutuploadsmedia_1331231366205.png

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.

tutuploadsmedia_1331231761204.png

Go to Content > Add content.

tutuploadsmedia_1331231933998.png

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

tutuploadsmedia_1331237195034.png

Your block should now show on your site.

Step 13. Edit the slideshow

tutuploadsmedia_1331237845579.png
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

tutuploadsmedia_1331256334018.png
  • Choose Settings next to Slideshow.
  • In this example, we’re going to change the speed to 700 so that slideshow operates more quickly.
tutuploadsmedia_1331239855077.png

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.

About these ads

2 Responses to “Using the Views Slideshow Module in Drupal 7”

  1. Daljeet Sinhmar said

    it was going to be helpful for me but unfortunately i didn’t find link field under drop down list in step 5…is this difference is due to the further sub-version of drupal 7 or anything else?? m using drupal7.14.

  2. Lynette said

    I would like to thank you for the efforts you have put in writing
    this blog. I am hoping to see the same high-grade content from
    you later on as well. In truth, your creative writing abilities has motivated me to get my own, personal website now ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 40 other followers

%d bloggers like this: