Kevin J Morse.ca - Front Page Slideshow

As you can see I've implemented a text slideshow on the front page of my site using the Views Slideshow module. It was pretty straightforward to do but there were a few elements that were a little tricky so I'm going to walk through the steps required.

Before we begin - Modules and the jQuery Cycle Plugin

There are a few modules which need to be installed before everything will work:

• Views - creates the View that we will be displaying in the slideshow
• Libraries - lets Views Slideshow load the jQuery Cycle plugin
• Views Slideshow - the slideshow module itself
• jQuery Cycle - the jQuery plugin that does the transitions

The first three can be installed with any of the standard methods for installing modules but the last is a little bit trickier. Proceed to the jQuery Cycle website and download the full version of the plugin. It should be called jquery.cycle.all.js, now upload this plugin to sites/all/libraries/jquery.cycle. You will very likely need to create the jquery.cycle directory.

First step - Creating the Content Type

This step is not technically necessary, the Views Slideshow could display any Content Type in a View but a custom Content Type keeps things more organized and makes the slideshow simpler to setup.

Anyways, I called my Content Type Front Page Slideshow Text and left the configuration to the default with the exception of Promoted to front page and Comments. We don't need or want this content type to display on the front page and we definitely don't need anyone leaving comments.

Now go ahead and create your first few text pieces. If you start the Titles with a number it makes it extremely simple to have the Slideshow display them in whatever order you desire.

Second step - Creating the View

Now we're ready to create the View. Give it whatever name you want and apply the following settings.

Show Content of type Your Content Type tagged with (nothing goes here) sorted by Title

Uncheck Create a Page

Check Create a Block and choose Display Format Slideshow of fields

Third step - Configuring the View

Everything should be pretty much good to go already. Some things you may need to change are:

• Title - most likely should be set to None
• Slideshow Settings - changing the speed of the transition and how long each slide displays
• Field labels and CSS - you probably don't want a label showing
• Sort criteria - if you followed my suggestions and are using the title for the slide order you want this set to Title (asc)

Just in case something is strange, here are my settings:

TITLE
Title:None

FORMAT
Format:Slideshow
Show:Fields

FIELDS
Content: Text

FILTER CRITERIA
Content: Published (Yes)
Content: Type (= Front Page Slideshow Text)

SORT CRITERIA
Content: Title (asc)

Final step - Placing the block

Last step is to decide where the slideshow is going to appear. On this site I have the Block in the Featured region and have it set to only appear on <front>, the front page.

Some CSS tweaks may also be needed but following the steps above should give you a pretty decent start.