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 home page to the three-item slider template. There are three basic steps.

  1. Create slides--three to start, but more is good, too.
  2. Add slides to the queue.
  3. Edit the home page to apply the Home Page Slider template.

The thing to keep in mind is that you manage the content somewhat abstractly—as opposed to the direct way you manage a page. That is, you set up the underlying content items and the resources associated with each, then the slider is automatically produced on the home page of your site. You can easily manage which 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 content are elements of a good use case. A really good example usage (at the time of this writing) is the Lasseter Clare Lab:

screenshot of the slider element of the Lasseter Clare Lab website

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 technically possible to create a slide without a link, or even link to an external site, but that type of usage is rare. As a general rule of thumb, use the slider to highlight your own content.

Now, on to the steps to set this up.

Create Slides

Each slide consists of:

  • A title (a few words)
  • An image. It should be at least 664 pixels wide by 398 pixels tall, but if you use one a bit larger, you'll have some ability to adjust the position of the image once the slide is showing on the home page. See the Slide Management section for more info.
  • Text and a URL for the slide link
  • Teaser text (a sentence or two) to describe the slide's topic

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).

You're logged in to your Drupal site, right? Good. Here's how to create a single slide:

  1. Click the Content link in the administrative menu.
  2. Click the Add content button.
  3. Click the Front Slide link.
  4. Enter the slide Title.
  5. Click the Select media link. You can upload an image or use one of the Library tabs to locate and select an image that has already been uploaded. To complete this step, click the Submit button.
  6. Enter a URL in the Link field. This can be the alias portion of a URL (working-with-front-slides) or a full URL (
  7. Enter the Link Text. The "Read More" default cries out for a more creative option.
  8. Enter the Text. This should be no more than a couple of sentences.
  9. Click the Save button.

The image below shows a sample slide creation form filled out:

completed slide creation form

Repeat these steps until you have created three or more slides. Make a mental note of each slide title; you will use the info when adding slides to the slider queue.

Add Slides to the Queue

location of the 'Edit Slide Order' link on a slideNavigate to the View screen for one of your newly created slides. Notice the "Edit Slide Order" text in the upper left corner? This is actually a link and it appears in this location on all slides' View screen. This means you can be viewing any slide to get to the screen where you add slides to the queue.

  1. Click the Edit Slide Order link.
  2. Set your cursor in the field that reads "Enter the title of a node to add it to the queue". (The word "node" simply refers to a piece of content, in this case a slide.)
  3. Start typing the title of one of the slides. When a match appears, click to select it.
  4. Click the Add content button.
  5. Repeat steps 2 through 4 until three slides are listed.
  6. [optional] Consider the slide order. The top slide will appear first as the slider widget rotates on the home page. The second one appears next, and the third appears last. To adjust the order, you have three options:
    • Click a plus symbol next to a slide title and drag-and-drop the slide into a different position.
    • Click the Reverse button to reverse the order of the slides.
    • Click the Shuffle button to randomly order the slides. Repeat until the slides are in the desired order.
  7. Click the Save button.

Here's what the queue looks like when it's full:

screenshot of queue screen

Note: The queue cannot display more than three slides at a time. It's always handy to have additional slides at the ready, though, so that you can switch them out from time to time.

Apply the Home Page Slider Template

This step is super easy. And you usually only have to do it once.

  1. Navigate to your site's home page and click the Edit tab.
  2. Click the Template Settings link.
  3. Click the Home Page Slider page layout template thumbnail.
  4. Scroll to the bottom of the screen and click the Save button.

The branding image that used to appear on the home page is replaced with the slider, but notice that the rest of the home page content stays in place.

Slide Management

While viewing your new home page, you should notice two controls overlaying the image area of the slider: an image positioning icon and the Edit Slide Order link mentioned above.

location of image positioning icon and 'Edit Slide Order' link on a slide

Using these controls, you can manage the slider on a day-to-day basis.

Image Positioning

Earlier we touched on the fact that you could use images larger than 664 x 398 pixels for your slides. If you did use a larger image and want to adjust its position, here's how:

  1. Click the thumbnail in the slide sidecar to stop the image rotation.
  2. Click the image positioning icon.

With the image positioning icon open, a small set of tools allow you to make the following types of adjustments:

  • Click anywhere on the image and drag the picture around to adjust its position in the slide frame.
  • Zoom In and Zoom Out tools allow small changes to the size of the image, but you can't zoom in to make the image larger than 100% of its original size.
  • A one-touch 'Max. Zoom' tool sets the zoom to 100%.

When you are are happy with the positioning changes you've made, click the Save Changes tool. And, of course, there's a Cancel tool that closes the image positioning tools without saving any changes.

Editing Slide Order

Let's say that you have created a new slide and are looking at your site home page, wondering how to get that new slide to appear in the slider.

  1. Click the Edit Slide Order link.
  2. Consider the slide order. The slide in the bottom position is going to get booted out of the queue when you add the new one, so make sure that the slide you want to replace is in the bottom position. If not, click the plus symbol next to the slide that needs to move, drag it to the bottom position and click the Save button.
  3. Set your cursor in the field that reads "Enter the title of a node to add it to the queue".
  4. Start typing the title of one of the slides. When a match appears, click to select it.
  5. Click the Add content button.
  6. Click the Save button.

If you have questions or comments regarding this tutorial, drop a line to