Putting random images in the sidebar of a standard Movable Type blog is relatively easy, because Movable Type generates static pages that the web server then dishes out. Tell your web server to run the pages through PHP before sending them out, and include a little bit of code to stick in random image URLs—the PHP will survive intact through Movable Type, and your server will take care of the images before sending the page to the browser.
This is even easier in WordPress, because—by default—pages are dynamically generated (using PHP) when the browser asks for them. Add your image rotation code in, and WordPress will take care of the rest.
The problem occurs when you want to add page caching to WordPress. Generating a page each time a browser asks for it is rather wasteful; I can’t count the number of times that Daring Fireball has crashed a server by linking to a WordPress blog it was hosting. The solution to that is saving those generated pages, and then using that saved copy when some other browser asks for that page.
Which is all well and good, until you realize that the cache has also cached a specific (albeit random!) set of images for your sidebar. Everybody will see the same images when visiting a specific page (say, this front page), and they will continue to see those images until the cache expires and the page is re-cached.
W3 Total Cache, the caching plugin that I’m using, has a workaround: it can cache parts of a page, so long as you use the “Disk (basic)” page cache method. You surround the parts you don’t want to cache with <!--mfunc--> and <!--/mfunc-->, and it’ll cache the rest. Notably, you omit the usual <?php and ?> tags when using this “mfunc” notation. My code looks something like this:
<!--mfunc-->
$image_path = 'rotating_pics/';
$temp = array_merge(glob($image_path . '*.jpg'), glob($image_path . '*.png'), glob($image_path . '*.gif'));
$pic_list = $temp?$temp:array();
shuffle($pic_list);
$top_pic = $pic_list[0];
$mid_pic = $pic_list[1];
$end_pic = $pic_list[2];
echo '<div id="background_pic_1" class="side_pics" style="background-image:url(' . $top_pic .')"> </div>';
echo '<div id="background_pic_2" class="side_pics" style="background-image:url(' . $mid_pic .')"> </div>';
echo '<div id="background_pic_3" class="side_pics" style="background-image:url(' . $end_pic .')"> </div>';
<!--/mfunc-->
I’ve gotten lazy, and am now using the PHP function glob() to figure out what pictures are available for use—rather than hardcoding the file names into a script. The server I’m on doesn’t support it, but the GLOB_BRACE flag could combine the three calls to glob() into a single one. (I’m also using shuffle() over array_rand(), as the latter apparently isn’t exactly random when it comes to ordering the selected elements.)
…
And that’s pretty much the fruit of half a day’s poking around on my week off. It may be a little bitter for me (really… my week off), but may be useful for someone else.
Hmm. I wonder if I could hack that into the theme I’m using… I’d probably render the theme unable to upgrade, though. Le sigh. Caching is a really good idea.
Then again, I could probably add caching to the webcomic safely… and that’s far more likely to generate actual traffic.
Yeah, I don’t think my copy of the Twenty Ten theme is upgradable, now.