1. Ein Bild hochladen
Auf der Geocache-Seite, auf gleicher Höhe wie der Name des Caches, findet man auf der rechten Seite einen Block mit Links. Einer der Links ist Upload images. Klicken sie diesen Link um ein Bild über das Formular auf dieser Seite auf die Geocache-Seite hochzuladen.

Wenn fertig, gehen sie zurück zur Geocache-Seite. Dort kann man jetzt, ganz unten auf der Seite direkt über dem Logbuch (wenn es schon Logs gibt), eine Liste mit Links der gerade hochgeladenen Bilder finden.

BITTE BEACHTEN: Wenn einer der Links angeklickt wird, öffnet sich das Bild. In der Navigationsleiste können sie dann den Link zum Bild (beginnt mit: http://) finden. Dieser Link wird benötigt um das Bild später auf der Geocache-Seite einzubinden, ich nenne es hier Bildquelle.

2. Platzieren sie den HTML-Code
Jetzt laden wir das Bild auf die Geocache-Seite. Gehen sie zur Bearbeitungsseite für den Geocache. Dazu klicken sie auf Edit im selben Block von Links wie beim Hochladen der Bilder.

Suchen sie die Überschrift Details (direkt unter der D/T-Bewertung). Setzen sie den Haken bei The descriptions below are in HTML.

Jetzt setzen sie den folgenden Code an die Stelle im Text (in der Kurz- oder Langbeschreibung), wo das Bild auftauchen soll:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung">

Die Bildquelle wurde weiter oben schon beschrieben. Dies ist der Link, der mit http:// beginnt.
Die Beschreibung(2x) ist nur eine Beschreibung des Bildes. Die Bildbeschreibung erscheint, wenn man mit dem Mauszeiger über das Bild geht, zum Beispiel: Der Geocache
Dieses Tool bietet ihnen einen einfacher Weg den korrekten Code für ein Bild zu erstellen: Bildcodegenerator.

3. Änderungen speichern
Zum Schluß müssen die durchgeführten Änderungen gespeichert, oder in diesem Fall an den Server geschickt werden. Klicken sie Submit changes unten auf der Seite. Vergessen sie nicht den Haken zu setzen, dass sie mit den Geocache-Guidelines und Nutzungsbedingungen einverstanden sind.

4. Fertig
Fertig! Das Bild ist nun auf der Geocache-Seite sichtbar. Weiter unten finden sie einige Ergänzungen, die nützlich sein könnten.

5. Hyperlink
Es kann nützlich sein, dass Bild als Hyperlink zu erstellen. Das bedeutet, dass wenn jemand auf das Bild klickt, eine Webseite (oder ein Bild) geöffnet wird. Nutzen sie den folgenden Code dafür:

<a href="Hyperlink">Bild-Code</a>

Dabei ist Hyperlink der Link zu der Webseite, die sich öffnen soll.
Der vollständige Code ist dann:

<a href="Hyperlink"><img src="Bildquelle" alt="Beschreibung" title="Beschreibung"></a>

6. Abmessungen
Ohne eine vorab durchgeführte Größenänderung ist es möglich das Bild in anderen Abmessungen als im Original zu zeigen. Das wird durch das Setzen der Attribute width und height in Pixel erreicht. Für ein Bild mit einer Breite von 100 Pixel und einer Höhe von 200 Pixel nutzen sie:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung" width="100" height="200">

Wenn sowohl Länge als auch Breite gesetzt werden, kann es sein, dass sich das Höhen-Breiten-Verhältnis des Bildes ändert. Glücklicherweise ist es ausreichend eine der beiden Werte anzugeben. Wenn z.B. nur die Breite genutzt wird, wird die Höhe automatisch passend geändert. Der Code ist dann:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung" width="100">

7. Zentrieren
Um das Bild auf der Seite zu zentrieren, braucht man nur einen kleines Stück Code:

<p style="text-align:center;">Bild-Code</p>

Der vollständige Code ist dann:

<p style="text-align:center;"><img src="Bildquelle" alt="Beschreibung" title="Beschreibung"></p>