Rotating header based on time of day?

November 7, 2006 8:28 PM

A script to rotate three images based on the time of day?

I'm looking for a script that will allow me to display a different header image for three different times during the day (morning, afternoon, night). I have something semi-working right now, but it's clunky (I'm not entirely sure it really works), and I'm sure there's a better way. It would also be nice if the script was working off the time of the city the site is located in and not the user's computer.

Does anyone have any hints or do you know of a script that does this exactly?

posted by stefnet to computers & internet (10 comments total)

What kind of script? PHP? Javascript? Server-side? Client-side?
posted by kindall at 8:54 PM on November 7, 2006

Couldn't you just have cron rename the image files as appropriate?
posted by pompomtom at 8:58 PM on November 7, 2006

What kind of script? PHP? Javascript? Server-side? Client-side?

I was thinking javascript, but PHP might work too.

Couldn't you just have cron rename the image files as appropriate?

I could, if I had any notion of how to do that.

Please keep in mind here that I know how to make the pretty pages, but my coding skills are quite lacking.
posted by stefnet at 9:06 PM on November 7, 2006

You might say...

  <script type="text/javascript">

    var now = new Date();

    var hour = now.getHours();

    var timePicSrc = "";

    if (hour < 8) {

        // Hours 0-7 (midnight - 7:59 AM)

        timePic = "picMorning.gif";

    } else if (hour < 19) {

        // Hours 8-19 (8:00 AM - 7:59 PM)

        timePic = "picDaytime.gif";

    } else {

        // Hours 20-24 (8:00 PM - 11:59 PM)

        timePic = "picNight.gif";

    }

    document.write("<img ='" + timePic + "' alt='>");

  </script>

...if you had the various picWhatever.gif files lined up in the same directory as the page you're runnning this on.

My God, what Metafilter does do to code samples.
posted by letourneau at 9:32 PM on November 7, 2006

And indeed what I do to code samples.

First instance of timePicSrc should read timePic, the equals character in the last line of the script should of course be preceded by src, and the alt attribute should be wrapped in not one, but two, quotes.
posted by letourneau at 9:36 PM on November 7, 2006

I could, if I had any notion of how to do that.

What are you being hosted on?

The way I'd do it, on an ubuntu box, would be to have a static link to, say, "/images/rotate.jpg". Then write something like:

#!/bin/bash
rm /var/www/images/rotate.jpg
cp /var/www/images/noon.jpg /var/www/images/rotate.jpg

Then save that as noon.sh, make it executable, and then do $crontab -e to set noon.sh to be run at noon, and start writing the teatime one. (or whatever).

Oh dear, I hope that made sense. I'm tired. But do tell us what you're being hosted on.
posted by pompomtom at 9:42 PM on November 7, 2006

Here's a little info on the format of the crontab file you'll see when you do crontab -e.
posted by pompomtom at 9:53 PM on November 7, 2006

>It would also be nice if the script was working off the time of the city the site is located in and not the user's computer.

So you probably don't want javascript, unless you want to do messy calculations about the time of day, timezone and whether it's already tomorrow where the user lives.

And renaming images with cron is overkill, plus you'll have cacheing issues.
posted by AmbroseChapel at 10:31 PM on November 7, 2006

To use PHP with the time on the server, insert the following at the image tag:

<img ="images/picture<?php

$hour = date('H'); // hour of the day, 24 hour clock

if ($hour > 20 or $hour < 6) {

	$timepic = 'night';

} elseif ($hour > 12) {

	$timepic = 'day';

} else {

	$timepic = 'morning';

}

echo $timepic;

?>.jpg">

and create three image files: picturenight.jpg, pictureday.jpg, and picturemorning.jpg.

To change the hours the image changes, edit the if statements.
posted by ardgedee at 2:58 AM on November 8, 2006

letourneau, you are a genius among men (at least until I try these various options). Recite π for me, will you?


Thanks everyone, these examples look much better than what I managed to cobble together.
posted by stefnet at 6:11 AM on November 8, 2006