Search Google Appliance


How do I set up the slider template for my homepage in my Drupal site?

This tutorial covers how to convert your site's homepage to the three-item slider that is seen on the PSU Homepage, and other sites. There are three basic steps that need to be done:

  1. Generate slide content
  2. Choose Slider template for your homepage
  3. Add slides to the rotator queue (nodequeue)

The thing to keep in mind is that you manage the content somewhat abstractly—as opposed to directly, like a page. You set up the underlying content items and the resources associated with each, then the slider is automatically produced on the homepage of your site. You can easily manage what slides appear, and in what order.

Before we cover the steps, lets think about usage first, and consider best practice.

Slider Usage: Best Practice

In general, the best practice is to use the slider to hook visitors into key content for your site. Think about what matters to the general visitor. High quality photography, succinct copy, and linking each slide to local conent are elements of a good use case. A really good example usage (at the time of this writing) is the Lasseter Clare Lab:

Portland State The Regional Laboratory for the Science of Cultural Heritage Lasseter Clare Lab | Home


There, the site owners took the time to make sure that the photo itself is high-quality, and the focus of each slide is on the left-hand side of the photo. An appropriate amount of copy—two sentences—was used. Also, each slide links to a local page within the site. It is entirely possible to create a slide without a link, or even link to an external site, but that type of usage should be reserved for special cases. As a general rule of thumb, use the slider to highlight your own content.

Now, on to the steps to set this up.

Gather Content for Each Slide

Each slide will need the following items in order to create the slide:

  1. Slide title (a few words)
  2. Teaser text (a few sentences)
  3. An image: at least 664 pixels wide by 398 pixels tall
  4. A URL for the slide link to point to

You will need exactly three sets of the above resources. You can set up your slider with fewer than three slides, but the sidecar listing will look awkward with less than three. Also, if you create more than three slides, you can easily manage which slides appear (more on that later). Once the resources are gathered, continue on to learn how to create slides

Slide Creation

While logged into your site, on the admin menu, [1] click Content, then [2] Add content.

Portland State D7 Training Site T2 | Content


Then, click Front Slide, to add your first slide:

Add front slide


You will be presented with the slide creation form. There you just want to give the slide a title, then select media. You can upload or browse for media in the same way you do for setting up page templates (it is the same sub-system). You probably want to create a folder in your media library and upload special images for slides (664x398 pixel dimensions). Then specify the link text and URL, and click Save. The image below shows a sample edit form filled out: 

Portland State D7 Training Site T2 | Edit Front Slide Fountain Fun

Note that for the Link field, you just need to enter the alias for the page you link to ("sample-page" in the above image). If you are linking to another site, you then have to use a full URL, starting with "http://".

Repeat this slide-creation process three times to create your slides. Next we'll set up the slide queue. Before continuing to the next steps, lets be sure we have three slides. We'll go to the content listing screen to check. From the admin toolbar, [1] click Content, then [2] change the TYPE filter to Front Slide, then [3] click Filter:

Portland State D7 Training Site T2 | Filtering Content


The page will reload and you should see the front slides you just created:

Portland State D7 Training Site T2 | Filtered Content


Make a mental note of the Title of each slide, as you will need to know the first word or so to add the slides to the slider queue (later).

Choose Homepage Slider Template

Browse to the homepage of your site, then click on the edit tab:

Portland State D7 Training Site T2 | Editing your homepage


In edit mode, [1] click on the Template Settings fieldset to expand it, [2] select Home Page Slider as the template, then [3] click on Manage Slide Positions:

Portland State D7 Training Site T2 | Manage slides


A new tab/window (browser-dependent) should open, taking you to the the Subqueue 'Front Page Slider' page. Here, you want to enter the first few letters of a title of a slide you created previously (this is where the mental note about slide titles comes in), and within a few seconds, the auto-complete should show with the full title of the node and the node id formatted as shown:

Screen Shot 2011-09-14 at 3.52.05 PM


Just click on the node title in the autocomplete drop-down, then [1] click Add content, and [2] the page indicates that you have added a slide to the queue:

Portland State D7 Training Site T2 | adding slides to queue


Repeat this process of typing the first part of each title and adding it to the queue. Once you have all three in place, [1] use the drag-n-drop handles to order the slides relative to one another, then [2] click save:

Portland State D7 Training Site T2 | ordering slides + save


The page will reload, and you will see your three slides in the order you put them in. Back in the other tab/window that you selected the Home Page Slider template, click the save button at the bottom of the page. You should be presented with your homepage in the slider template, with functional slides. Note how the thumbnails in the sidecar listing were "automagically" created, and the text next to those images auto-trims to fit in the listing. Now that the slider is wired up, you just need to create slides and manage the queue when you want to change slides out.

Slide Management

While viewing your new homepage, you should notice two controls overlaying the image area of the slider: [1] Edit Slide Order, and  [2] image positioning control:

Portland State D7 Training Site T2 | slider management controls


Using these controls, you can have access to all the management you will need to control the slider on a day-to-day basis. 

Adding New Slides

To add a slide, just create in the same manner as we did earlier (Add Content › Front Slide). Then visit your homepage, click the Edit Slide Order control ([1] in the above image), and add the slide to the queue. Note that if you add a slide to a full queue, one will drop out. So just keep in mind which slides you want and in what order when editing the queue. Also be aware that the system uses a caching mechanism to save copies of your pages, and nanonymous visitors (non-logged in users) may not see the update for an hour or so.

Image Positioning

Earlier, we touched on the fact that you could use images larger than 664 x 398 pixels. You can control the viewable portion of each image in the slider, and also zoom in or out if you used larger images. Smaller images don't work that well, as you will see a grey backgroud within the slide frame. So if you did use larger images and you want to change the position, click [1] on the associated slide's sidecar list view link, then [2] click on the position control:

Portland State D7 Training Site T2 | Positioning Slides


The controls will open up over the image:

Portland State D7 Training Site T2 | Slide positioning


The zoom controls are handy, but again not all photos produce good results when zoomed. You can also click anywherere on the imageand drag the picture around to adjust it's position in the viewport. When you are good with the edits click teh ssave button in the image controls and the image will reload into the frame. If you would like to avoid having to position and/or zoom your images, just use images that are exactly 664 pixels wide by 398 pixels tall.

That's all there is to it. If you have questions or comments regarding this tutorial, drop a line to