I’m not a builder.  I don’t have the “handy” gene that most of the men in my family have.  Instead, I have the nerd gene.  The gene that makes me look at something online and wonder how it is done.  How I would have done it differently or better.  With that being said I realized I’m probably not going to be the person to build an awesome cache container, so I need to find a way to stand out doing what I do.  Being a nerd. That has led me to hacking around with the cache listing page and different ideas for technology caches.  I’ve found some interesting tricks lately including a way to change the image in your cache listing when the user clicks a certain link.

While this may not seem like much, it’s a neat little concept that doesn’t really take too much work at all.  You’ll just need access to a server where you can write some code, PHP in my case, store some images, and a URL shortener like bit.ly.

The first thing you’ll need to do is create a directory on your web host where you will put your code and images.  Once you have the directory created put all of the images you may need in there or a sub directory, or somewhere.   I don’t really care where they are.

Step 1 – Create the PHP Controller

Next you’ll need to create your “controller” page that will contain all of the logic.  In my case this was done using PHP.  The backend code for controller looks something like this:

<br /> header('content-type: image/gif');<br /> header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate');<br /> header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // Date in the past<br /> header('Pragma: no-cache');</p><p>if (strstr($_SERVER['REQUEST_URI'], "&amp;test=2") != null || (strstr($_SERVER['HTTP_REFERER'], "&amp;test=2") != null)) {<br /> $im = file_get_contents('./2.png');<br /> echo $im;<br /> } else if (strstr($_SERVER['REQUEST_URI'], "&amp;test=3") != null || (strstr($_SERVER['HTTP_REFERER'], "&amp;test=3") != null)) {<br /> $im = file_get_contents('./3.png');<br /> echo $im;<br /> } else if (($_SERVER['HTTP_REFERER'] == null) || ($_SERVER['HTTP_REFERER'] == "") || (strstr($_SERVER['HTTP_REFERER'], "&amp;") == null )) {<br /> $im = file_get_contents('./1.png');<br /> echo $im;<br /> }</p><p>

What you should note of is that there are three distinct IF statements.  Each one checks the URL, and URI, of the referrer.  Depending on the parameters that are passed in it returns a different image.  Pretty easy on the back end, eh?

Step 2 – Create the cache listing page

I’m not going to go into how to create a geocache listing page, hopefully you already know that.  Instead I’m going to start at the step where you include your image.

Whenever you have your formatting complete and you are ready to add your image just do something like:

<br /> <img src="yourdomain.com/imageswitcher/controller.php" alt="" /><br />

Assuming your backend controller.php is similar to the one I posted above you should see whatever image you place in the final else of your conditions.

Step 3 – Test the Controller

The easiest way to test this is to append a new parameter at the end of the current URL.  The URL of the cache listing probably looks something like the following:

http://www.geocaching.com/seek/cache_details.aspx?guid=2ff64e4e-3eb1-43d6-a896-aecad20fc339

Test your image switcher by putting the parameters on the end of that URL.  In the case of our PHP example above we want to add the parameter “”test” and the value of either 2 or 3.

http://www.geocaching.com/seek/cache_details.aspx?guid=2ff64e4e-3eb1-43d6-a896-aecad20fc339&test=2

If everything worked you should see a different image on your cache listing page.

Step 4 – Make the page “functional”

The last step may be the most tedious, but it is sadly necessary.  Since geocaching.com strips certain characters out of links, “&” being one of those characters, you’ll need to find a way around that limitation.  That is where a good URL shortnener like bit.ly comes in handy.

Copy the URL you used above for testing, assuming they worked, and enter them into bit.ly and you’ll have links to the caching page with parameters on the querystring.  At this point, feel free to customize the random URL bit.ly create for you.  Maybe something like bit.ly/GCCODELINK1

Step 5 – Add links to listing page

The final step should be pretty apparent.  Add the URL’s to your listing page.  The traditional <A>nchor tags can be wrapped around text or an image.  (Or an imagemap!!! – but that is my little secret for now.  Shhhhh)

I’m not sure exactly how this would be useful, but it is kinf of neat.

Caveats

There is a lot of talk about how some browsers, websites, users dont send header information needed for this to work.  Not everything will have the request parameters that are necessary, so use this cautiously, and be prepared for it to not work for some users.

Uses

Like I said above I’m not exactly sure how this can and will be used but one use has already been though of by FailedApparatus.  He has included a link on the page for a *hint*.  While it may be confusing to the user clicking the link will reload the page with a different / easier puzzle image that contains a hint.

[UPDATE 1/17/12]

FailedApparatus has implemented this in his “FA01 : Forest For the Trees” cache.  If you click the hint link underneath the picture it will reload that page and swap out the image with an “easier” version of the puzzle.