1. Upload an image
On the geocache page, at the same height as the name of the geocache, a block with links can be found on the right hand side. One of the links is Upload Images. Click this link and images can be uploaded to the geocache page through the form you find at this page.
When ready, go back to the geocache page. A list with links to the just uploaded images can now be found here, at the bottom of the page, just above the log section (if any logs are available).
PLEASE NOTE: If one of the links is clicked, the image will be opened. In the navigation bar you will find the link to the image (starting with: http://). This link is required to put the image on the geocache page later on, I will point to this link using image location.
2. Place the html-code
Now we are going to put the image on the geocache page. Go to the edit page of the geocache. To do this click the link Edit in the same block of links as for the image upload.
On the editing page, find the header Details (just below difficulty and terrain rating). Put a checkmark in front of the text The descriptions below are in HTML.
Now, put at the location in the text (in the Short or Long Description) where you want the image to show up, the following code:
<img src="Image location" alt="Description" title="Description">
The Image location is already explained above. This is the link that starts with http://.
The Description (2x) is just a description of the image. The description will show up while hovering over the image with the mouse pointer, for example: The geocache.
An easy way to build the correct code for an image is through the Image code generator.
3. Save changes
Finished! The image is now visible on the geocache page.
Below you will find some extensions that might be handy.
Without resizing the images in advance it is possible to show the image with other dimensions than the original. This can be accomplished by adding the width and height attributes, expressed in pixels. An image with a width of 100 pixels and a height of 200 pixels will be:
<img src="Image location" alt="Description" title="Description" width="100" height="200">
By filling out both width and height the image might be pulled out of it's width-height ratio. Luckely it is also possible to use only one of the two. If, for example, only the width is used, the height will change accordingly. The code will then be:
<img src="Image location" alt="Description" title="Description" width="100">
To center the image on the page we only need a small piece of code:
<p style="text-align:center;">Image code</p>
The full code will then be:
<p style="text-align:center;"><img src="Image location" alt="Description" title="Description"></p>