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 tutorial 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
- 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, 75×75 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.
- Name it Testimonial Slider.
- Check Description and give it a description.
- Choose the to Show Content and then the content type you want to show.
- Uncheck Create a page.
- Check Create a block.
- Type Testimonial Slider into Block Title.
- Choose the Slideshow Format made up of teasers.
- 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.
- 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
- 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.
Thanks Ed,
Really great tutorial…
iam newbie and still can follow the track 🙂
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
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?
I have this same issue, any ideas?
i have this issue also , can anyone help me with that
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?
Thank you, Edward
It would have been nice if you could have additionally shown a demo of the final result.
Onwards
d
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.
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.
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.
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
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.
Thanks for the kind words, Nora!
If nothing else, we try to write simply and clearly 🙂
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.
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.
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!
Thanks a lot for the tutorial….it really helped………..
How to display only a single image from a group of 5 images uploaded against node in the slideshow
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.
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
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
How do I edit existing content if the ‘gear’ isn’t available on the page with the slider?
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.
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.
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?
Oops, yes I installed it but it was not enabled! Thank you.
I’ve done that!
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
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?
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
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.
Great tutorial. Really helpful
Thank you
Heh, Great tutorial! Thanks so much for sharing your knowledge.
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
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?
view_sideshow step by step work but not properly result.
Please another step
Thanks, but i dnt see the slideshow under display format, i wonder why? please just help me
Thank you very much
Hi, your tutorial is great, I have uploaded an image but it is still not showing showing up, I must have missed something 🙁
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…
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]
thanks for this very awesome tutorial!
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…)
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?
Thank you very much! It’s very helpful!
I cant get slides of my images it displays, as original they are i follow all steps but its not done what to do????
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?
Great Tutorial…………………