How to rotate a masthead.

July 17, 2006 1:32 AM

How do I create a rotating masthead on my blog?

You guys/gals are much more experienced in this area than I.

I want to have the masthead be the same image (diferent color) everytime someone vists a new page.

HOWEVER, I DON'T want the image to change randomly while the reader is viewing a page. I only want it to change when a new page is visited.

...sorry, the OCD in me.

I've got all the images ready... now I just need to script, or plug-in, or what-not.

WordPress is the platform, btw.

posted by bamassippi to computers & internet (15 comments total)

I think you can do this with a little javascript. I have a rotating image on my homepage (check profile). See here for the code.

When you say "I DON'T want the image to change randomly while the reader is viewing a page" - do you mean surf away from that page? If you want the image to keep steady while the viewer is elsewhere on the site, or to keep constant as he's surfing through multiple pages, then you might need cookies - and then it's over my head in terms of the coding. :)

A rotating image on a single page is really simple though. Check the link and see my homepage for an example.
posted by ifranzen at 1:53 AM on July 17, 2006

Do you want the image to be

a) static for the page (page n always shows the orange masthead, regardless of user)

b) static for the page and the user (page n always shows the orange masthead to user x and always shows the green masthead to user y)

c) static for the page and the user and the session (page n shows the orange masthead to user x and a green masthead to user y for the lifetime of their browser session, but if they close and reopen the browser they get a new random masthead)

or (deep breath)

d) static for the page and the user and the hit (for want of a better term) (page n shows the user an orange masthead, which stays orange if they refresh the browser, but if they navigate to page m and back to page n, the masthead colour is shuffled again)

Sorry to be pedantic, it's probably only a few lines of code, but each case is slightly different.
posted by Leon at 2:32 AM on July 17, 2006

this is pretty easy:

http://www.derbs.co.uk/misc/randomimage/randomImage.htm

keep refreshing this page and it will randomly cycle through the 5 images.
posted by derbs at 3:31 AM on July 17, 2006

If you view the source, you'll see how this works. You firstly need your images numbered like "1.gif".

Say you have 10 images, you'll then need to change the 5 to 10:

randomNumber=getRandom(5);

Here's the link again, but clickable this time!

http://www.derbs.co.uk/misc/randomimage/randomImage.htm
posted by derbs at 3:35 AM on July 17, 2006

You can get the files here as well:

http://www.derbs.co.uk/misc/randomimage.zip
posted by derbs at 3:36 AM on July 17, 2006

Jefferey Zeldman uses php for image rotation; it works even in Firefox.
posted by Smart Dalek at 4:34 AM on July 17, 2006

I'm using the Hivelogic rotator.
posted by adamrice at 5:50 AM on July 17, 2006

I use the Hivelogic rotator, too, on my pesonal weblog. I rotate background images and I rotate a photo in the upper-right corner of the blog. Works like charm.
posted by jdroth at 6:04 AM on July 17, 2006

I currently one of 670 images on the top of my site, which cycle at a rate of one per hour, for a total cycle of almost 28 days. It's handled by a pretty simple shell script invoked hourly by cron (under Linux).
posted by Steven C. Den Beste at 6:45 AM on July 17, 2006

That should have been "I currently display one of..."
posted by Steven C. Den Beste at 6:46 AM on July 17, 2006

Pedant-filter: That's not the 'masthead'; that's the 'nameplate'. The masthead is the section, usually on an inside page, that lists the staff of a publication.

The nameplate is the thing on the front page above the fold that identifies the publication for the reader.
posted by baylink at 6:51 AM on July 17, 2006

3 more I had saved in my delicious account:

http://automaticlabs.com/products/rotator
http://www.alistapart.com/articles/betterrotator/
http://www.dyn-web.com/javascript/rotate-img/

I'm not using one for myself but I would look at the middle one first to see if it fits your needs. G/L.
posted by BillyG at 7:11 AM on July 17, 2006

I second/third/fourth the hivelogic rotator - it does exactly what you're asking for.

I'm using it on several sites (including a few wordpress ones) and it works like a charm. Email me (profile) if you have specific questions on integrating it w/WP.
posted by sluggo at 7:58 AM on July 17, 2006

You can do this in K2 (Wordpress theme) - go check out Pstam's Wordpress Customisation series for more info
posted by Happy Dave at 11:13 AM on July 17, 2006

Jefferey Zeldman uses php for image rotation; it works even in Firefox.

I just have to post "huh?" -- not just to be a pedant, but to counteract the impression you seem to have that the other solutions don't work in FireFox.

But, if you've got PHP running the site, you might was well do it in the PHP, so that you don't have to worry about users who don't have JavaScript/have it turned off.
posted by AmbroseChapel at 1:59 PM on July 17, 2006 [1 favorite has favorites]