Tutorial für fortgeschrittene Bildeinbindung

    Tutorial für fortgeschrittene Bildeinbindung


    Hallo liebe Wiki-Fans!
    In diesem Tutorial möchte ich euch zwei weitere Möglichkeiten der Bildeinbindung in der Wiki vorstellen: gallery und imagemap. Beide Funktionen erlauben euch, eure Artikel besser zu strukturieren und zu gestalten. Es empfiehlt sich zunächst ikuharas Wiki-Tutorial gelesen zu haben, aber auch ohne großes Vorwissen, sind beide Funktionen relativ leicht zu benutzen.


    Was ist gallery?


    Der Eintrag "<gallery>" (ohne Anführungszeichen) ermöglicht es, ein oder mehrere Bilder nebeneinander in einer Galerie anzuordnen und gegebenenfalls einen kurzen Text unter jedes Bild zu setzen. Außerdem werden die Bilder dabei auf eine einheitliche Größe skaliert. Dieser Eintrag eignet sich daher besonders gut, um verschiedene Bilder miteinander zu vergleichen oder wenn es notwendig ist mehrere Bilder "aufzuzählen".



    Wie kann ich sie benutzen?


    Um eine Galerie, wie sie oben zu sehen ist, zu verwenden, wird folgender Code verwendet:


    Code
    <gallery>
Bild:OMG-Belldandy1.png|Belldandy aus Kapitel 1 ''Falsch verbunden''
Bild:OMG-Belldandy2.png|Belldandy aus Kapitel 17 ''Weihnachtsgarderobe erwünscht''
Bild:OMG-Belldandy3.jpg‎|Belldandy aus Kapitel 230 ''Am Anfang war das Wort...''
</gallery>


    Dies ist die einfachste Variante der Galerie. Zwischen dem Öffnen "<gallery>" und dem Schließen "</gallery>" steht in jeder Zeile ein Bild. Dieser Bilder fügt man genauso wie überall sonst in der Wiki ein, nur dass man hier die eckigen Klammern weg lässt. Nach einem "Bild:" folgt also der exakte Name der Bilddatei, die ihr vorher hochgeladen habt. Wenn ihr ohne Leerzeichen dahinter noch einen "|" setzt könnt ihr anschließend einen Text, der dann unter dem Bild erscheinen soll, hinzufügen. Innerhalb von gallery funktioniert die Textformatierung wie gehabt. Es ist also kein Problem Wörter durch z.B. fett schreiben hervorzuheben.


    Welche weiteren Möglichkeiten habe ich mit gallery?


    Es gibt außerdem vier weitere Befehle, mit denen ihr das Aussehen der Galerie gestalten könnt:


    Mit <gallery caption="..."> könnt ihr eurer Galerie eine Überschrift geben, indem ihr die gewollte Überschrift anstelle der drei Punkte zwischen die Anführungszeichen setzt. Die Anführungszeichen müssen aber unbedingt bestehen bleiben. Ansonsten funktioniert das Ganze nicht.


    Mit <gallery perrow="..."> könnt ihr bestimmen wie viele Bilder pro Zeile angezeigt werden. Dafür reicht es die entsprechende Zahl anstelle der drei Punkte einzutragen. Ohne den "perrow" Eintrag werden standardmäßig vier Bilder nebeneinander gestellt.


    <gallery widths="..."> und <gallery heights="..."> ermöglichen es schließlich, die breite bzw. Höhe der Bilder einzustellen. Dabei werden alle Bilder automatisch mitskaliert, sodass die Galerie hinterher trotzdem einheitlich aussieht.


    Es ist auch möglich, mehrere Befehle miteinander zu kombinieren. Der Eintrag


    <gallery caption="Lerrachims gruselige Privatfotos" perrow="3" widths="250">


    würde also eine Galerie eröffnen, die drei Bilder pro Zeile enthält, alle Bilder automatisch auf eine maximale Breite von 250 Pixeln skaliert und unheimliche Fotos aus meinem wirklichen Leben zum Thema hat ;)


    Was ist die imagemap?


    Der Eintrag "<imagemap>" (ohne Anführungszeichen) ermöglicht es, von einem Bild gleichzeitig auf viele verschiedene Seiten zu verlinken. Er kann beispielsweise benutzt werden, um von einer Tokyo Karte auf die verschiedenen Bezirke der Stadt weiterzuleiten, indem man auf den entsprechenden Bezirk klickt (hier zu sehen). Auch ist es denkbar, dass man von einem Bild auf dem mehrere Charaktere zu sehen sind, direkt auf die jeweilige Charakterbeschreibung verlinkt wird. Da diese Funktion ganz neu in unserer Wiki ist, findet sie bisher nur an einer Stelle Benutzung.


    Wie kann ich imagemap benutzen?


    Der Code für imagemap sieht auf den ersten Blick oft erschlagend aus. Allerdings besteht er aus drei relativ einfachen Grundbausteinen.


    Mit "<imagemap>" wird der Eintrag geöffnet und mit "</imagemap>" geschlossen.
    In der ersten Zeile nach dem "<imagemap>" wird zunächst das Bild aufgerufen. Bis auf die Tatsache, dass dafür wieder die eckigen Klammern weggelassen werden müssen, funktioniert dies wie sonst auch in der Wiki. So ist also auch z.B. der Befehl "|thumb|" anwendbar.


    In den weiteren Zeilen folgen nun die einzelnen Links. Diese werden entweder durch ein "circle", falls der Bereich der verlinkt wird kreisförmig ist, ein "rect", wenn es sich um eine rechteckige Form handelt oder ein "poly", für alle weiteren Formen, eingeleitet. Anschließend folgt eine lange Zahlenreihe, die die Koordinaten des Links beschreiben und hinter dieser Zahlenreihe zu guter Letzt das Ziel des Links in zwei eckigen Klammern. In einer weiteren Zeile, die mit "default" beginnt, kann man einen einheitlichen Link für alle bisher nicht abgedeckten Bereiche erstellen.


    Als letztes folgt in in einer weiteren Zeile der Befehl "desc" mit dem man die Postion eines kleinen "i"-Button festlegen kann, der das Bild in Originalgröße aufruft. Mögliche Positionen, die einfach hinter das "desc" geschrieben werden sind: top-right, bottom-right, bottom-left, top-left und none Sollte man sich allerdings dafür entscheiden, den Befehl "|thumb|" zu verwenden, verschwindet der "i"-Button. Als letztes wird der Eintrag dann natürlich wieder mit einem "</imagemap>" geschlossen.


    Geht das nicht auch einfacher?


    Verwirrt? Macht nichts! Hier gibt es ein hervorragendes Tool, mit dem man sich den Code ganz einfach erstellen kann.


    Als erstes muss man die Internet Adresse des Bildes (URL) in die auf dem Bild markierte Spalte eintragen und in die Spalte daneben einen Namen. Dafür verwendet man am besten den Dateinamen des Bildes unter dem man das Bild in der Wiki hochgeladen hat. Jetzt drückt man auf "Laden" und schon sollte das Bild zu sehen sein. Ist dies nicht der Fall, überprüft man am besten nochmal die URL und versucht dann das Bild bei einem anderen Bildhoster hochzuladen. Bei mir hat es beispielsweise gut mit Photobucket funktioniert.




    Wenn das Bild erscheint, kommt jetzt die Tatsächliche Arbeit auf euch zu! Jetzt müsst ihr nämlich die verschiedenen Bereiche, die es zu verlinken gilt auswählen und das entsprechende Ziel eingeben. Dafür habt ihr nun die Auswahl zwischen einer Rechteckform, einem Kreis und einem beliebigen Polygon. Ich habe Polygone verwendet. Ich klicke also zunächst auf Polygon, sodass in dem Kasten über dem "Ändern" steht, ein "[poly]" erscheint und klicke dann auf dem Bild die Eckpunkte des Bereichs den ich Auswählen möchte an. Das muss man am besten einfach einmal selber ausprobieren, dann merkt man auch gleich, dass es gar nicht so schwer ist, wie es jetzt vielleicht klingen mag. Sollte man sich mal verklicken ist das auch nicht weiter schlimm. Klickt einfach auf "Bereich löschen" und steckt den Bereich noch einmal ab. In dem Kasten mit dem Titel "Allgemein" ist es schließlich noch wichtig das Ziel des Links einzutragen. Im Beispiel Tokyo also den Namen des vorher abgesteckten Bezirks. Ist man mit einem Bereich fertig, kann man mit dem nächsten anfangen, indem man ein weiteres Mal auf "Polygon" klickt.




    Seit ihr soweit mit den einzelnen Bereichen fertig, könnt ihr weiter unten unter "Globale Einstellungen" noch auswählen, wo der "i"-Button erscheinen soll. Im Kasten "ImageMap Code" findet ihr dann schließlich den fertigen Code, der so wie er ist direkt in die Wiki kopiert werden kann.


    So damit ist dieses Tutorial auch schon vorbei. Ich hoffe ich konnte euch damit weiterhelfen und euch diese beiden, wie ich finde, tollen Funktionen etwas näher bringen. Bei Fragen oder Anmerkungen könnt ihr mir gerne eine PM schicken und ich ergänze das hier dann entsprechend.


    lG Lerrachim