Skip to: Site menu | Main content

intermediate

Adding a pager to Views Slideshow displays

Many of you are probably already familiar with using the amazing Views Slideshow display plugin for Views. Out of the box it comes with different types of controls for the navigation. But, perhaps what you really want is to be able to add some other form of navigation, like those "dots" that you see in many slideshows. Here's how you do it:

Using theme overrides

As long as I'm being sidetracked and/or feeling inspired to write, here's another quick entry. This one gives a brief introduction to hook_theme and theme overrides.

What are template files and suggestions?

Template files are what Drupal uses to determine how to render the HTML for a page. When you wish to create a custom theme, there are several files you will likely include in your theme's directory:

  • page.tpl.php - this controls the overall look and feel of your site (slight change for Drupal 7). For those of you who have coded sites with HTML (and CSS), this is like the index.html page you created.
  • node.tpl.php - this controls how a node is built

Intro to creating a custom theme

There is only one file you must create in order to define your first custom theme: the ".info" file. Create a new subdirectory somewhere under your "sites" directory. For instance, try creating the subdirectory sites/all/themes/mycustomtheme. Inside that subdirectory you can create mycustomtheme.info. Note that you do not have to use the same name for the .info file, but it is common practice just to keep things logical.

How to not hack core

Okay, so you are ready to start customizing your Drupal installation. Before you get started, there are some things you should know and follow.

  • Drupal provides a directory structure that is designed to be used in a certain way. Notice the subdirectories below your Drupal root:
    • includes
    • misc
    • modules
    • profiles
    • scripts
    • sites
    • themes

Detailed instructions for building the slideshow

  1. Create an image content type.
    1. Navigate to admin/content/types/add.
    2. Enter the human readable "Name:" Image.
    3. Enter the "Type:" image.
    4. Enter a description.
    5. In the Submission form settings field set, enter a Title field label, Body field label, and the Explanation or submission guidelines as you choose.
    6. In the Workflow settings field set uncheck Promoted to front page.
    7. In the Comment settings field set select the disabled radio button for the Default comment setting field.
    8. Click Save content type.

Quick outline on my DrupalCamp Colorado presentation on views and views slideshow

Disclaimer: The intent of this presentation was to give people a quick, brief, and focused introduction to views. I chose to do certain things in certain ways to stick to that intent. Thus, don't consider that this is the only, or even optimal way, of creating a slide show. However, I used almost these exact steps to create the slide show at the top of the front page on http://isaacsonwebdevelopment.com. The only additional things I did were to code some CSS and put some "anchor" tags in the image nodes and text nodes.

Credits: XWeb | Chris Herberte | Andreas Viklund