Dressing Up Your Cache Page

A photo or two can add spice to just about any cache page. Cache-page images are useful for many purposes.

  • A map of the cache area, or a photo of an easy-to-miss parking spot might help get visitors to your cache.
  • Photos of unusual geological features near a hide will help ensure that cache seekers won't miss point of your cache.
  • In the case of many puzzle caches, an image is often central to the problem.
  • Photos also can set the scene for a cache, adding romance to the hunt that transports cache seekers to another time or place.
  • If nothing else, a cache page provides an opportunity share some of your best photographs with others.

So dust off some of those great images in your My Pictures folder and build some memorable cache pages. Even if you know nothing about HTML, the follwoing steps will show you what you need to do to place and manipulate images on your cache page.

Placing the Image

First let's place an image onto a cache page.

  1. When you view one of your own cache pages, you'll see an "upload images" link at the upper right of the page. Click the link, use the browse control to select the image on your computer, then click upload.
  2. After the photo is uploaded, it will display in your browser. Right click it and select properties. Select and copy the URL as listed in the properties box.
  3. Now, return to your cache page, click "edit listing" and scroll down to the Details area of the page. First, make sure to check the box labeled "The descriptions below are in HTML." Then insert the following HTML tag in the description area where you want to see your photo:

    <IMG SRC="paste URL here">
  4. Replace the words "paste URL here" with the URL you copied in the step 2.
  5. Save the page as usual and view your listing.

You now have a cache page with a photo, but perhaps it's not as refined as you'd like. Let's look at some things your can do to improve the placement and appearance of your photo.

The Right Size

If you uploaded an image from your straight from your digital camera, chances are it's too big, and it will overpower your cache page. Geocaching.com routinely reduces large images to a standard size, but even that may be too large.

If you have image editing software (some probably came with your camera), you can use it to reduce your image down. Depending on the image, something in the range of 200 to 300 pixels might be about right. While you're working with your image, this is also a good time to consider cropping out any nonessential elements. A photo that is well framed and focused will have the most pop on your page.

If you don't have image-editing software, don't despair. You can still control the size of your image by using an additional HTML attribute in the tag we used previously. For example:

<IMG SRC="paste URL here" WIDTH="200">

The WIDTH attribute used here specifies that your image should be displayed 200 pixels wide. The height will be adjusted proportionately. The disadvantage of this kind of on-the-fly resizing is that picture quality suffers a little. You'll get the sharpest image if you make it the correct size before uploading.

Another attribute you can use is HEIGHT, as in HEIGHT="300". This works just like the WIDTH attribute only it scales the image to the desired HEIGHT. You also can use both WIDTH and HEIGHT attributes together. This will display an image the exact size you specify -- even if it means displaying a distorted image. An idea for a puzzle cache, perhaps?

The Right Place

Now that you have the image correctly sized, it's time to get it in exactly the right place. A simple way to go is to center the image using the HTML centering tags:

<CENTER><IMG SRC="paste URL here"></CENTER>

Another option is to use an ALIGN tag in your IMG command. Try this:

<IMG SRC="paste URL here" ALIGN="left">

This enhancement places the text on the left side of the screen and wraps the following text around it. ALIGN="right" works similarly, but with the image moved to the right. The ALIGN attribute works especially well for small images. When you these text-wrapped images, however, you may find that there is sometimes a collision between the text and the image. The solution is to request a little space around the image using a couple of additional attributes: HSPACE and VSPACE. As you can probably guess, these affect the horizontal and vertical space around an image. Here's and example.

<IMG SRC="paste URL here" ALIGN="left" HSPACE="10">

This command adds 10 pixels of white space on each side of the image. This should be enough to solve any text-bumping problem. You can specify more or less white space by increasing or decreasing the number "10" that I've used in the example. If you need to clear some space on the top and bottom of the image, use the VSPACE command in a similar fashion.

One additional enhancement for your image might be to use a border. The BORDER attribute specifies the width, in pixels, of a border to be applied to the image. In the following example, we specify a 2 pixel border. If you want no border, specify BORDER="0".

<IMG SRC="paste URL here" ALIGN="right" BORDER="2">

Below is a table that lists the attributes of the IMG tag. Remmeber, there's nothing wrong with combining two or more attributes at time. Use as many as required to get the job done.

This should give you a nice set of tools to use to display images on your cache pages. Let your cache pages spring to life and spark your readers' imaginations. A creative cache page can take your visitors on an adventure that becomes much more than a search for plastic boxes in the woods.

WIDTHnumericspecify the width of an image
HEIGHTnumericspecify the height of an image
ALIGNleft, right, centerspecify the position of an image within the following text
HSPACEnumericspecify white space on the left and right of an image
VSPACEnumericspecify white space on above and below an image
BORDERnumericspecify the thickness of an image border