Sunday, October 08, 2006

Those of you who actually visit my blog rather than just consuming my RSS feed may have noticed my new header images.  I couldn't decide which one to use, so I threw together a random image HttpHandler to serve up a random one for each request.  There are several solutions for this available, but I thought my simplistic approach might be useful to someone else.

I just named the images header-XXXX.jpg, where XXXX is a 4 digit number and threw them into a directory, and then created an .ashx file with the following content:

<%@ WebHandler Class="HeaderRotator" Language="C#" %>

using System;
using System.IO;

public class HeaderRotator : System.Web.IHttpHandler {

   static int _HighestHeader = 12;
   static Random _Rand = new Random();

   #region IHttpHandler Members

   public bool IsReusable {
      get { return true; }
   }

   public void ProcessRequest(System.Web.HttpContext context) {
      int next = _Rand.Next(_HighestHeader + 1);
     context.Response.WriteFile(context.Server.MapPath(string.Format("~/headers/header-{0:0000}.jpg", next)));
   }

   #endregion
}

And that's it. Then you just reference the .ashx file in the img tag and you get a random image every time.  The _HighestHeader number needs to reflect the highest-numbered header image.  There's lots of different ways to do that, but I felt that simplicity was important here.

I had a lot of fun creating the images.  Some of them were carefully crafted, while others were more or less "happy accidents". I'm open to more suggestions for a good "tag-line".

[UPDATE] A few of you wanted a way to see them all without wasting time fighting against statistics.  So, here's a link that will show them all.

posted on Sunday, October 08, 2006 12:23:34 PM (Pacific Standard Time, UTC-08:00)  #    Comments [8]
Sunday, October 08, 2006 2:50:24 PM (Pacific Standard Time, UTC-08:00)
That looks really nice. I spend about 5 hours refreshing the page so I could see every single one.
Sunday, October 08, 2006 3:18:02 PM (Pacific Standard Time, UTC-08:00)
so did you mean one of the pictures to be the wrinkles on somebody's forehead and part of their hairline??
Sunday, October 08, 2006 3:23:41 PM (Pacific Standard Time, UTC-08:00)
Yes. That was going to be the other one with my eye. I pasted from the original, and it just struck me as being somewhat interesting.
Sunday, October 08, 2006 6:10:36 PM (Pacific Standard Time, UTC-08:00)
I thought it was a mistake, but Dave said he knew you well enough to know that you meant to do that. :-)
Monday, October 09, 2006 4:21:15 AM (Pacific Standard Time, UTC-08:00)
For comparison, here's how I did it in PHP for Wordpress (far a church website). This includes a chooser where you can see them all and pick your favorite, using a cookie to remember. It's interesting to see how similar things are done in completely different environments. Hope this works and it doesn't reject or mangle the code...

&lt;?php

$dir = "wp-content/themes/gemini-wpg2/images/header";
$imgs = Array();

if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if( preg_match("/^[^\.].*(\.jpg|\.jpeg)$/i",$file) ) {
$imgs[] = $file;
}
}
closedir($dh);
}

if( isset($_REQUEST['i']) ) {
$i = $_REQUEST['i'];
if( $i &lt; 0 ) {
setcookie("ones_pick_header",0,time()+60*60*24*365,"/",".ones2one.org");
} else {
setcookie("ones_pick_header",1,time()+60*60*24*365,"/",".ones2one.org");
setcookie("ones_header",$i,time()+60*60*24*365,"/",".ones2one.org");
}
}

$show_sidebar = false;
$width = "style='width:100%;'";

include('./wp-config.php');
error_reporting(E_NONE);
get_header();
?&gt;
&lt;div id="main"&gt;
&lt;h1&gt;Choose Title Image:&lt;/h1&gt;

&lt;?php
if( !isset($_REQUEST['i']) ) {
?&gt;
&lt;h2&gt;&lt;strong&gt;&lt;a href='header_image.php?i=-1'&gt;Rotate through all&lt;/a&gt;&lt;/strong&gt;.&lt;/h2&gt;
&lt;?php
foreach( $imgs as $i =&gt; $img ) {
echo "&lt;a href='header_image.php?i=$i'&gt;&lt;img src='$dir/$img' width='680'/&gt;&lt;/a&gt;&lt;br/&gt;\n";
}
} else if( intval($_REQUEST['i']) &gt;= 0 ) {
echo "&lt;p&gt;&lt;strong&gt;Image chosen. It will take effect when you return.&lt;/strong&gt;&lt;/p&gt;";
echo "&lt;strong&gt;&lt;a href='http://www.ones2one.org/'&gt;Return&lt;/a&gt;&lt;/strong&gt;";
} else {
echo "&lt;p&gt;&lt;strong&gt;Title Image will rotate through all available images.&lt;/strong&gt;&lt;/p&gt;";
echo "&lt;strong&gt;&lt;a href='http://www.ones2one.org/'&gt;Return&lt;/a&gt;&lt;/strong&gt;";
}
?&gt;

&lt;/div&gt;

&lt;?php get_footer(); ?&gt;
Monday, October 09, 2006 4:24:14 AM (Pacific Standard Time, UTC-08:00)
Oh well, I HTML-ized the < and >, but I guess it escaped the &'s. You get the idea...
Monday, October 09, 2006 4:32:58 AM (Pacific Standard Time, UTC-08:00)
Sorry for the plethora of comments, but that code does the choosing.. Oops.. Here's the code that does what your handler does..

<?php

$dir = "header";
$imgs = Array();

if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if( preg_match("/^[^\.].*(\.jpg|\.jpeg)$/i",$file) ) {
$imgs[] = $file;
}
}
closedir($dh);
}

header("Content-type: image/jpeg");
$f = fopen("$dir/".$imgs[array_rand($imgs)],"r");
while( $d = fread($f,1024) ) {
echo $d;
}
?>

It's been a while since I've used this code, so I kinda forgot what was where. =P
Monday, October 09, 2006 7:20:50 AM (Pacific Standard Time, UTC-08:00)
Really cool stuff!
Name
E-mail
(will show your gravatar icon)
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):