Building a Rotating Image Banner as a Views Slideshow

UPDATE: Over two years later, this post is still one of the most highly trafficked on my blog. Since then I've learned a lot and shared many other tips and modules. This past year I was honored to be a contributor to The Definitive Guide to Drupal 7, which includes many other great tutorials like this. I highly recommend it if you want to get the latest and greatest information on developing for Drupal.

On two separate sites I've recently had to implement a rotating image banner that could optionally be linked to paths within the site or to external URLs. Originally I tried a (mostly) self-contained module that matched the feature set called Rotor with some success but really needed greater flexibility. Undaunted, I rebuilt the functionality using a custom content type, a few CCK fields, ImageCache, and Views with the Views Slideshow plugin.

This tutorial is for Drupal 6 and walks through the exact steps I took to build the slideshow for the relaunch of Biblical Training, including enabling the right modules, creating the content type, defining the ImageCache presets, and building the View.

Hope it helps!

1. Enable the dependent modules.

To get started, you'll need to download and install the modules listed below. It takes quite a few modules to reproduce the feature set of a single module, but building a complex feature from scratch has advantages in flexibility and reusability. Most of these modules are standard "utility" modules on many Drupal sites that can be used for a variety of purposes on your site.

Enable the following modules through the /admin/build/modules form. In the CCK fieldset enable Content, FileField, ImageField, Number, Option Widgets, and Text. In the ImageCache fieldset enable ImageAPI, ImageAPI GD2 (or ImageAPI ImageMagick if your server supports it), ImageCache, and ImageCache UI. In the Other fieldset enable Advanced Help. In the Views fieldset enable Views, Views Slideshow, Views Slideshow: SingleFrame, and Views UI.

2. Create the Banner content type.

Browse to /admin/content/types/add on your site and create a new custom content type with the name set to Banner, the type set to banner, and a meaningful description for your site's administrators. A body field for the banner is unnecessary, so you can expand the Submission form settings fieldset and disable the field by clearing the Body field label textfield. I leave the Workflow settings defaulted as Published and Promote to front page, but you might adjust these depending on the editorial needs for your banner content. Finally, because comments are unnecessary for banners, I set the Default comment setting in the Comment settings fieldset to Disabled.

3. Add the necessary CCK fields.

I use three CCK fields: an image field, a textfield used to collect the link path, and an integer select list used to provide a sort order for banners in the Views. At this point, I'll mention that an alternate method of ordering banners would be to use the NodeQueue module, but it was unnecessary for my use cases.

To add the fields, browse to your Banner content type's Manage fields tab using the operations link from the content type list page:

First, add a new field positioned under the title labeled Image with banner_image in the name textfield. The field type should be File and the widget type should be Image. I like to store my banner images in a specific files directory, so I provide a file path in the Path settings fieldset (like banners). I didn't enable ALT text (i.e. what appears if an image does not load), but I did enable Title text (i.e. what appears when you hover the mouse over an image). Last, in the Global settings fieldset I mark this field as required.

Second, add a new field positioned under the image labeled Link path with banner_link in the name textfield. The field type should be Text and the widget type should be Text field. I don't adjust the default settings for the field at all, but you can feel free to require a link path for every banner image or include a help text informing your users to enter a Drupal path or a full URL.

Third, add a new field positioned under the link path labeled Sort order with sort_order in the name textfield. (I don't use a banner specific name for this field because I reuse the sort order field on multiple content types.) The field type should be Integer and the widget type should be Select list. In the Global settings fieldset I mark this field as required. The other settings are tricky. Even though it's more than most sites will reasonably require, I tend to allow a sort order of 1 to 50. So, in the Minimum textfield put 1, in the Maximum textfield put 50, and in the PHP code textarea for the Allowed values setting put the following snippet:

return drupal_map_assoc(range(1, 50));

When you view the fields screen for the content type, it should now look like this:

4. Define a couple of ImageCache presets.

While your site will likely require your banner images to have uniform dimensions, it's not necessary to enforce them on the file upload. Using the ImageCache module, we can define presets that are collections of actions performed to transform an image on display to your desired specifications. These transformed images will be cached in your site's files directory so they don't have to be regenerated each time they're viewed. On my sites, I use one preset for the image as it should appear in my rotating banner and a smaller preset for use in lists. I still recommend to my administrators to attach files to the proper size for the full banner to avoid any scaling or cropping issues.

Browse to /admin/build/imagecache/add, enter banner_full as the Preset Namespace, and submit the form. Next click the Add Scale and Crop link and enter the precise pixel width and height the image should be in your rotating banner. For this example, I'm using a pixel width of 690 and height of 230. When you click the Create Action button, you will be returned to the preset's configuration page where you can preview the transformed Druplicon image beneath the form to make sure ImageCache is transforming images properly.

Repeat this process using banner_small as the Preset Namespace and a smaller set of dimensions. I divided by 3 to use a pixel width of 230 and height of 77.

With the ImageCache presets defined, we need to go back and edit the Banner content type to use these for image display. From its edit form, click its Display fields tab. On this form, set the Image field's label to be hidden, its teaser to be banner_small image linked to node, and its full node to be banner_full image linked to image.

5. Create the rotating banner View.

Now that we have a Banner content type defined and the ability to resize its images on display, it's time to create the heart of the rotating banner. Creating Views isn't for the faint of heart, but it's an essential skill for a Drupal site builder or developer. Without explaining Views in too much detail here, I'll simply list the steps to recreate the precise View I use.

  1. Browse to /admin/build/views/add and create a new Node View (the default type) with the name rotating_banner.
  2. Change the style to Slideshow by clicking the Unformatted link next to the Style label in the View's Basic settings. When you do this, it will bring up a second settings form with several options you can adjust dealing with the animation and behavior of the slideshow. For now, it's enough to leave them all to their defaults by just clicking the Update button.
  3. I don't make any assumptions about how many images the rotating banner should have, even if 10 or more is overkill. Stil, I click the 10 link next to the Items to display label and set it to 0 for unlimited.
  4. Click the + link by the Fields area to add a new field to the View. Scroll down the checkboxes list an check Content: Link path. This field won't actually be displayed, but we need it to be present in the View for use as the link path for the image banner. Simply check the Exclude from display checkbox and click the Update button.
  5. Click the + to add another field, this time selecting Content: Image. In the settings for the field, check the Output this field as a link checkbox to expand some link settings. In the Link path textfield, put the token [field_banner_link_value]. Further down in the field settings form select the None option in the Label radio buttons. Last, in the Format select list, choose banner_full image and click the Update button.
  6. Click the + link by the Sort criteria and add Content: Sort order. Leave the settings for the sort order to the default and click the Update button.
  7. Click the + link by the Filters area and add the following filters all at once: Node: Promoted to front page, Node: Published, and Node: Type. For the promoted and published filters, choose the Yes option. For the node type filter, choose Banner in the Node type select list.
  8. Last, we just need to add a page display to the View. In the top left of the View edit form locate and click the Add display button beneath the select list with Page already selected. The only thing to adjust on the new display is the path, so click the None link by the Path label in the Page settings area. Enter banner in the textfield and click the Update button.
  9. Click the Save button beneath the View's settings area. Your View's settings should now look like the following image:

6. Display the View on the front page.

There are several ways to display this View now. The way I've implemented it for my sites, I set the default front page in my Site information settings form at /admin/settings/site-information to the rotating banner page's path, banner. I then added additional content to the front page using blocks.

Depending on the regions in your theme, you might alternately set the front page to something else and use a block display on the View instead of a page display. That's really up to you and how your site is architected.

Whatever you do, once you've set it up, start adding banner images to the site and they should appear. The way the View was setup, only banner images marked as Promoted to the front page will appear. If you're using a rotating banner in multiple places, you might only include that filter on a specific display of the View. Really, what we've done is just a beginning, and there's almost nothing you can't do to customize this for your site.

Comments

Great tutorial Ryan. I have been using this module on a project I am currently working on. Been kind of a trial and error process to get it to do want I want. Glad to have tutorial to reference now. Thanks a a lot for sharing.

bt looks great...i did not read the rest of the post because i do not know what it means but the site looks good!

haha No worries. Thanks for stopping by. Smile

Also, saw your wife tonight. Missing from the picture were you and us sitting at a table full of food. We should fix that sometime when Summer permits it.

Excellent tutorial. I also like the Biblical Training site. Very nice and helpful. You guys have assembled the instruction of several excellent scholars and teachers and made them conveniently available to all. Great job.

On our site, I'm using Drupal 6, Views 3 (with Views Slideshow and all dependency modules installed). I'm also displaying the view as a block inside of panels. I've followed your tutorial all the way through 2-3 times and completely rebuilt the view twice. I have 3 starter image/nodes loaded. Each time, though, all I get is the first image to display as a single image but the slideshow won't cycle through the images.

One question I have (which could perhaps play a role in my dilemma) is that I don't fully understand the need for the link path field in this particular view. One deviation I made is that when adding this field, I already had the "Link" module installed on the site and used it to create this field. Additionally, when I build image nodes am I supposed to define a path for each node? I did not add information into the Link field cell when I added the nodes. If I am supposed to add link data, couldn't I use pathauto for that?

Here's the code from my block display. Do you see anything that I'm missing?

SELECT node_data_field_link_path.field_link_path_url AS node_data_field_link_path_field_link_path_url, node_data_field_link_path.field_link_path_title AS node_data_field_link_path_field_link_path_title, node_data_field_link_path.field_link_path_attributes AS node_data_field_link_path_field_link_path_attributes, node.type AS node_type, node.nid AS nid, node.vid AS node_vid, node_data_field_image.field_image_fid AS node_data_field_image_field_image_fid, node_data_field_image.field_image_list AS node_data_field_image_field_image_list, node_data_field_image.field_image_data AS node_data_field_image_field_image_data, node_data_field_link_path.field_order_value AS node_data_field_link_path_field_order_value FROM drp_node node LEFT JOIN drp_content_type_slideshow_element node_data_field_link_path ON node.vid = node_data_field_link_path.vid LEFT JOIN drp_content_field_image node_data_field_image ON node.vid = node_data_field_image.vid WHERE (node.promote <> 0) AND (node.status = 1) AND (node.type in ('slideshow_element')) ORDER BY node_data_field_link_path_field_order_value ASC

God Bless,

John Sheppard

Very nice tutorial - even though I'm a Drupal novice, I could follow every step and learnt more about how Drupal works in the process. Thank you.

Inevitably, there will be users whose specific setup causes problems and I was one of them. The first slide displayed fine but did not rotate through the others even though the content was being retrieved with no problems (changing to a 'Grid' layout showed all of the slides). The slideshow controls were also missing from the view.

After much digging, however, I discovered that Shadowbox and Views Slideshow appear to conflict - I disabling Shadowbox and everything worked fine for me. Just another potential source of problems that users should be aware of in case they are experiencing something similar.

Thanks again.

[p.s. Posting as a fresh comment triggered the spam filter that rejected my message, hence my reply to a not-directly-related post.]

I'm not sure how you did it but you published this within hours of when I began fighting with the code for a rotating banner that I need for one of the sites I have a deadline for soon!

I read through the tutorial (without fingers on a keyboard) and it looks as if it will do exactly what I need. Tomorrow morning I'm going to read it again while actually doing the project to see what I can learn.

Thank you ever so much, for this and for all the other energy you've put into the Drupal community.

Awesome new, Dan, and thanks for the kind words. Smile

I too have been struggling with the exploiting the Views Slideshow but just could not get insert it into the web pages. Thank you, Ryan for your very competent, eloquent and thorough tutorial. I am bookmarking it and saving it forever.

Hi Ryan,
Not strictly related to your how to but as i think that biblicaltraining.org looks great, i was wondering how did you organize your content there (category ? taxonomy ?) and generate navigational menu ?
i'm new to drupal and I've hard time figuring out how to structure content within drupal actually Sad ?

Thanks.

Well, a lot of Views were used for things like Speakers pages and Lectures listing within classes. However, Bill handcrafted a lot of the content as well. I don't believe any of the Class listings are generated by Views - because a new class being added is so infrequent, the appropriate page is manually updated when a new class launches.

As for other content, the bookstore is Views driven, as are Certificates listing pages (along w/ class lists on Certificate pages), and all the informational pages are handcrafted.

The menu bar across the top is simply the Primary Links menu displayed using the dropdown menu available through Top Notch Themes' Fusion Market Share theme.

But really, I guess the short story is Bill manages a lot of the content / organization by hand, and it's often a process of trial and error until everything fits and people can find what they need. Lol

Thanks for writing this up! I'll add a link on the views slideshow project page as well as the documentation.

Awesome. Cool

This looks like it would be a great redistributable feature!

Agreed! I have Features installed on the site I used to create this tutorial but hadn't gotten around to attempting the export.

I've wrapped up the configuration described in this tutorial into a Feature: Sulen, a rotating banner based on Views Slideshow 6.x-2.x

Curious why you use a text field for link path rather than just the one link image field http://drupal.org/project/linkimagefield?

I guess I could give a three-fold answer:

  1. I didn't know the module existed. Smile
  2. Even if I did, it'd be just one more module to install for no real purpose. I can do all I need through the field's display settings in the View using the textfield, which is a core part of CCK.
  3. I don't need the image to appear as a link on the node because my use case doesn't involve anyone except administrators ever needing to see the actual banner nodes. I'd use the "Link Image Field" module if I needed to output the image as a link through the display settings for my content type's fields. So it does have a purpose, but it's not a requirement here.

The fewer modules the better when it comes to ongoing site maintenance.

I followed the tutorial, and everything in all the pictures looked identical and I even went through the tutorial a second time and double-checked everything. The only difference is that I did not use the promoted to front page filter but I wouldn't imagine that would effect anything.

I did create a block display view, which isn't working, but I even tried just viewing the page view at www.helixathens.com/banner and that didn't work either. Here is the query I get from the live preview, maybe that could help you help me!

SELECT node.nid AS nid,
node_data_field_banner_link.field_banner_link_value AS node_data_field_banner_link_field_banner_link_value,
node.type AS node_type,
node.vid AS node_vid,
node_data_field_banner_link.field_banner_image_fid AS node_data_field_banner_link_field_banner_image_fid,
node_data_field_banner_link.field_banner_image_list AS node_data_field_banner_link_field_banner_image_list,
node_data_field_banner_link.field_banner_image_data AS node_data_field_banner_link_field_banner_image_data,
node_data_field_sort_order.field_sort_order_value AS node_data_field_sort_order_field_sort_order_value
FROM node node
LEFT JOIN content_type_banner node_data_field_banner_link ON node.vid = node_data_field_banner_link.vid
LEFT JOIN content_type_banner node_data_field_sort_order ON node.vid = node_data_field_sort_order.vid
WHERE (node.status <> 0) AND (node.type in ('banner'))
ORDER BY node_data_field_sort_order_field_sort_order_value ASC

Hmm, when I look at the HTML of your page, it has the necessary divs to display the View, but they are indeed empty. Your query looks exactly like the query from my test site, so my hunch is you've configured everything properly. I'd double check to make sure you have created some published banner nodes. When I browsed to your site's /node listing, I didn't see any that looked like banners.

I didn't direct you to add an "Empty text" message to the View, but if you did so and that was showing up for you, then it just means that Views can't find any nodes matching the criteria after the WHERE statement in the query (for yours nodes that are published and have the banner node type).

I get this same result. exact same verbage. could it be that the images are sized to be too big. i'm lost.

Hi,

Thanks for the tutorial.

While Creating Content after your tutorial there are three processes 1. Create a custom image with custom text on it using a photo editor 2.Create the page for the Link path and 3. Create the Banner.

It would be simpler for a person creating content to have a one step process like in the Dynamic display block module http://drupal.org/project/ddblock Of course there are separate headaches while setting up ddblocks.

First, I think that this is a great tutorial. You broke down something complicated so that anyone can do it. I have all my banners displayed in a column at /banner.

One thing though - my banner doesn't rotate. Honestly, from the instructions and what I know of views so far, I still can't see how I could get this to rotate.

I tried adjusting the views style settings and that didn't work either.

How do you get it to rotate?

Hmm, I don't suppose you can put a screenshot of your View's configuration page online somewhere? Did you get step 2 of the View configuration? If you did that, instead of a column, you should only be seeing a single image.

First, I did not realize that the views slideshow module is separate from the views module. So, I downloaded views slideshow 2.1. That showed the slideshow option but using that option left me with a black screen at /banner. So, I downloaded views slideshow 2.0 instead and it worked!

Thanks so much!

A feature of Views Slideshow that is not well known is that when the mouse pointer is on the current image, the slideshow will pause and appear to not rotate. Just a thought.

Great Writeup. Got it working first time. But I got more hungry.

Would you know if this can modified to show more than a single frame? Say if I need to show 3-4 banners in row and then rotate those? Something what a jcarousal type effect? I don't need to rotate each frame. Just when banner goes out of view from frame1, everything shifts to say left and new banner appears at the rightmost frame.

m not able to see the banner...i hv followed all the instructions as given above..the preview i got is :
SELECT node.nid AS nid,
node_data_field_banner_link.field_banner_link_value AS node_data_field_banner_link_field_banner_link_value,
node.language AS node_language,
node.type AS node_type,
node.vid AS node_vid,
node_data_field_banner_link.field_banner_image_fid AS node_data_field_banner_link_field_banner_image_fid,
node_data_field_banner_link.field_banner_image_list AS node_data_field_banner_link_field_banner_image_list,
node_data_field_banner_link.field_banner_image_data AS node_data_field_banner_link_field_banner_image_data,
node_data_field_sort_order.field_sort_order_value AS node_data_field_sort_order_field_sort_order_value
FROM node node
LEFT JOIN content_type_banner node_data_field_banner_link ON node.vid = node_data_field_banner_link.vid
LEFT JOIN content_type_banner node_data_field_sort_order ON node.vid = node_data_field_sort_order.vid
WHERE (node.promote <> 0) AND (node.status <> 0) AND (node.type in ('banner'))
ORDER BY node_data_field_sort_order_field_sort_order_value ASC

i dnt knw wheres the bug..help plz..

This is a great write up.

In the introduction you said you wanted something like Rotor, but different.

Out of curiosity, what is different between what you have accomplished (pretty amazing) and what Rotor does?

I followed all the instructions, but cannot see the rotating banner.

I am a newbie with regards drupal and php, so please excuse my ignorance here.

the page is:
http://summitcycles.co.za.www89.jnb2.host-h.net/banner

i added three images:
http://summitcycles.co.za.www89.jnb2.host-h.net/content/bannerimage3

i also created a block and dropped it into the footer - still nothing.

these are my settings, please let me know what else i can give you to check why it is not displaying.

SELECT node.nid AS nid,
node_data_field_banner_link.field_banner_link_value AS node_data_field_banner_link_field_banner_link_value,
node.type AS node_type,
node.vid AS node_vid,
node_data_field_sort_order.field_sort_order_value AS node_data_field_sort_order_field_sort_order_value
FROM node node
LEFT JOIN content_type_banner node_data_field_banner_link ON node.vid = node_data_field_banner_link.vid
LEFT JOIN content_type_banner node_data_field_sort_order ON node.vid = node_data_field_sort_order.vid
WHERE (node.promote <> 0) AND (node.status <> 0) AND (node.type in ('banner'))
ORDER BY node_data_field_sort_order_field_sort_order_value ASC

WOW WOW WOW WOW :-)

Thank you SOOOO much !!

After struggling with creating a slideshow gallery I found this article linked from Views Slideshow projects page on drupal.org .

You saved me so much time and frustrations..

You're the man !!!!

I couldn't get it to work. All of my pictures resembled yours all the way up to the 5th step.

I followed every step point for point and I'm not sure where I might have dropped the ball. The last thing I did was changed the site information Default front page. ("banner" instead of "home.")
------------------

Can the last step read like this

"and then click save, or drag this image to this folder, go to your home page and you'll should see your work in action" ?

I can't tell from your comments if you've actually added banner nodes to the site after doing all the setup... Drupal won't have any stock content to go from, so you'll then need to add content through the appropriate menu (Create content > your node type).

Espresso Maker | Electric Scooters. | Stand Mixers | Slow Cooker
I agree with the entire comment above. Thanks for sharing nice information with us. i like your post and all you share with us is up todate and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job.

help

maybe I have faulty modules? are there any videocast that I can be pointed too? Your gallery looks really good and I'd like to learn. thanks ralexanderclark@mac.com

thanks for the easy to follow tutorial.

How can you set it to have different pages depending on the page url?

ie the about images for the www.site.com/about page ... etc

The tutorial was a great help and after a bit of fiddling I got it working.

I tried this after Rotor banner didn't work for me. Got everything to work and the banners rotate fine but no users could see other than admin. It was invisible to other users. I set it as a block to run rotating banner ads. the default and block view is set to access = unrestricted.

I could not even see them when I tried to access the node directly i.e. www.mysite.com/node/52
I had to go to admin/users/permissions and set the under the newly created content_permissions module for anonymous to be able to view and or edit the images. You might add this to the tutorial.

One other request. How do you add a field to the link path field that will allow you to open the link to another browser or tab (which would be great for an offsite link)?

Thanks again for the fine work. All the best

R

Hmm, at that point I'd probably just recommend using the Link module. Smile

For that you could add multiple Page displays and assign them each a unique path. Then in your View's "Filters" sections you can add filters to display the appropriate content.

first of all i would like to say thanks for this greatful tutorial , i did all the stpes in the tutorial but i didn't get the path and also i am unable to view images so could you please help me how to view images and how to set the path.
thanks&regards
ramakrishna

from my experience I did not have to set the path. I think that is only if you want a special folder to hold the slideshow images rather than the default folder.... I didn't set the path and it worked. one thing when you finish editing your view and display in the view make sure you save the view. the filters you added and the changes you made will no longer be in bold. I added a block display rather than a page display and did not require promoting to the front page.

first make some "banner" images and then see if you can view them if you are logged out and you try to access the node you just created directly by going to mysite.com/node/x if you cant see them go to admin/users/permissions and under the heading of 'content_permissions module' allow everyone to view the field_banner_full. viewing link and sort order is optional.

hope that helps

R

you should set permissions to view field_banner_image
R

if you still can see them check your template file to make sure it is not a javascript error such as

<?php
global $user;
if (!
$user->uid) {
    Print
'<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>';
}
?>

and also please mention the details of how to add images to our site it helps me a lot please help me.

This tutorial was really easy to follow! Thanks for posting it!

For ages I have lamented the lack of decent documentation on views slideshow or any similar modules. This really fills that gap and is probably the best walk-through out there.

OK, I have done this twice now, with the same result. Nothing, nada, zip, zero pictures showing. I have tried it twice and I know, just know I am doing something insanely, foolishly, wrong. Here are my questions to hopefully narrow down the list:
1) When uploading new pictures do I use admin/create content/banner and then upload my content?
2) After, I upload my content, I would expect it to be uploaded to files/banner, but instead, it is going
to files/imagecache/banner_full/banner... is this correct?

Anything else I could possibly try. I want to like Drupal, but failing this badly is discouraging.

Bob, I was experiencing problems like you describe -- I followed the tutorial exactly, but pictures weren't showing up. Finally it occurred to me to check permissions, and I found that I hadn't used ImageCache yet, and the permissions were set to not allow anonymous users to access. (There are a lot of default permissions in Drupal that mystify me.) In any case, when I turned on a bunch of permissions (admin/user/permissions) I saw the pictures. That was the big breakthrough.

It also doesn't hurt to hit the "Flush all caches" button in the upper left corner of admin toolbar every so often. (If you don't have "admin toolbar" you need to get it!)

Ryan: Thanks for taking the time to do this. You are amazing, the Drupal community is so lucky to have you!

I went through the entire tutorial and followed all the setup procedures. But there must be something that I am missing.

After the setup I created banner content with images. 5 different pages. When I preview them they show up with the title, and the picture. This works for each image. But, when I press Home, the screen goes blank and no images show up on the screen.

Any Help?

Hi,

Thank you very much for your work. I have followed all your steps and, after solving some .htaccess problems with my hosting (I couldnt see the images in the sites/default/ directory), this works properly. There is only one thing I don`t have in my page and it's the numbers (1,2,3...) of the banners when those are shown in order to watch the banner you want pressing that number. I mean I can't see those numbers in my banner rotator page, so How did you do it. A thousand thanks!

In the Slideshow settings, accessed by clicking the gear to the right of the Style: Slideshow line in the View configuration, you will see a fieldset titled SingleFrame options. About two thirds of the way down, you should see a select list titled Page that lets you put the numbers at the top or the bottom. There are other display settings in here that affect the activity and features of the slideshow, too. Smile

Happy to help!

Pages