Damit Bilder auf einer Wiki-Seite eingefügt werden können, müssen diese an das entsprechende Wiki übertragen werden. Dieser Vorgang wird als Upload bezeichnet. Es reicht dann aus, das Bild unter dem Dateinamen zu referenzieren, wie es auf dieser Seite beschrieben wird.

Syntax

[[Bild:Datei|Flags|Text]]   oder
[[:Bild:Datei|Flags|Text]]

Datei

Name einer Bilddatei, welche sich im Medien-Verzeichnis eines Wikis befindet oder URL zu einem externen Bild.

Flags (optional)

bestimmt ID, Zoom-Bild, Hover-Bild, Image-Map, Grösse, Position und Rahmen des Bildes oder andere spezielle Eigenschaften (siehe Bilder-Flags). Verschiedene Flags können kombiniert werden. Mehrere Flags werden durch | voneinander getrennt.

Text

Kurzbeschrieb des Bildes. Bei Bildern mit Rahmen wird Text unterhalb des Bildes ausgegeben. Bei Bildern ohne Rahmen wird Text bei den meisten Browsern als Tooltip angezeigt, wenn man den Mauszeiger auf das Bild setzt. Text darf auch Formatierungen, Links oder sogar weitere kleine Bildchen enthalten. Diese werden jedoch nur dargestellt, wenn das Bild einen Rahmen erhält.

Bilder werden standardmässig als Link auf die entsprechende Bild-Infoseite ausgeführt, ausser wenn die Zoomfunktion Verwendung findet. Der Doppelpunkt vor :Bild: bewirkt, dass das Bild kein Link mehr ist, dass also beim Anklicken des Bildes nicht zu einer Bild-Infoseite gesprungen wird.

Zoom-Bild einbinden

Wenn du ein grosses Bild hast, ist es übersichtlicher, davon noch eine kleine Version zu erzeugen, und diese auf der Wiki-Seite einzubinden. Gibst du den Dateinamen des grossen Bildes als Zoombild an, kann der Leser durch Anklicken des Bildes oder des Symbols das Bild animiert auf derselben Seite einzoomen. Ein Doppelklick auf das Bild öffnet das grosse Bild in einem eigenen Fenster.

[[Bild:walti.jpg|zoom=waltiZoom.jpg|123px|right|framed|Walti]]

Die Angabe 123px ist die Breite des kleineren Bildes. Die Höhe muss nicht angegeben werden. Sie wird so bestimmt, dass das Bild unverzerrt dargestellt wird. Die Ausmasse des Zoom-Bildes müssen nicht angegeben werden. Es wird immer in der Auflösung 1:1 dargestellt, wenn es innerhalb des Browserfensters Platz hat. Zu grosse Bilder werden soweit eingezoomt, dass das Bild das Browserfenster in der Breite ausfüllt. Wir die Grösse des Browserfensters verändert, indem z.B. ein mobiles Gerät gedreht wird, passt sich das Zoom-Bild automatisch der neuen Grösse an.

Auch wenn du ein Bild nicht in zwei Grössen hast, kannst du die Zoom-Funktion verwenden. Gib einfach auf der Seite eine kleinere Grösse für das Bild an und gib den Bildnamen zweimal an oder lass einfach den Zoom-Namen weg:

[[Bild:waltiZoom.jpg|80px|zoom|right|framed|Walti]]

Wenn ein Bild in einer Box dargestellt wird (z.B. in einer Tabelle oder einer Layoutspalte), so kann seine Grösse als w100% angegeben werden. Damit passt es sich der zur Verfügung stehenden Grösse automatisch an. Wenn das geladene Bild grösser ist, als der zur Verfügung stehende Platz, so kann es gezoomt werden, auch wenn das Flag zoom nicht angegeben wird. Das automatische Zoomen kann mit dem Flag nozoom unterbunden werden. Dies ist z.B. bei Bildern sinnvoll, die extra nicht in voller Auflösung angezeigt werden sollen, z.B. bei Retina-Displays oder wenn ein solches Bild in einem Panorama-Fenster ist und ein Zoom hier stören würde.

Hinweis: Zoom-Bilder, also die vergrösserten Versionen der Vorschaubilder auf der Seite, werden automatisch im Hintergrund herunter geladen, während der User noch die Seite liest. Dadurch verkürzt sich die Wartezeit, wenn auf ein Zoom-Bild geklickt wird.

Hover-Bild einbinden

Du kannst ganz einfach Bilder erzeugen, welche sich beim darüber fahren mit der Maus ändern. Dies wird erreicht, indem beim Bild per Flag hover das Hover-Bild angegeben wird, welches beim Überfahren mit der Maus an Stelle des Originales eingeblendet werden soll.

[[Bild:Normal-Bild|hover=Hover-Bild|Text]]

Normal-Bild

Dieses Bild wird angezeigt, wenn die Maus ausserhalb positioniert ist.

Hover-Bild

Dieses Bild wird angezeigt, wenn die Maus im Bild positioniert ist.

Damit das Hover-Bild nicht verzerrt abgebildet und das Seiten-Layout nicht gestört wird, sollte das Hover-Bild dieselben Ausmasse haben wie das Original-Bild.

Beispiel

[[:Bild:imap demo.jpg|hover=walti.jpg|123px|rframed|Hover-Test]]

Hover-Bilder lassen sich mit anderen Effekten wie Zoom-Bilder und Image-Maps kombinieren.

Externe Bilder einbinden

Es können auch Bilder aus anderen Wikis oder Websites eingebunden werden. Bei Bildern aus anderen Wikis muss vor dem Dateinamen die Wiki-ID angegeben werden:

[[Bild:Wiki:Dateiname|Text]]

Beim Anklicken des Bildes wird die Bild-Infoseite des entsprechenden Wikis aufgerufen. Für Bilder aus anderen Websites wird einfach deren vollständige URL angegeben. Zum Beispiel:

[[Bild:../folder/pic.jpg|Text]]
[[Bild:http://www.domain.ch/folder/pic.jpg|Text]]

Für externe Bilder gibt es keinen Link auf eine Bild-Infoseite. Auch Zoom-Bilder und Hover-Bilder können analog aus einem anderen Wiki oder einer anderen Website stammen.

Bilder-Flags

Mit den Bilder-Flags werden ID, Grösse des Bildes, Zoom-Bild, Hover-Bild, Ausrichtung auf der Seite (inline, links, rechts, zentriert), Rahmen und weitere Angaben festgelegt.

[[Bild:Datei|Flags|Text]]

Du kannst mehrere Flags getrennt durch | gleichzeitig angeben. Die Reihenfolge der Flags ist beliebig. Kommen mehrere Flags vor, die denselben Aspekt betreffen (z.B. Ausrichtung, Rahmen), so gilt die letzte Angabe. Wenn für ein Aspekt keine Angabe gemacht wird, gelten die Standardwerte.

Es gibt Flags für folgende Aspekte eines Bildes:

Es gibt zudem sog. Kombi-Flags, welche mehrere Flags zu einem zusammen fassen. Nachfolgend werden alle Bilder-Flags ausführlich beschrieben:

ID eines Bildes

Wenn Bilder referenziert werden müssen, zum Beispiel per Makro: ptr, müssen sie eine ID haben. Einem Bild wird eine ID per ID-Flag zugeordnet. Auf derselben Seite dürfen keine zwei Bilder dieselbe ID haben!

id=BildID
id=$BildID

BildID

ist ein Name ohne Leerzeichen und ohne Spezialzeichen, ausser _ (Underscore). Das erste Zeichen in BildID muss ein Buchstabe sein, die weiteren Zeichen können Buchstaben, Zahlen oder _ sein. Intern wird BildID der String picid vorangesetzt. Soll dies nicht der Fall sein, muss der BildID ein $ Zeichen vorangesetzt werden:

$BildID

Das HTML-Element erhält die ID BildID ohne $ Zeichen. Verwende diese Art der ID, wenn auf das Bild per JavaScript oder CSS zugegriffen werden soll und nicht per Makro.

Beispiel

[[Bild:walti.jpg|id=Walti|123px|Bild von mir]]

Bilder erhalten vom Wiki automatisch eine ID zugewiesen, wenn keine explizit per ID-Flag angegeben wird. Das erste Bild auf einer Seite erhält die ID 0 (Null), die weiteren werden entsprechend fortlaufend nummeriert.

Wenn Bilder von Makros referenziert werden sollen, empfiehlt sich die explizite Angabe einer ID, damit beim Verschieben oder Tauschen von Bildern auf einer Seite die entsprechenden Makros das zugehörige Bild nicht verlieren.

Grösse eines Bildes

Die Breite eines Bilder muss in Pixel oder Prozent in folgendem Format angegeben werden: 123px oder 20%

Durch Angabe der Bildbreite kann ein Bild in einer anderen Grösse auf der Seite abgebildet werden, als die Bildabmessungen der Datei vorgeben. Es wird aber in jedem Fall die ganze Datei aus dem Internet herunter geladen. Wird keine Grösse angegeben, wird die Grösse wo möglich automatisch ermittelt oder auf den Standardwert DEFAULT_THUMB_WIDTH (180 Pixel) gesetzt.

Die Breite des Bildes kann auch in Prozent der Breite des Containers (z.B: Paragraph, Tabellenzelle, div-Element) angegeben werden. Das Bild wird dann dynamisch mit der Seitenbreite skaliert.

Standardwert

Ohne Angabe der Bildbreite wird die tatsächliche Grösse des Bildes verwendet oder der Standardwert DEFAULT_THUMB_WIDTH (180 Pixel), je nach Verwendung von weiteren Bilder-Flags.

Wenn ein Bild mit einem Rahmen versehen wird, kann das Wiki die Grösse des Bildes nicht in jedem Fall automatisch ermitteln und es wird der Standardwert (180px) verwendet. Es wird daher empfohlen, die Grösse immer explizit anzugeben. Die Höhe muss nie angegeben werden, sie wird immer proportional mitskaliert.

Beispiele

[[:Bild:walti.jpg|Standardwert: tatsächliche Grösse]] 
[[:Bild:walti.jpg|82px|82 Pixel]]
[[:Bild:walti.jpg|41px|41 Pixel]]
[[:Bild:walti.jpg|10%|10%]]

Ändere die Grösse des Fensters um zu sehen wie das letzte Bild seine Grösse anpasst.

Automatische Verkleinerung von Bildern bei Platzmangel

Wenn der Platz für ein Bild zu knapp ist, zum Beispiel weil die Webseite in einem mobilen Gerät angezeigt wird oder weil das Browserfenster verkleinert wird oder weil ein zugewiesender Bereich für das Bild (z.B. in einer Tabelle) zu klein ist, so wird das Bild automatisch soweit verkleinert, dass es Platz hat.

Durch einen Klick auf das verkleinerte Bild wird das Bild herangezoomt.

Ausnahme

Bilder im GIF-Format, die kleiner oder gleich MIN_FLUID_GIF_SIZE (32 Pixel) sind, werden nicht automatisch verkleinert. Durch Verwendung des Flags fluid kann das automatische Verkleinern auch für diese Bilder aktiviert werden.

Bilder-Flags mit Einfluss auf die Grösse des Bildes

Bei Bildern mit Image-Maps führt das automatische Verkleinern zu nicht mehr passenden Link-Bereichen. Daher ist es sinnvoll, bei diesen Bildern das Flag noscale zu verwenden. Dadurch wird das Bild nicht automatisch verkleinern.

Die Bilder-Links, die per Pointer-Makros definiert werden, funktionieren auch bei vergrösserten oder verkleinerten Bildern korrekt! Hier muss das Flag noscale nicht verwendet werden.

Auch bei anderen Elementen wie div's kann das Flag fluid als Klasse $fluid verwendet werden und hat dann dieselbe Funktion.

Bei Panorama-Bildern oder Bildern für Retina-Displays kann man künstlich eine kleiner Bild-Grösse angeben, als das Bild tatsächlich hat. Um in diesem Fall den sonst automatisch aktivierten Zoom zu unterdrücken, kann das Flag nozoom verwendet werden.

Ausrichtung eines Bildes

Die folgenden Bilder-Flags bestimmen die Ausrichtung des Bildes bezüglich dem umgebenden Text:

Bei den Flags left und right, bei denen der Text das Bild umfliesst, erscheint die Oberkante des Bildes an der Stelle im Text, wo das Bild eingefügt worden ist. Das Bild kann mitten in einem Text oder in einem eigenen Abschnitt stehen. Zur besseren Übersicht empfehle ich, dass Bilder, die nicht inline sind, in einem eigenen Absatz gesetzt werden.

Standardwert: inline

Wird keine Ausrichtung angegeben, gilt der Standardwert inline. Dabei kann das Bild mitten im Text stehen (z.B. ein kleines Symbol im Text) oder auf einer separaten Zeile. Im letzten Fall wird das Bild linksbündig in einem eigenen Absatz dargestellt.

Beispiel mit Flag right

[[Bild:walti.jpg|123px|right|Ausrichtung rechts]]

Um den Textfluss um das Bild an dieser Stelle wieder aufzuheben, kann das Makro break verwendet werden.

{{break}}

Automatische Neuanordnung von Bild und Text

Bei Bildern mit den Flags left oder right fliesst der Text um das Bild herum, sofern genügend Platz vorhanden ist. Das Wiki ist so programmiert, dass für den Text neben dem Bild mindestens ca. 250 Pixel Platz reserviert bleibt. Wird der Platz zu knapp, wird das Bild linksbündig in einen eigenen Absatz gesetzt und der Text wird unter das Bild gesetzt. Damit hat man bei jeder Bildschirmauflösung eine saubere Darstellung. Dies funktioniert sowohl bei Bildern mit einer Grössenangabe in Pixeln als auch bei Grössenangaben in Prozent. Bilder die breiter sind als MAX_AUTO_FLOAT_WIDTH (500 Pixel) werden immer in einem separaten Absatz platziert ohne umfliessenden Text.

Wenn man dieses automatische Neuanordnen von Bild und Text verhindern will, so kann man das Flag fix beim Bild angeben. Wenn das Bild nur als Füller oder als für den Inhalt unwichtigen optischen Anziehungspunkt dient, so kann das Flag filler angegeben werden. Wenn dann der Platz zu eng wird für den umfliessenden Text, wird das Bild ausgeblendet.

Bilder mit Rahmen und Beschriftung

Bilder können über Bilder-Flags mit 2 verschiedenen Rahmen versehen werden. Der Vorteil von Bildern mit Rahmen ist, dass sie mit Text versehen werden können.

Es gibt die Rahmen-Varianten framed, bframed und vframed.

Beispiele

{| noborder w:100%
| [[Bild:walti.jpg|123px|center|Ohne Flag]]
| [[Bild:walti.jpg|123px|center|framed|Flag: framed]]
| [[Bild:walti.jpg|123px|center|bframed|Flag: bframed]]
| [[Bild:walti.jpg|123px|center|vframed|Flag: vframed]]
|}

Das bframed Flag erzeugt Bilder mit einem leichten Rahmen aussen. Das Bild selbst erhält keinen Rahmen. Diese Version ist optisch nicht so streng wie framed.

Das vframed Flag erzeugt Bilder mit virtuellem Rahmen, d.h. der Rahmen ist unsichtbar, aber sonst gleich gross wie bei framed.

Das Symbol zeigt an, dass zu dem Bild eine Bild-Infoseite mit mehr Informationen über das Bild existiert. Auf diese Seite gelangt man mit einem Klick auf das Bild oder das Info-Symbol. Wenn keine Bild-Infoseite existiert, machst du einfach vor Bild: einen zusätzlichen Doppelpunkt. Damit wird das Bild kein Link mehr und das Bild-Info-Symbol verschwindet.

Die Bildunterschrift kann mit dem Flag nocaption unterdrückt werden. Der Text wird in diesem Fall in das alt und title Attribut des Bilder gesetzt.

Bilder-Links

Flag link=Link

Wenn du ein Bild oder ein Pictogramm hast und möchtest, dass beim Klick darauf eine bestimmte Wiki-Seite oder URL aufgerufen wird (nicht die Bild-Infoseite), so verwende dafür das Bilder-Flag link:

[[Bild:walti.jpg|link=wabis|Zur Seite wabis]]

und so sieht's aus:

Beim Klick auf dieses Bild gelangst du zur Seite wabis. Als Link kannst du auch einen Link auf eine Seite in einem anderen Wiki oder einer anderen Website machen, auf eine Überschrift in einer Seite verlinken und Parameter an die Seite übergeben (siehe auch Links):

[[Bild:Datei|link=Wiki:Seite|Text]]
[[Bild:Datei|link=../folder/webseite.html|text]]
[[Bild:Datei|link=http://folder/webseite.html|Text]]
[[Bild:Datei|link=Wiki:Seite#Titel~parameterliste|Text]]

Es können auch Bilder innerhalb einer Zeile verwendet werden, wie dieses , welches ebenfalls mit einem Klick zur Seite wabis führt:

...wie dieses [[Bild:info.gif|link=wabis|Link zu wabis]],...

Text-Link auf Bild-Infoseite

Flag info

Wenn du in einem Text auf eine Bild-Infoseite verlinken möchtest, kannst du das nicht einfach mit einem normalen Text-Link der folgenden Art tun:

[[Bild:walti.jpg|Infos über mich]]

Mit dieser Anweisung würde nämlich an dieser Stelle statt dem Text-Link «Infos über mich» das nebenstehende Bild angezeigt. Willst du statt dessen den Text-Link anzeigen, so verwende das Bilder-Flag info (früher none):

Hier findest du [[Bild:walti.jpg|info|Infos über mich]].

So siehts aus: Hier findest du Infos über mich.

Bild-Infoseite

Es ist nützlich, zu jedem Bild eine Infoseite zu erstellen, wo du aufschreibst, wie, wann und wo das Bild entstanden ist, von wem es erstellt wurde usw. Schreibe alles auf die Infoseite, was den Leser interessieren könnte.

Eine Infoseite zu einem Bild wird entweder beim Upload automatisch erstellt oder du erstellst sie, indem du auf das Bild oder das Info-Symbol beim entsprechenden Bild klickst. Ohne Bild-Infoseite kannst du ein Bild nicht löschen (siehe Löschen).

Auf der Bild-Infoseite bindest du das enstprechende Bild am besten auch wieder ein, damit der Leser gleich sieht, zu welchem Bild die Informationen gehören. Damit nun aber ein Klick auf dieses Bild nicht auch wieder zur Bild-Infoseite führt, setzt du vor Bild: einen zusätzlichen Doppelpunkt, etwa so:

[[:Bild:walti.jpg|]]

Beim Verwenden des Upload-Formulars wird die Bild-Infoseite automatisch entsprechend erstellt und ausgefüllt.

 Weitere Informationen zu Bild-Infoseiten

Kombi-Flags

Um dir etwas Schreibarbeit zu ersparen, gibt es die Kombi-Flags. Ein Kombi-Flag steht für eine bestimmte Kombination der oben erklärten Flags. Zum Beispiel kannst du statt der Kombination framed|right einfach rframed schreiben.

Folgende Kombi-Flags sind definiert:

Das Flag thumb aktiviert für das Bild zudem automatisch die Zoom-Funktion. Die beiden folgenden Zeilen haben den gleichen Effekt:

[[Bild:waltiZoom.jpg|thumb|Text]]
[[Bild:waltiZoom.jpg|180px|zoom|right|framed|Text]]