• Left Brains.

  • Right Brains.

  • Brand Soul.

How-To: Create a Simple Slideshow Header in Drupal 7

UPDATE: Since the posting of this article there has been dramatic improvements by the community and now this is no longer the best way to implement this feature. We now use the "Views Slideshow," found at: http://drupal.org/project/views_slideshow. We have used this method to create the various slideshows for the City of South Bend at www.SouthBendOn.com.


One of the more common design elements of modern webpage design is a large content area on the landing page of a website. Though there are some Drupal 7 themes that have this feature already (Marinelli comes to mind), what if you want to use a different base theme (like Zen)? In this How-To I will discuss how to create a simple slideshow that can be used in any theme.

The first thing that needs to be done is to ensure that your Drupal 7 environment is set up to support the slideshow. The following Drupal 7 modules need to be installed:

The WYSIWYG module (http://drupal.org/project/wysiwyg) also can be installed to make editing the content easier, but it is not necessary.

Theme ".info" and supporting files

In order to incorporate the slideshow into your theme you will need to reference some external resources in your theme.info file. You will need to add a stylesheet that defines the UI and the JavaScript libraries necessary to make it work. First obtain the following jQuery libraries and place them in the "js" directory of your theme (or other directory that holds the themes external JavaScript files):

  • jquery.cycle.all.min.js
  • jquery.easing.1.3.js

Once you have those files where they need to be, then create a new JavaScript file in the "js" directory. For the purpose of this article, we will name it utility.js. In that file place the following code:

jQuery(document).ready(function() {
jQuery('.slides').cycle({
fx: 'fade',
   speed:       500, 
            timeout:     6000, 
            pager:      '.slidenav', 
   pagerEvent: 'click', 
   pauseOnPagerHover: true,
pause:true
})
});

Once those files have been placed where they need to go, add the following to your themes ".info" file (assuming the files are in the "js" directory):

scripts[] = js/jquery.cycle.all.min.js
scripts[] = js/jquery.easing.1.3.js
scripts[] = js/utility.js

Now that you have the necessary JavaScript linked, you need to define the visual appearance and structure of the slideshow. The following is in the file slides.css that is located in my theme's css directory.

@charset "UTF-8";
/* CSS Document */

.slideshow-container {
height: 340px;
}

.slides {
width: 970px;
height: 340px;
overflow: hidden;
position: absolute;
background: white;
}

.slides .slide {
height: 340px;
}

.sdw-l, .sdw-r {
background-repeat: no-repeat;
width: 30px;
height: 485px;
position: absolute;
z-index: 99;
}

.sdw-r {
background-image: url(../images/sdw-r.png);
margin: -155px 0 0 978px;
}

.sdw-l {
background-image: url(../images/sdw-l.png);
margin: -155px 0 0 -30px;
}

.slides .slide .text {
float: left;
width: 450px;
padding: 10px 15px;
}

.slides .slide .text p {
line-height: 1.5em;
}

.slides .slide .text p a {
color: #4a64aa;
text-decoration: none;
}

.slides .slide .text p a:hover {
text-decoration: underline;
}

.slides .slide .photo {
overflow: hidden;
width: 480px;
height: 280px;
text-align: center;
vertical-align: middle;
float: right;
}

.slides .slide .photo img {
margin: 20px auto;
}

.slideshow-container .slidenav {
position: relative;
margin: 280px 55px 0 0;
z-index: 100;
float: right;
}

.slideshow-container .slidenav a {
display: block;
height: 30px;
width: 30px;
text-align: center;
margin: 0 8px;
float: left;
background-color: #e5e2df;
color: #a1988c;
text-decoration: none;
line-height: 30px;
}

.slideshow-container .slidenav a:hover {
background-color: #4a64aa;
color: white;
}

.slideshow-container .slidenav a.activeSlide {
color: #4a64aa;
}

.slideshow-container .slidenav a.activeSlide:hover {
color: white;
}

Of course the colors and other design related items will be changed to match the visual look and feel of the theme that you are creating. Once the CSS file is created and in the necessary directory, the theme needs to be informed of its existence. Simply add the following line to your themes ".info" file.

stylesheets[all][]        = css/slides.css

One last item needs to be added to the themes ".info" file. The region needs to be defined for the location of the slideshow. I have created a region named "slideshow". To add this add the following in the regions section of the .info file.

regions[slideshow]      = Slideshow

The final structural item that needs to be modified is the page.tpl.php template file. The template needs to be modified to render the slideshow content. Below is a snippet of the template that is necessary. Notice that the only thing necessary to display the slideshow contents in the  print render... call for the slideshow region.

Slide Show Content type

Once the structural elements are taken care of now you need to create a "Slide Show Content" content type so that the items can be easily added.

  1. In the "Content Types" section of the Drupal administrative interface create the type. In this type a 3 fields:
    • Title
    • Body Text
    • Slide Image
  2. In the "Manage Display" tab move both "Body Text" and "Slide Image" to be hidden. Also, the comments for this content type should be disabled.
  3. Once you have the content type, you can create a new slide using the "Add Content" links and populating the form fields.

Creating the Slideshow View

Much of the power of this approach comes from the View module. In order to correctly gather the slides that are to be displayed and then render them on the properly a new view needs to be created. In the administrative interface select Structure->Views and create a new view. I named mine "Front Page Slide Show Content". Do the following to create the view block:

  1. Create a "Block" display for the view
  2. Under Format, select "Unformatted list"
  3. Under Format -> Settings, select "None" for the Grouping Field, and enter "slide" for the Row Class
  4. Under Show->Settings check all "Content: Title", "Content: Body", and "Content: Slide Image" as inline fields
  5. In order for the correct XHTML to be generated the output of the fields needs to be added and then modified. User the Views admin UI to add the Title, Body, and Slide Image fields within the "FIELDS" section. Once you have done so make the following changes to the fields.
    • Content: Title=> Under "Rewrite Results," check the "Rewrite the output" box and use the following in the text:

      [title]

    • Content: Body=>Under "Rewrite Results," check the "Rewrite the output" box and use the following in the text:

      [body]

    • Content: Slide Image=>Under "Style Settings," check the box for "Wrap field in HTML," choose "DIV" for the HTML element. Check the "Create a CSS class" box and enter "photo" for the CSS class.
  6. Add "Content: Type = Slide Show Conent" to the View's filter criteria.
  7. Under Block Name enter a name that you will reference when you add the block to the page's structure
  8. Save the view

View Block Template File

Now that we have the view and the content type for the slideshow, we need to make sure that the block will render properly within the page. To do that I have a custom template file for this view's block. For this article the name of this file is views-view--slide-show-content.tpl.php. Below is the contents of the file:

Adding the Slideshow and wrapping up

The final step is adding the block to the page design. To do that, go to the Structure->Blocks section of the Administrative interface. From there add the View Block that you just created to the "Slideshow" region that you defined earlier. Now once you refresh your cache and look at your page you will see the slideshow.

We at Force 5 are always looking for ways to improve, so I welcome any comments or suggestions that you might have. Since Drupal 7 is so new and there is little documentation on many of the features I look forward to hearing the community's voice for suggestions. If you would like to hear more about Force 5 Drupal development, feel free to Contact us and we would be happy to discuss them with you. In the meantime feel free to read our blog or read other How-Tos

Comments

This was a great write-up, thanks a lot! I did have a question about the View Block Template File. Does this new file name (views-view--slide-show-content.tpl.php) need to be added to the Theme Registry somehow? If not, how does the theme know to use this new file when arranging the Slideshow View?

I'm hoping the answer to this question will solve my problem. I have followed these instructions but I am only ending up with the pictures I added with the new content type stacked on top of each other..with no animation switching the images.

Thanks in advance.

Christian's picture

Thanks for your kind words.

The theme template file is copied from Core and then overridden in the theme directory. To get the information as to what template that is being go to the view that you are using to populate the slideshow. In the "Advanced" section there is the Theme: information link. This link will tell you the appropriate theme template files for that view. Pick what you want to customize and then override the view by coping the template file from Core. Do <strong>NOT</strong> edit the original template file; be sure to copy it to your theme directory. Otherwise, when there is an update to core, your changes and customizations will very well be eliminated.

It is my guess that there is a missing DIV or some other element in the page which is causing the style and jQuery to not be applied properly to the page that you describe. Feel free to send me a link to the page you are working on and I'd be happy to take a look to see if there is anything quick off the top of my head.

In views I could not find the "Content: type = Slide Show Content" to the views filter criteria. I am afraid I can't make the slide show.Is it a problem of my drupal version or I missed something.Please reply. I have never been this close to make the slide show success.

Christian's picture

In order to have "Slide Show Content" show up as a filter criteria, you will need to create a new "Content Type" within the Structure section of the administrative interface. Once you have created that content type then it will be displayed. Within this content type is where you put the fields that will be used by the view to render the slideshow.

I just did everything here that you wrote. But it's not working properly.
The images is not showing as a slideshow, instead they appear underneath each other. What did I do wrong?!

Christian's picture

If the images are "stacked" then it is probably related to the CSS positioning of the elements. The examples that are included in the post are not necessarily "production" but are segments of a larger system. I would check the CSS first (I like using Chrome's element inspector for that personally). Good luck!

Hello, as a newbie trying to find my way around Drupal, I found it a very detailed write-up. The only problem is I cannot get it to work. I have been through the steps a few times but do not see any images. I imagine I made a very basic mistake , any help would be appreciated. 

As a ps . Im running everything local so that I can play around with Drupal, so I do not have a web server where I can upload anything...

Hiya - great article, a much easier approach than views-slider I think. I am having real trouble getting a Superfish menu to appear over the top of this - any tips?

Hi Christian,
Thanks for this article, which is really useful as it's something I've been trying to figure out. I too am struggling to get it to work and I think it's this last part about template files. I'm a little unclear about what I should be copying from where and to where in order to get things to work correctly. So far I have the view and the content types all working fine and a nice slideshow region but I'm not getting any pictures in it.
Best regards Steve

Christian, thank you for sharing with us this precious information. I was able to make it work with Drupal 7 and use the Advertise region form Minnelli theme and together with Context module, I can change the banners with images related to the page being viewed.
Very good, many thanks.

Make sure you have the template file views-view--the-name-of-your-content-type.tpl.php in the correct place. In views, check theme information and you can see which template it is using. Press refresh to confirm the correct use of the above template.

first of all: thanks a lot for your tutorial! - but unfortunatelly I can't get the styling working - do you have an idea what the problem could be?

Very nice tutorial :) I happen to have the same issue, i placed the file views-view--slide-show-content.tpl.php in my theme-folder along with the other php-files but the images are showing underneath each other. I also couldn't find the "slideshow"-region in the regionlist when I placed the block so I had to place it in another region... do you think that could have something to do with it? If so, do you have any suggestions for solutions?

pager is not working

I can't able to see pager, would you please explain that how to fix it?
 

aha .. great tutorial :) love it

i'm still confuse. in Drupal, if I want show any post as "slide show" content, I have to make a "slide show" content type. How to generate a slide show from newest post from all category/ content type? In wordpress I can easily integrate jquery in theme and display all post or post from some category, or excluce some category I want. How Drupal this?