Grafiken ins Listing einfügen…

…so einfach ist es wirklich!

Eine der häufigsten Fragen, auf die ich immer wieder treffe: wie bekomme ich eine Grafik in mein Listing oder in meine Profilseite? Dass das wirklich JEDER ganz einfach schaffen kann, will ich Dir mit dieser (hoffentlich verständlichen) Erklärung aufzeigen:

Die Basis für das Einbauen von Grafiken…

…liefert „html“, davon hast Du sicherlich schonmal gehört. html ist eine Programmiersprache, mit der wir Webseiten erstellen können und dem Webbrowser des Betrachters befehlen, wie er bestimmte Inhalte anzeigen soll. Es gibt unzählige verschiedene html-Befehle, verwirrende Zeichensätze und Erweiterungen, die einem ein großes Fragezeichen über den Kopf zaubern – aber die brauchen wir in diesem Fall nicht, wir wollen ja nur ein einfaches Bildchen in eine bereits bestehende Seite (nämlich Dein GC-Profil oder -Listing) einfügen.

Um das zu tun, muss überhaupt erstmal ein Bild existieren. Dafür sorgst Du ganz leicht selbst: entweder es gibt bereits ein Bild im Internet, das Du verwenden möchtest (Vorsicht – Stichwort „Urheberrechte“) oder Du designst Deine eigene Grafik. Im Idealfall bereits in genau der Größe, in der die Grafik auch nachher im Browser erscheinen soll. Diese Grafik muss ins Internet geladen werden, damit sie eine URL besitzt, also sowas wie „http://www.deinserver.de/bild.jpg“. Und genau diese Bilder-URL ist ein wichtiger Bestandteil unseres weiteren Vorgehens, dem Einbau.

Sobald Du auf der Geocaching-Seite eingeloggt bist, hast Du die Möglichkeit, Dein Listing oder Dein Profil in einem Editor-Fenster zu bearbeiten (diese Funktion findest Du normalerweise rechts oben). Sofern Du hier schon diversen Text drinstehen hast, suchst Du Dir nun die Stelle aus, an der Du die Grafik einfügen willst.

Variante 1 – Bild einfach einfügen

Dafür brauchen wir einen html-code, der dem Browser befiehlt, was er machen bzw. darstellen soll. In diesem Fall ein Bild (englisch „image“ – als Kürzel wird in html „img“ benutzt).

Mit einer „<“ öffnen wir den Befehl. Dann geben wir mit „img“ an, dass ein Bild dargestellt werden soll. Bis dahin einfach. Aber der Browser hat noch keine Ahnung, welches Bild und woher er das nehmen soll. Und genau das fügen wir als nächstes ein:

Mit dem Kürzel „src=“ bestimmen wir die Quelle (englisch: „source“ = src), aus der sich der Browser das Bild holen soll.

Die Quelle selbst (also die Bilder-URL) setzen wir in Anführungszeichen. Bitte daran denken, dass eine URL immer mit „http://“ beginnt! Danach schließen wir mit „>“ den Befehl wieder.

Und das ist schon die ganze Zauberei – so sieht der fertige Code aus:

Variante 2 – Bild an Seitenmitte ausrichten

Mit dem oben beschriebenen Schritt ist unser Bild zwar eingefügt, aber bislang ohne Ausrichtung. Standardmäßig wird eine Grafik (und auch ein Text) meistens linksbündig angezeigt. Ich persönlich möchte die Grafik aber gerne in der Seitenmitte haben!

Hierfür braucht unser oben erklärter Code lediglich eine kleine Erweiterung, die dem Browser unseren zusätzlichen Wunsch mitteilt: welchen style er einem bestimmten Abschnitt geben soll!

Diesen Abschnitt öffnen wir erstmal mit dem bereits bekannten „<“ und dem Buchstaben p (steht für „paragraph“). Danach dann der Befehl, WAS in innerhalb des Abschnitt passieren soll – in unserem Fall als „style“ die Ausrichtung („text-align“) definieren. Anstatt „center“ könntest Du hier auch „right“ eintragen, dann zeigt es die Grafik rechtsbündig an.

Jetzt fügen wir den auszurichtenden Inhalt ein, also unser Bild. Den html-code dafür haben wir ja in Abschnitt Eins gelernt – dieser code wird einfach in den Abschnitt eingefügt.

Damit der Ausrichtungsbefehl nicht auch alles Nachfolgende auf unserer Seite betrifft, müssen wir den Befehl wieder schließen, also das Ende des geöffneten Abschnittes definieren. Das erfolgt mit einem „/ “ und dem Befehl der geschlossen werden soll, also „p„.

Somit ergibt sich folgender Code:

Variante 3 – Bild mit einem Link versehen

Oft möchte ich dem Betrachter nicht nur eine hübsche Grafik zeigen, sondern ihn auch gleich zum Ziel lotsen – zum Beispiel zur Listingseite des entsprechenden Caches.

Dafür mache ich aus der normalen Grafik einen Link – wenn der User die Grafik anklickt, öffnet sich in einem neuen Fenster gleich die Zielseite des Caches. Und dazu kommt nun gleich die nächste Erweiterung hinzu:

Du brauchst zum einen den Befehl „a href„, zum anderen eine Ziel-URL (bei einem Cachelisting wäre das z.Bsp.: http://coord.info/GC12345).

Wie bekannt wird erstmal wieder mit dem „<“ ein Befehl geöffnet und mit „a“ festgelegt, dass der Befehl eine Verlinkung betrifft.
Zusätzlich verraten wir dem Browser noch, WOHIN der Link führen soll – das machen wir mit „href=„.

Direkt dort setzen wir in Anführungszeichen die URL rein, zu der der User geleitet werden soll. Fertig!

Nun noch eine kleine Wichtigkeit:
ich möchte, dass sich der Link nicht im gleichen Browserfenster öffnet (sonst ist meine Seite ja weg), sondern er soll sich in einem extra Fenster/Tab öffnen. Also weisen wir dem Link zusätzlich noch ein ZIEL (=target) zu. Das Attribut für eine neue Seite lautet „_blank„, das setzen wir also in Anführungszeichen hier ein.

Nun können wir den Befehl mit dem „>“ schließen und wieder den Inhalt angeben, der betroffen sein soll. In unserem Fall ist das dann der gesamte in Grafik 1 dargestellte Code, oder eben bei zentriertem Bild der in Grafik 2 angegebene Code.

Wieder wichtig: danach den Link-Befehl wieder mit dem </a> schließen, sonst ist auch der komplette Rest der Seite verlinkt!

Der Code sieht dann so aus:

Variante 4 – Code im Browser zum kopieren anzeigen

Jetzt wird’s ein wenig tricky: wir wollen den kompletten Code im Browserfenster anzeigen, OHNE dass der Browser die Befehle umsetzt. Warum sollten wir das wollen? Ganz einfach: weil wir nun einem Cacher zum Beispiel den fertigen Einbau-code eines Souvenirbanners anbieten können! Der erfahrene und html-begabte User weiß alleine, wie das geht. Wer aber mit html noch nie was am Hut hatte, hat zwar das Bild und im besten Fall die Bilder-URL, aber keinen Idee, welchen Code er nutzen muss, um das in sein Profil einzubinden. Also machen wir es ihm einfach, und schreiben unter unser Bild noch den kompletten Code, damit er sich den einfach kopieren kann.

Aber wie stellen wir das an, denn wenn wir den Code einfach hinschreiben, setzt unser Browser den Befehl ja um und wir haben ein zweites Bild unter dem ersten Bild?! Richtig!
Deshalb „tricksen“ wir ein Bisschen:
anstelle der Klammern („<“ und „>„) benutzen wir Sonderzeichen, die die Klammern dann auch im Browser optisch als Klammern darstellen. So ziemlich jedes Zeichen wie Fragezeichen, Ausrufezeichen, Anführungsstriche, Punkt und eben auch diese Klammern haben ein eigenes Sonderzeichen. Wer sie alle wissen möchte: einfach googeln.

Die beiden Sonderzeichen für unsere Klammern habe ich Euch aber in der nächsten Grafik aufgezeigt – und dazu dann gleich ein Beispiel, wie der Text aussehen muss, den Ihr in Euer Listing einfügt:

So einfach funktioniert das, genau SO habe ich auch die Texte oben verfasst: überall, wo Du in meinem Text ein „<“ oder „>“ siehst, habe ich die Sonderzeichen benutzt 🙂

Genau auf diese Weise kannst Du auch längere Codes darstellen, zum Beispiel den Bildercode mit der Erweiterung zum Zentrieren und als Link…Wichtig ist nur, dass Du die Klammern durch die Sonderzeichen ersetzt, da sonst der Browser den Befehl ausführt.

UPDATE: einige Browser haben möglicherweise Probleme beim Umwandeln der Anführungszeichen im Code – also beim Anbieten eines Codes bitte die Anführungszeichen durch das Sonderzeichen „&quot;“ ersetzen!

Grund-html ist keine Zauberei…

…also ruhig heranwagen und etwas herumprobieren! Diese leichten Grundsachen wie hier beschrieben mögen auf den ersten Blick verwirrend sein, aber wenn Du das ab und an mal benutzt, geht Dir das beim Listingerstellen zukünftig automatisch von der Hand!

Bleibe immer up to date: jetzt NEWSLETTER abonnieren und keine Tipps mehr verpassen!