Last updated on March 26, 2017
How to make a slideshow in Drupal
The concept behind a slideshow
A slideshow in Drupal is actually a View. A View is a query that will search through your pile of nodes, pick out any that match the criteria you set, and display them in a format you set. Slideshow simply extends Views to layout your content in a slideshow with our without a carousel.
This post will describe how to get the slideshow working without a carousel.
Before you start
Before you start, you will obviously need a working Drupal website with some content, such as a collection of images. You can also use a slideshow to display ordinary posts as I do on the front page of Rooi. We will use images here because that is the more common use.
Additionally, you need to have View downloaded and enabled and you will also have to enable its sub-module View_UI.
You also need to know, at least roughly what the following mean:
- Page and block
- Content-type, node and field
Modules & Plugin
To set up Slideshow, you will need the modules: Libraries, Views _Slideshow, Views_Slideshow_JCarousel and Libraries. When you enable Views Slideshow, also enable Views_Slideshow_Cycle.
Additionally, you will need the jCycle plugin which you download from https://github.com/malsup/cycle (get the .zip file on the right).
Unpack the file into your Libraries folder. If you don’t have a Libraries folder, make one under /sites/all/. Rename the folder that the .zip file creates as jquery.cycle.
Make a View Slideshow
You will recall that to make a View, you go to Structure/Views and make a new view.
Screen 1
- Add a name and a description
- Choose your content. Notice that everything on the list is a content-type. If you have a separate content-type for images, choose it. Otherwise choose a content-type that has a field for images. The default content-type Article has a default field for images and I chose Article.
- Decide whether you want to display your slideshow on a page or a block.
- If you chose page, check the path.
- At format, choose slideshow.
- Set the number of images to show before pagination kicks in.
- Decide whether you want a direct link to show on a menu.
- Continue & edit but beware, your work has not been saved at this point.
Screen 2
- The second screen has a baffling array of controls. Look over them carefully and ignore Advanced Options in column three for the moment.
- The middle column controls the path, the links to menus, the permissions, and pagination.
- Most of the controls that you want for a slideshow are in column one.
- Starting at the top, you see Display Name and Title. Display name is the name used to when Views are listed. Title is the name displayed as part of the view – that is, above the slide show. So make sure the Display Name speaks to administrators and developers and Title speaks to users and visitors.
- The next four blocks cover FORMAT, FIELDS, FILTER CRITERIA and SORT CRITERIA.
- Starting from the bottom — as those are easiest to understand – Sort Criteria telsl you the order in which slides will be displayed. If you want to change the order, this will be the block where you will find the controls.
- Filter Criteria is also fairly self-explanatory: with the default settings, the slideshow will only display published content that is an Article.
- The FIELDS block, if you followed the instructions for Screen 1, will be blank.
- FORMAT refers in the first line to Slideshow|Settings and Content|Teaser. We will begin with Content and you will see that varying the Content changes your Field options in the Fields block below.
- Click on Content and choose Fields. Now you see Content:Title come up below. You can also Add a field.
- Add a field and you will see many choices. Think a little – you are looking for Content: Image. Add that, and it will come up in the Fields block.
Inspect Preview
Scroll down to the bottom of your screen. You should see a slideshow of all the images that you have uploaded into Articles with the title of the Article above the Image.
Save and go to the menu where you linked the slideshow or type in the url to see your work on your website.
Advanced Option
You might also note that you are also seeing the title to every Article, whether it contains an Image or not.
To add a another Filter to choose only the Articles that contain an image, you can look first at the list of Filters. I don’t think we will find a suitable filter because we are displaying nodes of content-type Article and we want a logic that would go something like “contains an image” rather than “is an image”. But look anyway.
(Remember to edit a View, go to Structure/Views.)
I went instead to Advanced Options and chose the Relationships. On that list I could find Content:Image (field). I added it and checked required.
Now my slideshow only contains Articles which contain an image. And it is cycling nicely. Save if you wish.
Slideshow Settings
What if I want to speed up my slideshow or add previous and next buttons?
Go back to the View and go to Slideshow | Settings in column one. (Btw, if you have not downloaded jcycle correctly, on the following screen you will get a big warning message in red. So if something is not running correctly and you want to eliminate jcycle as being the cause look here.)
To get some basic settings, scroll down to the bottom and check the options under Bottom of the page. Be patient as when you check the options, more options are revealed.
Oddly, the controls aren’t working as I expected them to. I checked all three and checked the option to stop when hovering. Only the counter is showing at the bottom for me.
Summary
So far, we have downloaded the correct modules and plugin and set up the basic slideshow view.
You know how to reveal fields and to add fields. You know how to filter on the content-type (column 1) and on the fields (under Relationships in column three). And you know where to find the settings to control the slide show.
You can also decide where your slideshow will go on you site – onto a page or block and if it is page, attached to a menu or not.
The next post will describe how to get the carousel working.
I would like to thank you for the efforts you’ve put in penning this site.
I am hoping to see the same high-grade content by you later on as well.
In truth, your creative writing abilities has motivated me
to get my own site now 😉