How to dress up your cache pages

by Lowracer


23 April 2004

So you've got a great idea for a cache. You spend the time to select and clean up a great waterproof container, find just the right cammo paint, fill it with the best swag you can find, locate a very nice logbook and pen. You found just the right spot, and it's a clever hide that will take a bit of work to find. Now you go to post it, and blah it looks like every other cache page, no graphics, and that yucky plain green background. What can you do? How can you dress up your page so that it has a little pizzaz to it?

When you create a nice cache, it's a good idea to dress up the page a little bit too. It gives the impression that you've put some care into the cache, and may entice more visitors to come see your cache. It's an advertisement for your cache. Make it look attractive!

Fortunately, it's not too difficult to spice up your cache listing. Let's look at a simple example:

GC8715 - Multiple Guess

I'll cover two ways to dress up a cache listing. First I'll show you how to replace the green background with an image pattern, and then by putting an image in the description itself.

First, you need to report a cache. You don't actually have to go hide it, just have an idea where you want to put it, get the coordinates then come back.

Use the Hide and Seek a cache button on www.geocaching.com to report your cache. Write it up however you usually do.


How to put in a background

Step 1: Make (or find) a Background Image

I recommend something that is simple, low-key, and repetitive. The background image you choose will automatically repeat over and over again to fill up the background of the page. I also recommend something that is not distracting. Tone it down a bit. No one likes a distracting, busy background. For my example I wanted something that looked like one of those computerized test forms. It could probably be toned down a bit, by reducing the contrast in Photoshop or other photo editing program. You want to suggest a theme, not club the viewer over the head with your background. Fortunately I had a scantron handy that I could scan in. I won't explain how to use your scanner or camera. You gotta figure that out on your own.

You can also find an image on the internet, but you have to be careful because most images you find on the net are copyrighted and you don't want to violate that if you can help it.

This is my background image. Because the browser will cause the background image to repeat until the background is totally filled up, I could have cropped this smaller. Can you see how? (Since it repeats, all I needed was one row of each of the blue and white strip with letters, but I was lazy and didn't crop it all the way down). Generally you want to crop it as small as you can, because it will load the page faster.


Step 2: Get it onto the Internet

Once you have your image from your scanner or camera on your computer (in .jpg format), you have to get it onto the internet somehow. Easiest way is to just upload it to the geocaching.com website. I recommend uploading it right to your cache page.

Upload it

On a cache page that you own, you'll see a link on the upper right where you can upload images. Upload your image there. Choose the file with the choose file button (green arrow), then give the file a caption (red circle). Call it what you like. I usually call mine 'background' or something equally boring. It doesn't really matter. When you've chosen a file and given it a caption, click the 'upload' button (blue arrow).

Get Its Web Address

After you upload the image, go to your cache page. Down by the bottom of the page, where it says 'Logged Visits,' you'll see a link to your image. Click that link. This will load your image into a browser window by itself.



At the top of your browser window (Mac browser shown, yours may look different), you'll see the web address (called a URL) of your image. The URL is the text that starts with "http://". Select and copy this whole URL, including the http:// part. Paste it to a sticky note (mac) or Notepad file (PC).


Step 3: Paste the command into your Cache Page

Cache pages are built using HTML commands. The more HTML you know, the more fancy you can make your page. But you don't need to know much to do a great job if you can copy and paste. Here's the command that puts my background image on the page: 

<body background="http://img.groundspeak.com/cache/34581_300.jpg">

So let's get that command into your page. Open a new browser window (yes, right now). Go to your cache page, log in, then click on the 'edit this cache' link. Select and copy that whole line above, including the little < and > signs. Then paste it into your short description field (right where you see the orange arrow in the example below).

Put in Your URL, Not Mine

So you've just pasted in the command that puts a scantron in your background. Great. That's probably not what you want. Replace my background image URL in red, between the quotes there with the URL that you just pasted to your Sticky Note (Mac) or Notepad (PC). So copy the URL from your Sticky Note or Notepad, then select the text between the quotes and paste your URL in to replace mine.

Now you've built the HTML command that will put your background image on your page. Let's take a look at it. First, see the red circle on the image below? Check that checkbox to let geocaching.com know that your page has an HTML command for them to process. Now save your cache page and view it. If you did it right, you should see your background image in the background. If you see my computer scantron sheet background instead, you forgot to replace my background image with your own image URL between the quotes.

How to Put an Image into your Description

Upload a different image to the cache page just as you did for uploading a background. View the image in its own browser window and copy and save off its URL just like you did before, using a sticky note or notepad.

Here's my image, of a number two pencil.

And here's the HTML that puts that image on the page: 


<img src="http://img.groundspeak.com/cache/34581_400.jpg" align="left">

Unless you want a number two pencil on your page, replace everything between the quotes in red with your own image URL.

Where do you put this line in your listing? The answer is wherever you want the image to appear in your listing. Lets say you want it to appear right before all your text, then you paste the above command in right before your text, for example see the Details section above, the little blue arrow? That would be a good spot.

You can have your image appear either to the right or left of the page. If you want your image on the right, change the word "left" to the word "right". Be sure to past your own URL into the quotes after the src= part.

What Now?

Now that you have some HTML in your document, you need to be sure to use HTML to format your page. Here's the most important HTML command, probably the only one you really need to know: 
<P>
You want to put this paragraph mark between each paragraph in your description, otherwise all your text will run together into a single gargantuan paragraph. There's more html commands you can use to spice up your text, but this will get you started.