Creating a rotating image block using Views and ImageCache

Submitted by Eric.London on 2/12/2009

Tags:

Add new comment

A rotating image block can easily be created by using modules that you make already have installed. If you have not already download, install, and enable the following modules:

Views
CCK
FileField
ImageField
ImageAPI
ImageCache

After you've installed these modules, you'll have to adjust the user permissions (admin/user/permissions) to ensure the correct roles have permission to view and administer these modules.

Create a new ImageCache preset (admin/build/imagecache). In my example, I named it "home_rotating". I also added a Scale action to ensure all the images are the same width. It's probably a good thing to check the region width in your theme and adjust the image width accordingly.

Define a new content type (admin/content/types/add). In my example, I named it "image_home_rotating". I left off the body field label because I am only concerned with displaying the image (no other text). Add a new field to the new content type, and choose File for the Field type and Image for the Widget. I named mine "field_image_home_rotating" and labeled it "Image". After adding the field, click on the Display Fields tab. For teaser and Full node, choose the ImageField preset you just created. This will ensure the right image size is used when viewing the node.

Create a new view (admin/build/views/add). Make sure you choose Node for View Type on the first form screen. Add two filters: one for published nodes; and one for node type, and choose the newly created node type. To get a random selection of nodes, add Sort Criteria and choose "Global: Random". Limit the Items to Display to 1. You can leave the Style set to Unformatted and the Row style to Fields. Add a new field and select the newly created image field. When adding the field, the Format setting allows you to change the ImageField preset. If it's not already set, choose your new preset. I also choose to hide the Field label on this step. Add the Block display to the view and save it.

Lastly, assign this block view to the region in your theme and add a few image nodes. As you refresh the page, the image should change.

Making image a link

Submitted by Anonymous on Thu, 05/19/2011 - 12:45.

This is a great tutorial! Could you tell me though how to make each random image link to a web page when cliked on?

error in article: should use

Submitted by Anonymous on Fri, 06/25/2010 - 18:00.

error in article: should use *file* as the CCK type and *image* as the corresponding widget. Not image for both, as you say.

shiraz

oops

Submitted by Eric.London on Thu, 07/22/2010 - 15:43.

Thanks for the correction!

Thank you

Submitted by Anonymous on Fri, 04/09/2010 - 10:29.

I have been looking all over the internet for this random image display. Your tutorial saved a lot of time for my project. I am so relieved by finding this blog.

Once again I have to thank you for this great tutorial.

I finally figured out why

Submitted by John Carbone on Thu, 04/08/2010 - 10:21.

I finally figured out why this won't work for Anonymous users. According to merlinofchaos (Views developer/maintainer): "Do you have page caching turned on? If so, it's because pages are cached for anonymous users which means that the View never re-runs." To avoid this issue, you can either turn off caching entirely or use http://drupal.org/project/cacheexclude to exclude certain pages.

Thank you!

Submitted by Anonymous on Mon, 04/05/2010 - 10:07.

I scoured the Internets and drupal.org for a module or way to do this and found nothing.

Then I found your article and had a rotating image block done in 15 minutes!

Your instructions are very clear - very helpful and well written artilcle!

Thank you!

Submitted by Anonymous on Wed, 02/03/2010 - 16:34.

Thanks for such a comprehensive writeup! It worked very well and will definitely help me out with the site I am working on! You need a "donate" button!!

Struggling

Submitted by Anonymous on Mon, 06/08/2009 - 18:49.

I don't see any way to use the image preset in the node, so I've gone back and deleted the preset.

Nonetheless, I have two images in the group and they don't seem to rotate. Using version 6.12

If I edit and save the view, the image switches and then stays there. It seems that the global-sort-random isn't quite working. I can test this by setting the number of items to display to 2 and see they always come up in the same order.

Oddly, when I use the PREVIEW button on the VIEW screen itself, they seem to rotate OK.

Any ideas?

hmm

Submitted by Eric.London on Tue, 06/09/2009 - 06:40.

I don't recall encountering this issue. Maybe it's being cached??? -Eric

Had a similar problem. When

Submitted by John Carbone on Mon, 11/16/2009 - 21:01.

Had a similar problem. When logged in the image rotates fine. Logged out it shows but does not rotate. Permissions were fine and the view wasn't being cached. Had to turn off caching site wide to get it working for anon users. Just flushing them didn't work. Weird. Luckily it's a really small site so turning off caching isn't a big deal. Oh well, there's always nodequeue if all else fails.

Thanks!

Submitted by Anonymous on Thu, 04/23/2009 - 23:31.

Thank you for writing up these instructions. I'm migrating a site from Wordpress into Drupal, and it was a little puzzling to me that there was no obvious way to create a random image block.

Two corrections to your instructions:

In the box of required modules at the beginning of the page, you didn't include Views.
Imagefield no longer lets you choose "Image" as the field type (oh, the irony!). So when you add the field to your Rotating Image content type, set field to "File" and widget to "Image".

Best wishes,
Andrea

thanks

Submitted by Eric.London on Fri, 04/24/2009 - 06:47.

thanks for the info.
-Eric

Very helpful

Submitted by Anonymous on Sat, 04/04/2009 - 13:49.

Thank you!

Submitted by Anonymous on Sun, 03/08/2009 - 22:43.

This is exactly what I was looking for. Great tutorial for those who need it. :)

I've been struggling with this

Submitted by Anonymous on Fri, 02/13/2009 - 09:07.

I tried to do something similar to this but was unsuccessful. Your tutorial helped me achieve the same goal but with a different method. One great thing about Drupal is that there are so many ways to do things. If you ever find the time, please add screen shots. I think that may be even more helpful :-)
Thanks,
Ttammy Niwdoog

glad to help

Submitted by Eric.London on Sun, 02/15/2009 - 18:44.

Hi Matt,

It makes me very happy when I post something useful. Very true, much can be done with the basic Drupal building blocks (core, cck, & views). I'll def add screenshots if a have a few minutes.

Regards,
Eric

Thank you very much.

Submitted by Anonymous on Fri, 05/28/2010 - 10:05.

Great tutorial! Saved my a lot of time.