Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03623.jsonl.gz/2395

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]]
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.
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.
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]]
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]]
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]]
[[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:
|Flag||Beispiele|
|ID eines Bildes||id=Name|
|Zoom-Bild||zoom=zoombild.jpg|
|Hover-Bild||hover=hoverbild.jpg|
|Grösse eines Bildes||600px, 50%, fluid, noscale|
|Ausrichtung eines Bildes||left, center, right, fix, filler, boxed|
|Bilder mit Rahmen und Beschriftung||framed, bframed, vframed, nocaption|
|Bilder-Links||link=Wiki-Seite, link=URL|
|Text-Link auf Bild-Infoseite||info, none|
|Weitere HTML-Attribute für Bilder||onmousemove=Handler(Event)|
Es gibt zudem sog. Kombi-Flags, welche mehrere Flags zu einem zusammen fassen. Nachfolgend werden alle Bilder-Flags ausführlich beschrieben:
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
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.
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
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.
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.
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.
|Flag||Beschreibung|
|fluid||Bewirkt, dass das Bild bei Platzmangel automatisch verkleinert wird und die Zoomfunktion aktiviert wird. Dieses Flag ist standardmässig bei allen Bildern aktiviert, mit Ausnahme von kleinen GIF-Bildern (kleiner 250 Pixel).|
|noscale|
nozoom
|Deaktiviert die automatische Verkleinerung eines Bildes und den automatischen Zoom bei verkleinerten Bildern.|
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.
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.
|Flag||Position|
|inline||(Standardwert) Bild im Text oder linksbündig in eigenem Absatz|
|left||Bild linksbündig, Text umfliesst das Bild|
|right||Bild rechtsbündig, Text umfliesst das Bild|
|center||Bild zentriert in eigenem Absatz oder innerhalb einer Tabellenzelle|
|boxed||Setzt den Abstand zwischen Bilderrahmen und Umgebung auf 0. Praktisch, wenn Bild mit Rahmen innerhalb eines <div>-Tags Verwendet wird, für welches eine Breite vorgegeben ist.|
|fix||Verhindert die automatische Neuanordnung von Bildern mit umfliessendem Text, wenn der Platz für den Text zu knapp wird.|
|filler||Das Bild dient nur als Platzfüller und soll ausgeblendet werden, wenn der Platz des umfliessenden Textes zu knapp wird. Dieses Flag hat nur eine Wirkung, wenn das Bild links oder rechts per left oder right auf der Seite platziert wird.|
|nocaption||Bei Bildern mit Rahmen wird der Bildtext nicht als Bildunterschrift angezeigt, sondern in das alt und title Attribut gesetzt.|
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}}
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.
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.
Flag link=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]],...
Flag info
[[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.
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.
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:
|Flag||Bedeutung|
|lframed||Kombination von: left|framed|
|rframed||Kombination von: right|framed|
|cframed||Kombination von: center|framed|
|lbframed||Kombination von: left|bframed|
|rbframed||Kombination von: right|bframed|
|cbframed||Kombination von: center|bframed|
|lvframed||Kombination von: left|vframed|
|rvframed||Kombination von: right|vframed|
|cvframed||Kombination von: center|vframed|
|thumb||Kombination von: 180px|zoom|right|framed|
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]]