Using the Views Slideshow Module in Drupal 7

advert-full-class

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 tutorial we’re going to build a slideshow that will show rotatings testimonials in a block on our site.

advert-full-class

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.

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

48 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Karim
Karim
12 years ago

Thanks Ed,

Really great tutorial…

iam newbie and still can follow the track 🙂

Jorge
Jorge
12 years ago

Thanks Ed, but it only show me just one image. What´s the problem with it?

Could you help me?

Thank you in advance!

Jorge

ColCar
ColCar
10 years ago
Reply to  Jorge

Did you manage to get this fixed?

I have the same problem….my slideshow “slides” in the preview mode, but when I view the page it just shows the first image/slide in the slideshow….

any idea’s?

NIZZOK
NIZZOK
9 years ago
Reply to  ColCar

I have this same issue, any ideas?

pranjal
pranjal
9 years ago
Reply to  NIZZOK

i have this issue also , can anyone help me with that

Sven
Sven
12 years ago

Hi,

Making the slideshow is no problem, but it takes a few seconds to start the slide. So I have an open spot on the page where the slides should be. Once he starts it fills that spot and there is no problem except after the last slide, then he is showing noting until he starts again.

I have my “time delay” on 4000, “speed” on 1000 and “Initial slide delay offset” on 0.

I have tried some jQuery Cycle Custom Options but can’t get it working whiteout the first and last pause where he is showing nothing. Where can I look to solve this?

DavidM
DavidM
11 years ago

Thank you, Edward

It would have been nice if you could have additionally shown a demo of the final result.

Onwards

d

Guest
Guest
11 years ago

This module doesn’t work. I don’t want links and I want more than one content type. It just displays everything and not a slideshow.

tokunbo
11 years ago

hello there,

thanks for the tutorial. How can I hide the words “Testimonial slider” displayed at the top of each slide?

Also, how can I hide info like “Submitted by admin on Fri, 11/02/2012 – 14:28, Testimonial Image:”, etc., all displayed at the top of the slide. I used the Drupal Ipsum as you suggested.

The above tutorial assumes im using texts as my slide. What if I want a wide image as the slide.

picturina
picturina
11 years ago

Sven, as a casual visitor, it sounds like your images might be high resolution. If you try saving them to smaller jpg file size, this may solve your white space problem. Also, make sure you are using the version of jQuery that is recommended for the Views Slideshow module.

Peters
Peters
11 years ago

Hi Edward,

thanks for this tutorial. All works fine.

Two things, as I need this slideshow to appear on the top of my page, I don’t want any “Title”. How can I eliminate that?

And how to eliminate the extra white space especially below the slides?

Thanks ahead!

Kinds rgs,

Peters

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

You have reached a new level of clarity in writing about Drupal that is not common. My hope is that the rest of the Drupal community will use your model as a new paradigm.

Steve Burge
11 years ago

Thanks for the kind words, Nora!

If nothing else, we try to write simply and clearly 🙂

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

Steve,

I have posted a link to this article on my Facebook page for my students. I teach WordPress and various types of code, but many of my students also dabble in Drupal. The sad thing is that the incomprehensibility of Drupal sites sends them running back to WordPress with a look of terror in their eyes.

Steve Burge
11 years ago

Thanks, Nora. You’re not, wrong. One of the things we do hear is try and steer people to use the system that’s most appropriate for them. People with strong technical backgrounds tend to enjoy Drupal the most. Without that background, it can definitely be an uphill climb.

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

It is my opinion, that people of all backgrounds, ages and learning styles should be able to learn programming and various systems. As an “old”, female, business-oriented person, I put myself through the torture of CS. Now, I specialize in making all that learning accessible to regular folks by teaching in the way that you are writing. About my 3rd year of learning CS in the “monkey-see, monkey-do” method, I finally learned to turn data structures and modules/functions into cartoons in my head. Drupal is complicated, but I don’t think it has to be incomprehensible. Just tell ’em why and draw a mental picture.

Keep up the good work!

pinujae
pinujae
11 years ago

Thanks a lot for the tutorial….it really helped………..

Karthik
Karthik
11 years ago

How to display only a single image from a group of 5 images uploaded against node in the slideshow

Nora McDougall
Nora McDougall
11 years ago

Do you mean that you would like to display one image at a time? If so, go to Views -> Slideshow Settings -> Items per Slide. It’s way down in the overlay window.

zane
zane
11 years ago

As a newb to Drupal I really appreciate your tuttorial, it’s been very helpful. But I though I might mention that your missed letting us know that your tut also requires us to load the link module. It took me a little while to figure it out, but I did. Thanks

Aviral
Aviral
11 years ago

Sir, i successfully created testinomial using your post, But sir i have a problem, Under testinomila,

Two link are give:1) Read More, 20 add comments, how to remove these links from testinomail block…?

Please reply as soon as possible.

Thank You

RyanL
RyanL
11 years ago

How do I edit existing content if the ‘gear’ isn’t available on the page with the slider?

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

Aviral,

You can turn off the Add Comments by setting the whole Content Type for no comments. In Drupal 7.x: Structure -> Content Types -> Edit your Content Type -> Lower left hand corner.

Sometimes, I just go to the CSS and hide the layer – if I can’t find where to turn something off. It’s a hack, but it’s a quick hack.

Hank
Hank
11 years ago

For Step 5, I could not add the link field because there is no “link” choice in my dropdown menu. Is a link field required for all slideshows or just for your example? Thank you.

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

Hank,

In my case, adding the Link Field module gave me that option. I would be curious to know whether you installed that module and it still doesn’t work?

Hank
Hank
11 years ago

Oops, yes I installed it but it was not enabled! Thank you.

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

I’ve done that!

Hank
Hank
11 years ago

Hi again, I have chosen to have the slideshow block appear in the banner section but have been unsuccessful in getting images to appear there, either with your example or with mine using five large size images. All I see in the banner area that moves along is the name of each of my five slides and the “Submitted by …..” text. No images. I have tried three times! In my last attempt, I have a Body field (which seems to appear there automatically, an Image field (image style:large), and a Link field. Don’t need a text field, and I have no thumbnail anything. As I upload each of the images, they appear one by one on my homepage below the banner but when I’m finished and go to view the result, I never see them again, only see the horizontally moving name and ‘submitted by…’ line. Am I missing a certain type of field that I need to make the images appear in the banner?

Thank you again, Hank

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

Hank,

Have you looked at the HTML code through the browser to see if the tag is present and picking up a working image address?

Hank
Hank
11 years ago

Hmmm no I haven’t looked at the code, I will try to do that. One other question for the moment: In your testimonials example, what is the purpose of the Links field? What does it link? And your use of thumbnails…you use them because you only want to have small thumbnail sized images in your slideshow to go along with the testimonials text? If I want large images and no text then I don’t need thumbnails, right? Or are the thumbnails a kind of indexing image that all slideshows should have? Also what are the Title and Body fields that seem to be automatically generated as in your Step 6 Manage Fields screenshot? Thanks again, Hank

Nora McDougall-Colli
Nora McDougall-Colli
11 years ago

Hank,

The client actually changed the content they wanted in the slideshow. So, instead of Testimonials, they ended up with a photo and just some text, and we didn’t end up linking to anything. So beyond wondering whether you had installed the module, I can’t help you with the linking. But, if we had set it up with the testimonials, I would have wanted each testimonial summary and photo to link to the full testimonial. I only had to use a Body field and an image field.

And, they didn’t want the thumbnails; so, someone else will have to address that issue.

Shreshtt Bhatt
Shreshtt Bhatt
11 years ago

Great tutorial. Really helpful

Thank you

Lydie Baillie
Lydie Baillie
11 years ago

Heh, Great tutorial! Thanks so much for sharing your knowledge.

Fida
Fida
11 years ago

thanks for this great tutorial.

i have a problem and spent two days trying to fix it but failed.

i keep getting this message:

You need to install the jQuery cycle plugin. Create a directory in sites/all/libraries called jquery.cycle, and then copy jquery.cycle.all.min.js or jquery.cycle.all.js into it.

i have done that many times

i don’t know if the problem is that all the modules i need including the libraries are installed in sites/all/modules.

i tried to install them “all” directory but drupal didn’t recognize them… they need to be in the “modules” directory

i tried every solution i found but with no result.

i have a deadline for finishing the website and i am stuck

i am working on localhost, windows 8

plz help

Nora McDougall
Nora McDougall
11 years ago

Fida,

What version of Drupal do you have?

Are you working on a testing server setup on your own computer or a remote server? (FTP often fails to do a full upload.)

Have you tried to run update.php?

Have you cleared the cache in Drupal?

BIREN
BIREN
11 years ago

view_sideshow step by step work but not properly result.

Please another step

mariam
mariam
11 years ago

Thanks, but i dnt see the slideshow under display format, i wonder why? please just help me

John MK
John MK
11 years ago

Thank you very much

Nigel Anthony Smith
Nigel Anthony Smith
10 years ago

Hi, your tutorial is great, I have uploaded an image but it is still not showing showing up, I must have missed something 🙁

ateam
ateam
10 years ago

Sorry to resurrect the discussion but I got a problem:

In step 9, edit the view, every time I edit the settings of the slideshow and I try to apply the changes the request returns a json and wants to save it (in firefox it just displays it on the window) this is the url: https://server/testsite/admin/structure/views/ajax/display/recent_news_slide/block_1/style_plugin/style_plugina7c66db2.json

Of course settings do not get saved.

Following this tutorial ( [url=http://www.zyxware.com/articles/2504/drupal-tips-how-to-install-and-setup-views-slideshow-module-on-drupal7]http://www.zyxware.com/arti…[/url] ) I put into libraries json2/json2.js since it seemed related to the issue, but it did nothing…

So now I am stumped…

Eduard
Eduard
10 years ago

I did everything exactly according good instruction but puctured not appeared.
cash cleared, code is below:

Testimonial Slider

[url=#]Configure[/url]

[url=/drupal%207/drupal-slideshow/admin/structure/views/view/testimonial_slider/edit/block?destination=node]Edit view[/url]

[url=/drupal%207/drupal-slideshow/admin/structure/block/manage/views/testimonial_slider-block/configure?destination=node]Configure block[/url]

[/list]

fishinee
fishinee
10 years ago

thanks for this very awesome tutorial!

Charles McNeill
Charles McNeill
10 years ago

What to do if Views Slideshow was working fine for a long time, but after various updates (core Drupal and some modules), it now alternates between slideshow content items and blank displays of the same duration? (image… nothing… image… nothing…)

Carsten J
Carsten J
9 years ago

Big problem: I can see all the images from top to bottom, but there is no slideshow … only images. Maybe the css oder JS is missing? how can i activate, that the Js or css will be loaded?

stellion
stellion
9 years ago

Thank you very much! It’s very helpful!

vishal
vishal
9 years ago

I cant get slides of my images it displays, as original they are i follow all steps but its not done what to do????

Torin Walker
Torin Walker
9 years ago

I followed your tutorial and have a great setup, except for one thing – I don’t want the images scaled, and this causes everything to be left-aligned inside a rectangle with an area equal to the largest item (plus a small space on the right) – no matter which css style I modify, I cannot get any of these images to “text-align: center” in the center of the slideshow, nor does there appear to be any setting for the alignment of said slides within this setup.
Any ideas?

Mithow
Mithow
7 years ago

Great Tutorial…………………

48
0
Would love your thoughts, please comment.x
()
x