↑ Zurück zu TIPPS

Grafiken per Code ins Listing einfügen

Erklärung & Anleitung

 

Eine der häufigsten Fragen, auf die ich immer wieder treffe: wie bekomme ich eine Grafik in mein Listing oder in meine Profilseite? Dass man dafür kein Programmierexperte sein muss, will ich Euch mit dieser (hoffentlich verständlichen) Erklärung aufzeigen. Das ist nämlich einfacher als gedacht:

 

Was wir hierfür brauchen ist „html“ (haben selbst Laien bestimmt schonmal gehört). Html ist einfach erklärt eine Programmiersprache, mit der wir Webseiten erstellen können und dem Webbrowser des Betrachters befehlen, wie er bestimmte Inhalte anzeigen soll. Es gibt natürlich 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 Bildchen in eine bereits bestehende Seite (nämlich Euer gc-Profil oder Listing) einfügen.

Das Wichtigste: das Bild!
klar – um ein Bild einzufügen, muss erstmal ein Bild existieren. Dafür müsst Ihr selbst sorgen: entweder es gibt bereits ein Bild im Internet, das Ihr verwenden möchtet (Vorsicht – Stichwort „Urheberrechte“!) oder Ihr designt Euch eine eigene Grafik. Im Idealfall bereits in genau der Größe, in der die Grafik auch nachher im Browser erscheinen soll. Diese Grafik muss dann erstmal 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.

Ist die Grafik samt URL vorhanden, kann es schon mit dem Einbinden losgehen: sobald Ihr auf der geocaching-Seite eingeloggt seid, habt Ihr die Möglichkeit, Euer Listing oder Euer Profil in einem Editier-Fenster zu bearbeiten (diese Funktion findet Ihr meistens rechts oben irgendwo – kurz suchen und anklicken). Sofern Ihr hier schon diversen Text drinstehen habt, sucht Ihr Euch nun die Stelle aus, an der Ihr die Grafik einfügen wollt.

 

Variante 1 – Bild einfügen

Dafür brauchen wir einen Code, der dem Browser befiehlt, was er machen bzw. darstellen soll, in diesem Fall betrifft der Code ein Bild (auf Englisch „image“ – als Kürzel wird in html der Begriff „img“ benutzt). Mit einer < öffnen wir erstmal den Befehl. Dann geben wir mit img an, dass der Befehl ein Bild darstellen soll. So weit, so gut – nun weiß der Browser aber noch nicht, 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 holt – die Quelle selbst (also die Bilder-Url) setzen wir dann 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 – anschaulich nochmal in folgender Grafik dargestellt:

 

Variante 2 – Bild einfügen und in 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) immer linksbündig angezeigt. Ich persönlich will die Grafik aber (weil ich es optisch schöner finde) gerne in der Seitenmitte haben!
Hierfür braucht unser oben erklärter Code lediglich eine kleine Erweiterung, die dem Browser unseren weiteren Wunsch befiehlt – und dieser Befehl erklärt dem Browser, welchen style er einem bestimmten Abschnitt geben soll. Den Abschnitt öffnen wir erstmal mit dem < und dem Buchstaben p (steht für „paragraph“). Danach dann der Befehl, WAS in diesem Abschnitt passieren soll – hier die center-Ausrichtung. Anstatt „center“ könntet Ihr hier auch z.Bsp. „right“ eintragen, dann zeigt es die Grafik rechtsbündig an. Am Ende dann wieder den Eröffnungsbefehl mit > zumachen.

Jetzt folgt der INHALT, den der Befehl treffen soll – in unserem Fall die Grafik. Also schreiben wir hier den bereits erklärten Code für die Grafik hinein. Damit der Ausrichtungsbefehl nicht Alles Nachfolgende auf unserer Seite betrifft, müssen wir den Befehl wieder schließen, um wirklich nur einen bestimmten Abschnitt zu definieren. Das Schließen eines Befehls, der nur einen begrenzten Abschnitt betreffen soll, erfolgt mit einem / und der Angabe, welchen Befehl es schließen soll, also in dem Fall schließen wir das p. Somit ergibt sich folgender Code:

 

Variante 3 – Bild als LINK

So – Bild is drin, Bild is ausgerichtet…passt…oder? Nun ja, also ich möchte dem Betrachter immer gerne nicht nur die Grafik zeigen, sondern ihn auch gleich zum Ziel lotsen, zum Beispiel zur Listingseite des entsprechenden Caches. Dafür mache ich aus der normalen Grafik nun gleich einen Link – das heisst, wenn der User die Grafik anklickt, öffnet sich in einem neuen Fenster gleich die Listingseite des Caches.
Und deshalb – weil’s so Spaß macht – kommt nun gleich noch eine Erweiterung hinzu :)

Um einen Inhalt (das kann wie hier ein Bild sein, oder auch einfach ein Text) zu einem Link zu machen, brauchen wir einerseits den Befehl a href (das a steht für „anchor“), andererseits die Ziel-URL (bei einem Cachelisting wäre das z.Bsp.: http://coord.info/GC#####).

Wie auch beim Ausrichten wird erstmal wieder mit dem < unser Befehl geöffnet und dann mit dem a festgelegt, um was für einen Befehl es sich handelt, nämlich um eine Verlinkung. Da der Browser ohne einen eindeutigen Befehl ziemlich dumm ist (*g*), müssen wir ihm natürlich noch verraten, WOHIN der Link führen soll…das machen wir mit dem href=, direkt danach setzen wir in Anführungszeichen die URL rein, zu der der User geleitet wird. Nun noch eine kleine Wichtigkeit: ich möchte, dass sich der Link nicht im gleichen Browserfenster öffnet (sonst ist meine Seite ja weg), sondern ich will, dass sich der Link in einem extra Fenster/Tab öffnet. Also weisen wir dem Link noch ein ZIEL (=target) zu, das wir noch mit in die Anfangsbefehlzeile einfügen. Das Attribut „Neue Seite“ lautet _blank, das setzen wir also in Anführungszeichen hier rein.
So, nun können wir den Eröffnungsbefehl mit dem > schließen und wieder den Inhalt angeben, der von dem Befehl 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 :)

Und so sollte der hier beschriebene Code dann am Ende aussehen:

 

Variante 4 – kompletten Code anzeigen zum Kopieren

Jetzt wird’s ein wenig tricky: wir wollen den kompletten Code gerne im Browserfenster anzeigen, OHNE dass der Browser die Befehle umsetzt…Warum sollten wir das wollen? Ganz einfach: weil wir nun einem Cacher zum Beispiel ein Souvenirbanner anbieten wollen, das er sich in sein Profil setzen kann! Der erfahrene und html-begabte User weiß alleine, wie das geht. Wer aber mit html noch nie was am Hut hat, hat zwar das Bild und im besten Fall die Bilder-URL, aber keinen Peil, welchen Code er nehmen 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 als Klammern darstellen. So ziemlich jedes Zeichen wie Fragezeichen, Ausrufezeichen, Anführungsstriche, Punkt und eben auch diese Klammern haben ein 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 – und genau SO habe ich auch die Texte oben verfasst: überall, wo Ihr in meinem Text ein < oder > seht, habe ich beim Schreiben die Sonderzeichen benutzt, damit IHR diese Klammern auch als Solche angezeigt bekommt :)

Genau auf diese Weise könnt Ihr auch längere Codes darstellen, zum Beispiel den Bildercode mit der Erweiterung zum Zentrieren und als Link…wichtig ist nur, dass Ihr die Klammern durch die Sonderzeichen ersetzt, da sonst der Browser den Befehl ausführt.
Hier wäre nun zum Beispiel der komplette Code zum Kopieren, OHNE Browseraktivität:

<a href="LINK-URL" target="_blank"><p style="text-align:center;"><img src="BILD-URL"></p></a>

UPDATE: einige browser haben noch Probleme beim Umwandeln der Anführungszeichen im Code – also beim Anbieten eines Codes zum Kopieren bitte die Anführungszeichen durch das Sonderzeichen &quot; ersetzen!

Und so einfach ist das Ganze :) Also ruhig rantrauen und gegebenenfalls etwas rumtesten, diese leichten Grundsachen wie hier beschrieben mögen auf den ersten Blick verwirrend sein, aber wenn Ihr das ab und an mal benutzt, geht Euch das beim Listingerstellen ohne groß darüber nachzudenken automatisch von der Hand!

 

Und nun wünsche ich Euch viel Spaß beim Basteln und beim Profil-Verschönern! Und solltet Ihr noch spezielle Fragen haben: keine Scheu, schreibt mich an! :)