flowing motion Posts
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.
- 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.
- 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.
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.
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.
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.
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.
To install WYSIWYG successfully, it is helpful to understand that works at three levels: text filters, WYSIWYG and Editor.
Drupal 7 arrives with pre-installed text filters. If you have a fresh install (and even if you don’t), got to the admin bar at the top of screen and select Configuration. On the left hand side, close to the top, you will see Text Filters. Have a look at these. You will see Filtered HTML, Full HTML and Plain Text.
The filters give you control over three things:
1. Who can use Full HTML, or Filtered HTML and who must use plain text.
When you are new to Drupal, leave everything on default. You can see that with the default settings only administrators can use Full HTML. Later on, you might want to limit anonymous users to plain text as Drupal attracts spam.
2. Which Filter is used by default
Also, note that Filtered HTML is at the top. That means that is acts as the default, even for administrators. If changing the filter manually becomes annoying when you need Full HTML, change the order. You can change the order back again later, if you wish.
3. The exact functions of the filter and the order in which they work
As a general rule, do not play with the settings. There are several of them and when you fiddle, you are fiddling with relationships to the underlying code and to the effect of combinations of settings. When in doubt, don’t touch!
There are three settings that you will probably want to change though.
- When you add the Media module, you must check the box for “Convert Media tags to markup” (and Save). The Media module will remind you if you forget. You must check this box in both Filtered and Full HTML.
- When you add the WYWIWYG module, you are recommended to uncheck “Convert line breaks into HTML (i.e.
<p>)”. Uncheck this box in both Filtered and Full HTML.
- Additionally, when you add the WYSIWYG module, go to “Limit allowed HTML tags” under Filter Settings near the bottom of the page, and add <p> and <br>. You only need to add these tags in Filtered HTML.
Text Filters is the first level of setting up WYSIWYG.
You can install and enable the WYSIWYG module in the usual ways.
- Either, use drush (drush dl wysiwyg) and (drush en –y wysiwyg)
- Or, go to the admin bar/modules and insert the url that you retrieved from the WYSIWYG page. When prompted, enable the module.
WSYIWYG should now show up on the Configuration page under Text Filters. If it does not, then clear your caches.
- Either, use drush (drush cc, followed by 1 when prompted)
- Or, go to the admin bar/configuration and performance where you can clear all caches.
Go to WYSIWYG at the Configuration page and you will see the three Text Filters you saw in the first stage above, with a drop-down box that says “No Editor”.
Your next task, is to go to the “third level” and install an editor. Then we will configure a combination of WYSYWYG and the editor you have installed.
Drupal will prompt you with a list of editors and highlight one in particular, CKEditor, in pink. CKEditor is very well established but I must begin with two warnings.
- Do not install the CKEditor for Drupal. Install the normal CKEditor.
- Do not install the most recent CK Editor, because Drupal/WYSIWYG will insist that it cannot see it. You can install the latest development version of WYSIWYG (by downloading it manually into the WYSIWYG folder), but it does not play nicely with DRUPAL and destroys the Edit layout and does not render a tool bar. Install an older version, say 3.5.
- Do not fuss about all the instructions about where to put the CKEditor. Download the zip file and unzip it into /www/yourwesbite/sites/all/libraries. If this is the first library that you are installing, then you must create the library folder. CKEditor will unpack itself neatly.
Once you have an (old) version of CKEditor, when you go to WYSIWYG on the configuration page, you should now see CKEditor in the drop-down box where you once saw No Editor. If it doesn’t show up, try cleaning your caches before you panic.
Now you can configure your WYSIWYG/CKEditor. You only have one task to do but you must do it for Filtered HTML and Full HTML. And remember to save each time.
Click on Configure and go to Buttons and Plugins. Check all the buttons that you want on your tool bar. Be mean, rather than extravagant but remember to check “HTML Block Format” which give you a drop down list for headers and “Media Browser” if you are going to add the Media Module (near the bottom). This may feel like a tedious chore, but enjoy – when you are done with this you will have working WYSIWYG.
WYSIWYG requires you to think at three levels.
- Set up your text filters and prepare for the addition of WYSIWYG and Media as I described in the first section above.
- Install WYSIWYG and go to the configuration page where you are prompted to get an editor.
- Get an old version of CKEditor and set up the buttons for your tool bar with the configure button.
One of the annoying features of Drupal 7 is that its submit button is below the fold.
Inevitably when we are writing a long post, we become distracted at some point and posts are left unsaved. Without an automatic save feature, it is equally inevitable that posts are lost.
To make life a little easier, it is cool to put a Save button at the top of the Add Content form. And it is easy to do.
- Install and enable the module Content Type Extras
- Go to the list of Modules and Configure Content Type Extras
- The Module allows for all manner of extra buttons that I don’t use. I will just forget what they all do.
- I go to Extras and check two boxes to add a Save button to the top of each Content Type.
- Save and buttons appear whenever you add a new Article, Book page, etc.
Now you have saved yourself a needless task of scrolling down to find the Save button and given yourself a prompt to Save when you are distracted.Leave a Comment
To install WAMP on your PC
What is WAMP?
WAMP stands for Windows Apache MySQL Php.
· Windows is your operating system.
· Apache is a server that manages communications between computers on a network including the internet. All websites reside on a server somewhere.
· MySQL is a database to hold the contents of a website. A website is made up of two parts: its database and its programmes such as PHP
· PHP is a programming language. The language resides on the server and the website is written in PHP.
When do we use WAMP?
Anyone who develops websites, including their own blog, is likely to want to install WAMP on their computer. If they don’t use Windows, then they will be looking for LAMP or MAMP.
WAMP is installed in folder on your C:/Wamp.
How do I use WAMP?
To start WAMP up, you go to Start/All Programs/Start WAMP. You may have to give it permission to bypass your firewall.
WAMP has a drop-down (or pop up menu).
You pick “local host” to see a list of websites residing on your WAMP. Pick any of these and the website should appear in your browser (i.e., Firefox, Chrome, Internet Explorer, etc.)
Alternatively, you can go to your browser bar and type “localhost/mywebsite” [without the “”]. If you are a noobe, note that is an alternative to http://www.mywebsite.com.
If WAMP is running, and “mywebsite” exists, then mywebsite will open in your browser.
In short, you are running a private little internet on your computer and you can see your website in your own browser.
How do I install WAMP?
1. Download the latest WAMP (first recall whether you have a 64 bit or an older 32 bit machine)
2. Follow the instructions
3. Have a look at the menu bar and see localhost, phpAdmin, Apache and MySQL.
Build a website
To build your first website, use WindowsExplorer to make a new folder in c:/wamp/www/mynewwebsite.
Check that you can see the folder when you use WAMP’s menu and choose localhost. This folder is still empty and in two steps, you will download into it WordPress or Drupal, or whatever you are using.
First, make a new database for your website by going to phpAdmin. Make a new database and then add yourself again with a new name and password (and name that is not root). Give yourself all privileges.
Now you can download and install something like WordPress into your folder and when it asks for your database, give it your database name, your new user name and your password.
When you return to localhost and select mynewwebsite, you should see your website in your browser.
WAMP won’t run – port in conflict?
You very likely have Skype running on your computer as well. Skype “listens” to the same port as WAMP but listens to another as well.
To resolve the conflict, open Skype and look for the technical settings. Uncheck “listen to port 80” and WAMP will work.
WAMP conflicts with another server on your computer?
You may be running ScholarWriter, for example, on Uniform Server and you will find you have to switch off UniformServer before you run WAMP, and vice versa.
You might also be running Maven with Eclipse to run UseCaseTool (uctool). Maven is also a server.
You might also have a GeoServer running!
You want WAMP to listen to its own distinct port and you also want MySQL to have its own port. We will change the port in WAMP from 80 to 81 and in MySQL from 3306 to 3307.
We will accomplish these changes in this order.
1. Edit Apache’s httpd.conf file
a. Go to WAMP’s menu and select httpd.conf
b. Use find to find localhost and change it to localhost:81
2. Edit c:/wamp/wampmanager.tpl file so the WAMP menu points to localhost:81
b. Three instances
3. Edit MySQL my.ini file
a. Go back to the menu and follow MySQL to my.ini
b. Find 3306 and change it to 3307
4. Edit the phpAdmin config.inc.php file to recognise the 3307 port
a. Find the config.php file at c:/wamp/apps/phpadmin…/config.inc.php
b. Edit out the first reference to localhost against verbose to leave ‘’ with nothing between them – I don’t know why but until I changed this I couldn’t go from the WAMP menu to phpAdmin
c. Change the next reference to localhost to 127.0.0.1 – apparently if that remains as localhost, then the port defaults to 3306
d. Change the port from ‘’ to ‘3307’
5. Restart the WAMP server
a. Shut down all services
d. And test all the links in the menu
If all is well, you are now directed to both localhost:81 and localhost:81/phpAdmin where you can set up new databases.
Change the port settings on any existing websites
Note that if you already have made a database before you changed the port AND installed a website, then you must change the settings on the website.
For each website, go to c:/wamp/www/websitename/sites/default/settings.php and edit these lines to match the port settings as follows
‘host’ => ‘localhost:81’
‘port’ => ‘3307’
Fire up another server, say a portable website and see if you are able to run two servers on the same PC.
And not least change your password
Your server resides behind your firewall and is not accessible from the internt.
But, just in case, change the password for the user ‘root’
1. In PhpAdmin, change the password for user root under Privileges
2. Go immediately back to the config.inc.php file and insert the same password in password.
3. Reboot your WAMP and just in case you are exposed to the internet, no one should be able to connect to your MySQL without knowing your password.
At last, you should have WAMP running smoothly on port 81 and 3307 while other servers (and Skype) run on other ports. I have deliberately left port 80 and 3306 clear for a portable server that so the defaults are used for users who are likely to have the greatest disinterest in tweaking their system!13 Comments