„Hilfe:Bilder“ – Versionsunterschied

Inhalt gelöscht Inhalt hinzugefügt
FBE2005 (Diskussion | Beiträge)
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 18: Zeile 18:
<span style="white-space:nowrap;">[[#Imagemaps|imagemap]],</span>
<span style="white-space:nowrap;">[[#Imagemaps|imagemap]],</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|links]] <small>(left)</small>,</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|links]] <small>(left)</small>,</span>
<span style="white-space:nowrap;">[[#Thumbnails|miniatur]] <small>(thumb)</small>,</span>
<span style="white-space:nowrap;">[[#Vorschaubilder|miniatur]] <small>(thumb)</small>,</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|ohne]] <small>(none)</small>,</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|ohne]] <small>(none)</small>,</span>
<span style="white-space:nowrap;">[[#Feste Skalierung|px]],</span>
<span style="white-space:nowrap;">[[#Feste Skalierung|px]],</span>
<span style="white-space:nowrap;">[[#Thumbnails|rahmenlos]] <small>(frameless)</small>,</span>
<span style="white-space:nowrap;">[[#Vorschaubilder|rahmenlos]] <small>(frameless)</small>,</span>
<span style="white-space:nowrap;">[[#Rahmen|rand]] <small>(border)</small>,</span>
<span style="white-space:nowrap;">[[#Rahmen|rand]] <small>(border)</small>,</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|rechts]] <small>(right)</small>,</span>
<span style="white-space:nowrap;">[[#Ausrichten im Text|rechts]] <small>(right)</small>,</span>
Zeile 62: Zeile 62:
|}
|}


Da durch große Bilder die Seiten dann sehr lange zum Laden brauchen, solltest du aus Rücksicht auf die Modembenutzer dies nur in Ausnahmefällen so handhaben, zum Beispiel wenn das Originalbild sehr klein ist. Benutze sonst besser verkleinerte Vorschauansichten (so genannte [[#Thumbnails|Thumbnails]]), die der Leser – wenn es ihn interessiert – dann mit einem Klick auf die Lupe vergrößern und genauer betrachten kann.
Da durch große Bilder die Seiten dann sehr lange zum Laden brauchen, solltest du aus Rücksicht auf die Modembenutzer dies nur in Ausnahmefällen so handhaben, zum Beispiel wenn das Originalbild sehr klein ist. Benutze sonst besser verkleinerte Vorschauansichten (siehe [[#Vorschaubilder|Miniatur]]), die der Leser – wenn es ihn interessiert – dann mit einem Klick auf die Lupe vergrößern und genauer betrachten kann.


== Thumbnails ==
== Vorschaubilder ==


[[Datei:Feather.svg|miniatur|Text der Bildbeschreibung]]
[[Datei:Feather.svg|miniatur|Text der Bildbeschreibung]]
Zeile 70: Zeile 70:
[[Datei:Feather.svg|rechts|rahmenlos|Text der Bildbeschreibung]]
[[Datei:Feather.svg|rechts|rahmenlos|Text der Bildbeschreibung]]


MediaWiki kann automatisch [[Vorschaubild]]er (englisch: „{{lang|en|thumbnails}}“) erzeugen. Dazu fügt man den Zusatz '''<tt>miniatur</tt>''' oder <tt>thumb</tt> zwischen Dateiname und Beschreibungstext ein, zum Beispiel <tt><nowiki>[[Datei:Feather.svg|miniatur|Text der Bildbeschreibung]]</nowiki></tt>.
Das [[MediaWiki]] kann automatisch [[Vorschaubild]]er (englisch: „{{lang|en|thumbnails}}“; auch „Miniaturbilder“ genannt) erzeugen. Dazu ist der Zusatz '''<tt>miniatur</tt>''' oder <tt>thumb</tt> zwischen Dateiname und Beschreibungstext einzufügen (Beispiel: <tt><nowiki>[[Datei:Feather.svg|miniatur|Text der Bildbeschreibung]]</nowiki></tt>).


Für Thumbnails ohne Rahmen fügt man anstelle von <tt>miniatur</tt> den Zusatz '''<tt>rahmenlos</tt>''' oder <tt>frameless</tt> hinzu. Dabei ist zu beachten dass diese jedoch standardmäßig links ausgerichtet sind, so dass für das gleiche Verhalten zu <tt>miniatur</tt> ein <tt>rechts</tt> (oder <tt>right</tt>) notwendig ist, zum Beispiel <tt><nowiki>[[Datei:Feather.svg|gerahmt|rechts|Text der Bildbeschreibung]]</nowiki></tt>.
Für Bilder ohne Rahmen fügt man anstelle von <tt>miniatur</tt> den Zusatz '''<tt>rahmenlos</tt>''' oder <tt>frameless</tt> ein. Dabei ist zu beachten dass diese jedoch standardmäßig links ausgerichtet sind, so dass für das gleiche Verhalten zu <tt>miniatur</tt> ein <tt>rechts</tt> (oder <tt>right</tt>) notwendig ist (Beispiel: <tt><nowiki>[[Datei:Feather.svg|gerahmt|rechts|Text der Bildbeschreibung]]</nowiki></tt>).


Das erzeugte Vorschaubild wird rechtsbündig ausgerichtet und vom Artikeltext umflossen. Der Alternativtext wird unter dem Bild als Beschreibung angezeigt. Über die Lupe springt man zur großen Version des Bildes auf seiner Beschreibungsseite.
Das erzeugte Vorschaubild wird rechtsbündig ausgerichtet und vom Artikeltext umflossen. Der Alternativtext wird unter dem Bild als Beschreibung angezeigt. Über die Lupe springt man zur großen Version des Bildes auf seiner Beschreibungsseite.


Angemeldete Benutzer können die Bildgröße der Vorschaubilder in ihren [[Hilfe:Einstellungen|Benutzereinstellungen]] festlegen; für nichtangemeldete Leser erscheinen diese Bilder mit einer Bildbreite von 180 [[Pixel]]n.
Angemeldete Benutzer können die Bildgröße der Vorschaubilder in ihren [[Hilfe:Einstellungen|Benutzereinstellungen]] festlegen; für nichtangemeldete Leser erscheinen diese Bilder mit einer Bildbreite von 180&nbsp;[[Pixel]]n.


Allgemein sollte diese Art der Bilddarstellung in Artikeln verwendet werden.
Allgemein sollte diese Art der Bilddarstellung in Artikeln verwendet werden.
Zeile 82: Zeile 82:
Bildunterschriften unterstützen alle [[Hilfe:Textgestaltung|Möglichkeiten der Textgestaltung]]. <br style="clear:both" />
Bildunterschriften unterstützen alle [[Hilfe:Textgestaltung|Möglichkeiten der Textgestaltung]]. <br style="clear:both" />


Vom Originalbild abweichende Thumbnails sind mit der derzeitigen Software nicht mehr möglich.<ref>[http://de.wikipedia.org/w/index.php?title=Hilfe:Bilder&diff=39198990&oldid=39198441 diff=39198990&oldid=39198441 (21.11.2007)] bzw. [http://de.wikipedia.org/w/index.php?title=Hilfe:Bilder&diff=next&oldid=51672691 diff=next&oldid=51672691 (16.10.2008) dieser Seite]</ref>
Vom Originalbild abweichende Vorschaubilder sind mit der derzeitigen Software nicht mehr möglich.<ref>[http://de.wikipedia.org/w/index.php?title=Hilfe:Bilder&diff=39198990&oldid=39198441 diff=39198990&oldid=39198441 (21.11.2007)] bzw. [http://de.wikipedia.org/w/index.php?title=Hilfe:Bilder&diff=next&oldid=51672691 diff=next&oldid=51672691 (16.10.2008) dieser Seite]</ref>


== Von der Bildbeschreibungsseite abweichendes Linkziel ==
== Von der Bildbeschreibungsseite abweichendes Linkziel ==
Zeile 103: Zeile 103:




Bei Thumbnails funktioniert <tt>verweis</tt> nicht; da muss man auf ein Konstrukt mit Imagemap zurückgreifen:
Bei Miniaturbildern funktioniert <tt>verweis</tt> nicht; hier muss auf ein Konstrukt mit <tt>imagemap</tt> zurückgegriffen werden, wie das folgende Beispiel zeigt:


{| style="background-color:transparent;"
{| style="background-color:transparent;"
Zeile 122: Zeile 122:
== Bilder skalieren ==
== Bilder skalieren ==


Grundsätzlich sollten starre Bildgrößen nur in Ausnahmefällen verwendet werden, da dies die individuellen Anzeigeeinstellungen für Vorschaubilder (Thumbnails) der Benutzer ignoriert. Wann immer möglich, lass die Benutzer selbst wählen, in welcher Größe sie Vorschaubilder sehen wollen.
Grundsätzlich sollten starre Bildgrößen nur in Ausnahmefällen verwendet werden, da dies die individuellen Anzeigeeinstellungen für [[#Vorschaubilder|Vorschaubilder]] der Benutzer ignoriert. Wann immer möglich, lass die Benutzer selbst wählen, in welcher Größe sie Vorschaubilder sehen wollen.


=== Feste Skalierung ===
=== Feste Skalierung ===
Zeile 128: Zeile 128:
[[Datei:Feather.svg|miniatur|100px|Beschreibung]]
[[Datei:Feather.svg|miniatur|100px|Beschreibung]]


Mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''100px'''<nowiki>|Beschreibung]]</nowiki></tt> wird die Breite des generierten Miniaturbildes ''(thumbnail)'' auf 100 Pixel festgelegt (Standardgröße, keine Definition: 180&nbsp;Pixel oder der Vorgabewert des Benutzers).
Mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''100px'''<nowiki>|Beschreibung]]</nowiki></tt> wird die Breite eines generierten [[#Vorschaubilder|Vorschaubildes]] auf 100&nbsp;Pixel festgelegt (Standardgröße, keine Definition: 180&nbsp;Pixel oder der Vorgabewert des Benutzers).


Mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''x100px'''<nowiki>|Beschreibung]]</nowiki></tt> wird die Höhe des Miniaturbildes festgelegt. Die zugehörige Breite bzw. Höhe wird aus dem Seitenverhältnis automatisch berechnet.
Mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''x100px'''<nowiki>|Beschreibung]]</nowiki></tt> wird die Höhe des Miniaturbildes festgelegt. Die zugehörige Breite bzw. Höhe wird aus dem Seitenverhältnis automatisch berechnet.
Zeile 134: Zeile 134:
Wenn man mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''100x100px'''<nowiki>|Beschreibung]]</nowiki></tt> sowohl die Maximalhöhe wie auch -breite angibt, wird der im Verhältnis kleinere Wert genommen. In diesem Beispiel würde das Bild weder höher noch breiter als 100&nbsp;Pixel werden.
Wenn man mit <tt><nowiki>[[Datei:Feather.svg|miniatur|</nowiki>'''100x100px'''<nowiki>|Beschreibung]]</nowiki></tt> sowohl die Maximalhöhe wie auch -breite angibt, wird der im Verhältnis kleinere Wert genommen. In diesem Beispiel würde das Bild weder höher noch breiter als 100&nbsp;Pixel werden.


Außerhalb von [[Hilfe:Infoboxen|Infoboxen]] sollten keine festen Bildbreiten verwendet werden. Für den Fließtext im [[Hilfe:Namensräume|Artikelnamensraum]] gibt es [[#Thumbnails|Thumbnails]] in Verbindung mit der ''automatischen Skalierung''. Um ein Bild/eine Grafik in besonderen Fällen dennoch größer oder kleiner darzustellen, kann der „upright“-Parameter verwendet werden. Damit erfolgt eine prozentuale Skalierung, die sich an den Benutzereinstellungen orientiert. Für die Verwendung siehe das folgende Kapitel. <br style="clear:both" />
Außerhalb von [[Hilfe:Infoboxen|Infoboxen]] sollten keine festen Bildbreiten verwendet werden. Für den Fließtext im [[Hilfe:Namensräume|Artikelnamensraum]] gibt es [[#Vorschaubilder|Vorschaubilder]] in Verbindung mit der ''automatischen Skalierung''. Um ein Bild/eine Grafik in besonderen Fällen dennoch größer oder kleiner darzustellen, kann der „upright“-Parameter verwendet werden. Damit erfolgt eine prozentuale Skalierung, die sich an den Benutzereinstellungen orientiert. Für die Verwendung siehe das folgende Kapitel. <br style="clear:both" />


=== Hoch- und querformatige Bilder kombinieren – automatische Skalierung ===
=== Hoch- und querformatige Bilder kombinieren – automatische Skalierung ===

Version vom 17. Januar 2010, 12:48 Uhr

Vorlage:Wikipedia-Hilfe

Diese Seite erklärt, wie du Bilder, Grafiken und Karten in Artikel einfügst und platzierst. Ob und welche Bilder sinnvoll sind, beschreibt Wikipedia:Artikel illustrieren.

Bilder und andere Dateien werden üblicherweise nicht in der deutschsprachigen Wikipedia selbst, sondern im zentralen Medienarchiv Wikimedia Commons hochgeladen, damit andere Projekte sie mitverwenden können. Wie das geht, erfährst du im Bildertutorial oder auch auf Hilfe:Wikimedia Commons. Welche Bilder du hochladen darfst, erklärt Wikipedia:Bildrechte – eine Seite, die du unbedingt durchlesen solltest, wenn du nicht möchtest, dass deine Bilder wegen Lizenzproblemen wieder gelöscht werden.

Hilfe zum Finden freier, für uns verwendbarer Bilder findest du auf der Seite Wikipedia:Public-Domain-Bilderquellen. Falls du noch offene Fragen hast, kannst du dich gerne an die Redaktion Bilder wenden.

Stichwortverzeichnis: gerahmt (framed), gallery, hochkant (upright), imagemap, links (left), miniatur (thumb), ohne (none), px, rahmenlos (frameless), rand (border), rechts (right), verweis (link), zentriert (center). Siehe auch „mehrere Bilder“ (Vorlage)

Einbindung

Detail der Anghiarischlacht, 1603
gezeichnete Kopie von Peter Paul Rubens

Bilder werden normalerweise mit [[Datei:Dateiname|miniatur|Beschreibung]] eingebunden. Bis zum 12. Dezember 2008 wurde „Bild:“ statt „Datei:“ zur Einbindung verwendet. Diese Variante gilt als veraltet, wird aber von der MediaWiki-Software ebenso wie (in jeder Wikipedia) der englische Begriff „File:“ („Image:“), erkannt. Daher sind Artikelbearbeitungen, die ausschließlich derartige Änderungen vornehmen, wegen der unnötigen Serverbelastung nicht erwünscht.

Das verwendete Bild muss in der Wikipedia oder Wikimedia-Commons hochgeladen sein. Das direkte Einbinden eines Bildes von einer externen Adresse (http://...) ist in Wikipedia – auch aus rechtlichen Gründen – nicht möglich.

In der Dateibeschreibung kann ein Verweis auf den Autor des Bildes vermerkt werden, wenn der Autor selbst relevant ist (also zum Beispiel einen eigenen Wikipedia-Artikel hat) – siehe Beispiel rechts.

Die Dateibeschreibung wird grundsätzlich ohne einen Punkt abgeschlossen.

Prinzipielles zur Anordnung

Weil das Aussehen einer Webseite in erster Linie davon abhängt, wie sie der jeweilige Browser darstellt, nicht, wie der Autor sie plant, soll bei Anordnung, Ausrichtung und Größe möglichst auf zu spezielle Vorgaben verzichtet werden. Gutes Webdesign zeichnet sich durch Flexibilität aus, perfektes Layout ist erst für eine gedruckte Ausgabe wie den WikiReader nötig.

Die Bilder sollten möglichst in die jeweiligen Kapitel gesetzt werden. Zu viele Bilder am Anfang des Artikels, die sich „von selbst“ auf den Artikel verteilen, sind ungünstig: Sie zeigen leicht unerwünschte Nebenwirkungen im Layout und bringen manche ältere Browser zum Absturz.

Originalgröße

Bilder lassen sich mit [[Datei:Dateiname|Beschreibung]] in Artikel einfügen. Das Bild wird dann in Originalgröße links im Artikel angezeigt. Die Beschreibung wird beim Platzieren der Maus über dem Bild (sogen. Hint) angezeigt. Mit der Option gerahmt bzw. framed, z. B. [[Datei:Dateiname|gerahmt|Beschreibung]] wird das Bild mit einem Rahmen umgeben, rechtsbündig angezeigt und fixe Größenangaben (etwa |10px|) ignoriert.

Eingabe Ergebnis
[[Datei:Feather 150 transparent.png|Feder]] Feder
[[Datei:Feather 150 transparent.png|gerahmt|Eine Feder mit Rahmen]]
Eine Feder mit Rahmen

Da durch große Bilder die Seiten dann sehr lange zum Laden brauchen, solltest du aus Rücksicht auf die Modembenutzer dies nur in Ausnahmefällen so handhaben, zum Beispiel wenn das Originalbild sehr klein ist. Benutze sonst besser verkleinerte Vorschauansichten (siehe Miniatur), die der Leser – wenn es ihn interessiert – dann mit einem Klick auf die Lupe vergrößern und genauer betrachten kann.

Vorschaubilder

Text der Bildbeschreibung
Text der Bildbeschreibung
Text der Bildbeschreibung

Das MediaWiki kann automatisch Vorschaubilder (englisch: „thumbnails“; auch „Miniaturbilder“ genannt) erzeugen. Dazu ist der Zusatz miniatur oder thumb zwischen Dateiname und Beschreibungstext einzufügen (Beispiel: [[Datei:Feather.svg|miniatur|Text der Bildbeschreibung]]).

Für Bilder ohne Rahmen fügt man anstelle von miniatur den Zusatz rahmenlos oder frameless ein. Dabei ist zu beachten dass diese jedoch standardmäßig links ausgerichtet sind, so dass für das gleiche Verhalten zu miniatur ein rechts (oder right) notwendig ist (Beispiel: [[Datei:Feather.svg|gerahmt|rechts|Text der Bildbeschreibung]]).

Das erzeugte Vorschaubild wird rechtsbündig ausgerichtet und vom Artikeltext umflossen. Der Alternativtext wird unter dem Bild als Beschreibung angezeigt. Über die Lupe springt man zur großen Version des Bildes auf seiner Beschreibungsseite.

Angemeldete Benutzer können die Bildgröße der Vorschaubilder in ihren Benutzereinstellungen festlegen; für nichtangemeldete Leser erscheinen diese Bilder mit einer Bildbreite von 180 Pixeln.

Allgemein sollte diese Art der Bilddarstellung in Artikeln verwendet werden.

Bildunterschriften unterstützen alle Möglichkeiten der Textgestaltung.

Vom Originalbild abweichende Vorschaubilder sind mit der derzeitigen Software nicht mehr möglich.[1]

Von der Bildbeschreibungsseite abweichendes Linkziel

Hin und wieder kann es praktisch sein, dass man bei einem Klick auf das Bild nicht zu der Bildbeschreibungsseite, sondern zu einer anderen Seite gelangt. Man kennt ja zum Beispiel diesen Baustein: .

Hierfür gibt es den Parameter verweis bzw. link. Hinter verweis= wird der Zielartikel bzw. Abschnitt angegeben (ohne [[ ]]). Wenn hinter dem Gleichheitszeichen nichts steht (leer), ist das Bild kein Link.

Achtung: Nur bei gemeinfreien Bildern (vom Autor als gemeinfrei angegeben oder Bild ohne Schöpfungshöhe) darf verweis angegeben werden!

Eingabe Ergebnis
In den [[Datei:Gnome-fs-trash-empty.svg|30px|verweis=Abfalleimer|Müll]] damit!
In den Müll damit!
[[Datei:Gnome-fs-trash-empty.svg|links|verweis=Abfalleimer|Müll]] Viele Verwendungen von „imagemap“ gehören in den Müll! Imagemaps ermöglichen anklickbare Bildbereiche. Wenn das ganze Bild klickbar sein soll, reicht meist „datei“ mit Verweis.
Müll
Müll
Viele Verwendungen von „imagemap“ gehören in den Müll! Imagemaps ermöglichen anklickbare Bildbereiche. Wenn das ganze Bild klickbar sein soll, reicht meist „datei“ mit Verweis.


Bei Miniaturbildern funktioniert verweis nicht; hier muss auf ein Konstrukt mit imagemap zurückgegriffen werden, wie das folgende Beispiel zeigt:

<imagemap>
Datei:Gnome-fs-trash-empty.svg|miniatur|noch ist er leer …
default [[Abfalleimer]]
</imagemap>
noch ist er leer …

Der Vergrößernknopf verweist dann auf das derzeit angezeigte Bild und mit einem Klick auf das Bild gelangt man zum abweichenden Linkziel.

Bilder skalieren

Grundsätzlich sollten starre Bildgrößen nur in Ausnahmefällen verwendet werden, da dies die individuellen Anzeigeeinstellungen für Vorschaubilder der Benutzer ignoriert. Wann immer möglich, lass die Benutzer selbst wählen, in welcher Größe sie Vorschaubilder sehen wollen.

Feste Skalierung

Beschreibung

Mit [[Datei:Feather.svg|miniatur|100px|Beschreibung]] wird die Breite eines generierten Vorschaubildes auf 100 Pixel festgelegt (Standardgröße, keine Definition: 180 Pixel oder der Vorgabewert des Benutzers).

Mit [[Datei:Feather.svg|miniatur|x100px|Beschreibung]] wird die Höhe des Miniaturbildes festgelegt. Die zugehörige Breite bzw. Höhe wird aus dem Seitenverhältnis automatisch berechnet.

Wenn man mit [[Datei:Feather.svg|miniatur|100x100px|Beschreibung]] sowohl die Maximalhöhe wie auch -breite angibt, wird der im Verhältnis kleinere Wert genommen. In diesem Beispiel würde das Bild weder höher noch breiter als 100 Pixel werden.

Außerhalb von Infoboxen sollten keine festen Bildbreiten verwendet werden. Für den Fließtext im Artikelnamensraum gibt es Vorschaubilder in Verbindung mit der automatischen Skalierung. Um ein Bild/eine Grafik in besonderen Fällen dennoch größer oder kleiner darzustellen, kann der „upright“-Parameter verwendet werden. Damit erfolgt eine prozentuale Skalierung, die sich an den Benutzereinstellungen orientiert. Für die Verwendung siehe das folgende Kapitel.

Hoch- und querformatige Bilder kombinieren – automatische Skalierung

Ohne „px“-, aber mit „hochkant“=0.5-Angabe
Ohne „px“-, aber mit „hochkant“-Angabe
Skalierbare Vergrößerung mit 180 % der Standardbreite bei einem sehr breitformatigen Foto (Panorama)

Werden hoch- und querformatige Bilder untereinander gesetzt, ohne dass eine Breite vorgegeben wird, wirken die hochformatigen Vorschaubilder meist übermäßig groß. Es empfiehlt sich in solchen Fällen, dem hochformatigen Bild den Parameter hochkant bzw. upright mitzugeben. Damit wird es standardmäßig um den Faktor 0,75 schmaler als das querformatige Bild dargestellt, was in der Regel zu einer schöneren Aufteilung führt. Der große Vorteil liegt in der automatischen Skalierung, die für anonyme Benutzer genau so funktioniert wie für angemeldete Benutzer, die sich in ihren persönlichen Einstellungen eine andere Bildbreite vorgegeben haben. Die Größenverhältnisse untereinander bleiben immer gewahrt.

[[Datei:Bildname.jpg|miniatur|hochkant|Ohne „px“-, aber mit „hochkant“-Angabe]]

Dem Parameter hochkant kann auch ein Faktor mitgegeben werden, falls es sich um sehr hohe Bilder handelt, bei denen eine Skalierung auf 0,75 noch nicht reicht:

[[Datei:Bildname.jpg|miniatur|hochkant=0.5|Ohne „px“-, aber mit „hochkant“=0.5-Angabe]]

Auf diese Weise können auch sehr breite Bilder, z. B. Panoramen, skaliert werden. Mit einem „hochkant“-Wert > 1 werden sie entsprechend breiter als das Standard-Vorschaubild dargestellt. Die Proportionen bleiben dadurch in jeder Darstellung erhalten. Zu beachten ist, dass der Faktor bei Dezimalbrüchen mit Punkt statt mit Komma angegeben werden muss (Beispiel: 1.8 statt 1,8).

[[Datei:Panorama.jpg|miniatur|hochkant=1.8|Skalierbare Vergrößerung mit 180 % der Standardbreite bei einem sehr breitformatigen Foto (Panorama)]]

Die Breite der so berechneten Vorschaubilder wird immer auf den nächsthöheren 10er-Wert aufgerundet.

Zu beachten: hochkant kann nicht dafür eingesetzt werden, um sehr kleine Vorlagen, wie zum Beispiel SVGs mit zu geringer Basisgröße zu vergrößern, das geht derzeit nur mit fester Größenangabe wie im Abschnitt Feste Skalierung beschrieben.

Ausrichten im Text

Die Ausrichtungs-Optionen links, rechts, zentriert und ohne (bzw. left, right, center und none) richten Bilder im Text nach links bzw. rechts aus. Dabei ist jedoch zu beachten, dass die Darstellung je nach Browser sehr unterschiedlich sein kann. Um Probleme bei der Darstellung zu vermeiden, empfiehlt es sich, alle Bilder als Vorschaubilder auf der rechten Seite, bei längeren Absätzen auch absatzweise unter der Absatzüberschrift einzufügen.

Eingabe Ergebnis
[[Datei:Smile.png|links|Ein Smiley]] Ein '''Smiley''' ist ein vor allem im Chat beliebtes Emoticon.
Ein Smiley
Ein Smiley
Ein Smiley ist ein vor allem im Chat beliebtes Emoticon.
[[Datei:Smile.png|rechts|Ein Smiley]] Ein '''Smiley''' ist ein vor allem im Chat beliebtes Emoticon.
Ein Smiley
Ein Smiley
Ein Smiley ist ein vor allem im Chat beliebtes Emoticon.
[[Datei:Pilzkorb.jpg|miniatur|zentriert|100px|Ein Korb voller Speisepilze]]
Ein Korb voller Speisepilze
center zentriert ein Bild innerhalb einer Tabellenzelle.

Der Parameter ohne schaltet jegliches links oder rechts umfließen des Textes ab und stellt das Bild im Text ("inline") linksbündig dar. Ein Darstellen im Textfluss ist nur ohne Ausrichtung und ohne Rahmen, aber mit Größenangabe möglich. Eine Inline-Darstellung mit Verlinkung ist unter Bilder im Fließtext („inline“) beschrieben.

Eingabe Ergebnis
Ein '''Smiley''' [[Datei:Smile.png|links|Ein Smiley]] ist ein vor allem im Chat beliebtes Emoticon. Ein Smiley
Ein Smiley
Ein Smiley
ist ein vor allem im Chat beliebtes Emoticon.
Ein '''Smiley''' [[Datei:Smile.png|ohne|Ein Smiley]] ist ein vor allem im Chat beliebtes Emoticon. Ein Smiley
Ein Smiley
Ein Smiley
ist ein vor allem im Chat beliebtes Emoticon.
Ein '''Smiley''' [[Datei:Smile.png|gerahmt|[[Smiley]]]] ist ein vor allem im Chat beliebtes Emoticon. Ein Smiley
Smiley
ist ein vor allem im Chat beliebtes Emoticon.
Ein '''Smiley''' [[Datei:Smile.png|15px|Ein Smiley]] ist ein vor allem im Chat beliebtes Emoticon. Ein Smiley Ein Smiley ist ein vor allem im Chat beliebtes Emoticon.

Die meisten Optionen lassen sich beliebig, jeweils durch senkrechte Striche getrennt, miteinander kombinieren, unbekannte Optionen ignoriert die Software.

Vertikale Ausrichtung

Bilder können auch vertikal zu einem Text ausgerichtet werden. Für Möglichkeiten und Beispiele siehe Hilfe:Bilder/vertikale Ausrichtung.

Das Bild nicht umfließen

Wenn man ein oder mehrere Bild(er) am Rand angeordnet hat, kann man mit Hilfe der Vorlage {{subst:Absatz}} dafür sorgen, dass der folgende Text (z. B. ein neues Kapitel) unterhalb der Linie der Bildränder weitergeht. Mit {{subst:Absatz-L}} geht der folgende Text links unterhalb des Bildrands weiter, auf der rechten Seite kann aber weiterhin eine höhere Tabelle oder ein Bild neben dem Text stehen.

Galerie

Die Galerie eignet sich, um mehrere Bilder tabellarisch anzuordnen. In der Wikipedia ist das Einfügen von Galerien mit mehr als vier Bildern aber nur in Ausnahmefällen sinnvoll. Im Allgemeinen sollten Galerien in Commons angelegt und mit dem Link {{Commons|Artikelname}} in den Wikipedia-Artikel eingebunden werden.

Standard

Standardmäßig werden vier Bilder pro Zeile angeordnet.

<gallery>
  Datei:Rotkehlchen_gr.jpg|Rotkehlchen
  Datei:Gaense2004.jpg|Gänse
  Datei:Waran.jpg|Komodowaran
  Datei:Cat outside.jpg|Hauskatze
</gallery>

Bilder pro Zeile

Mit dem Schlüsselwort perrow="..." kann angegeben werden, wie viele Bilder pro Zeile gezeigt werden sollen:

<gallery perrow="2">
  Datei:Rotkehlchen_gr.jpg|[[Rotkehlchen]]
  Datei:Gaense2004.jpg|[[Gänse]]
  Datei:Waran.jpg|[[Komodowaran]]
  Datei:Cat outside.jpg|[[Hauskatze]]
</gallery>

Überschrift

Mit dem optionalen Schlüsselwort caption lässt sich eine Überschrift einfügen: <gallery caption="Hochhäuser">

Skalierung in Galerien

Mit dem Schlüsselwort widths="..." wird die Breite, mit heights="..." die Höhe eines Bildes festgelegt. Das jeweils breiteste bzw. höchste Bild wird für die Galerie als Maßstab genommen und die kleineren Bilder entsprechend angepasst. Kombinationen von heights und widths sind möglich.

<gallery widths="120" heights="300" perrow="5" caption="Hochhäuser">
  Datei:Eureka Tower 0944a.jpg|Eureka Tower, Melbourne
  Datei:Shun Hing Square.jpg|Shun Hing Square, Shenzhen
  Datei:JinMaoBuilding.jpg|Jin Mao Building, Pudong, Shanghai
  Datei:Europa Center.jpg|Europa Center, Vilnius
 </gallery>

Galerie auf Commons

Hinweis: Wer eine Galerie auf Commons anlegt, mussFile:…“ („Image:…“ geht auch, ist aber veraltet) schreiben, in der deutschsprachigen Wikipedia sollte der Befehl „Datei:…“ („Bild:…“ geht auch, ist aber veraltet) verwendet werden.

Imagemaps

Mit der MediaWiki-Erweiterung „ImageMap“ können klickbare Bilder erstellt werden. Für viele einfache Fälle reicht die Angabe eines Verweises in der Datei als Linkziel für das Bild aber völlig aus.

<imagemap>
Datei:Continents vide couleurs.png|300px|Kontinente
# Koordinaten nur ganz grob ermittelt für dieses Beispiel
poly   156 126   274 288   362 340   432 290   676  34   326  26   210  66   [[Nordamerika]]
poly   400 318   366 334   366 388   460 632   490 630   556 400   418 306   [[Südamerika]]
poly   642  90   666 214   798 202   846 160   890 194   922 136   900  46   740  28   [[Europa]]
poly   680 218   620 300   644 358   798 550   916 472   916 322   876 316   838 230   744 210   680 214   [[Afrika]]
poly   916  32   888 148   888 186   812 186   876 312  1030 352  1138 416  1240 414  1298  82   954  22   [[Asien]]
# Australien und Antarktis grob vereinfacht als Rechteck:
rect  1144 370  1407 581   [[Australien]]
rect   257 658  1218 752   [[Antarktis]]
default [[Ozean]]
desc bottom-right
</imagemap>
KontinenteNordamerikaSüdamerikaEuropaAfrikaAsienAustralienAntarktis
Kontinente

Parameter: Die Koordinaten (Einheit: Pixel) beziehen sich immer auf das Bild in Originalgröße und werden für die verkleinerte Darstellung automatisch heruntergerechnet. Der Nullpunkt ist oben links.

poly
Vieleck. Die Parameter geben die Eckpunkte des Vielecks an, gefolgt von einem Wikilink zum Ziel.
Wird poly verwendet, müssen diese Zeilen vor rect, circle kommen.
rect
Rechteck. Die Parameter beschreiben die Ecken links-oben und rechts-unten, gefolgt von einem Wikilink zum Ziel.
circle
Kreis. Die ersten Parameter geben den Mittelpunkt an, der dritte den Radius. Danach folgt wieder ein Wikilink zum Ziel.
default
Optionaler Parameter. Er bestimmt das Standard-Linkziel für die restlichen Flächen.
desc
Gibt die Ecke vor, in der der Link zur Bildbeschreibungsseite (ein „i“ im blauen Kreis) erscheinen soll. Mögliche Parameter sind top-right, bottom-right, bottom-left, top-left, none. Der Standard ist bottom-right. Die Option desc none ist nur erlaubt, wenn das Bild gemeinfrei (PD) ist, ansonsten muss mit desc „Ecke nach Wahl“ die Möglichkeit gegeben sein, zur Bildbeschreibungsseite mit den Lizenzinformationen zu kommen.
Neben den englischen Bezeichnungen sind auch unten rechts, unten links, oben rechts, oben links, keine erlaubt.

Um die benötigten Parameter zu bestimmen, kann das Tool von Dapete genutzt werden.

Snellman
Snellman

Für den einfachsten Fall, dass das gesamte Bild zu genau einem Ziel führen soll, reicht folgender Minimalcode:

<imagemap>
Datei:JV Snellman.jpg|100px|rechts|Snellman
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>

Man sollte auch bei Imagemap-Bildern immer Alternativtexte angeben, da die Verknüpfungen sonst für Blinde und Nutzer von Textbrowsern nicht erreichbar oder nicht nachvollziehbar sein könnten.

Imagemaps in Vorlagen

Innerhalb von Vorlagen kann anstelle von <imagemap>…</imagemap> auch {{#tag:imagemap|…}} geschrieben werden, wobei senkrechte Striche durch {{!}} zu ersetzen sind. Damit wird die Auswertung von Parametern innerhalb der Imagemap ermöglicht.

Bilder im Fließtext („inline“)

Es ist in der deutschsprachigen Wikipedia mittels der Imagemap-Erweiterung auch möglich, verlinkte Bilder direkt im Fließtext zu verwenden, was man jedoch bei normalen Artikeln vermeiden sollte. Außerdem dürfen dabei nur gemeinfreie Bilder verwendet werden, da ja kein Absprung mehr zum Bild erfolgt und damit die Lizenzinformationen nicht angezeigt werden (was bei den CC-Lizenzen aber zwingend vorgeschrieben ist).

Angewendet wird mittels class „imagemap-inline“ :

Eingabe Ausgabe
<div class="imagemap-inline">So ist es <imagemap>
Datei:Disambig-dark.svg|22px
default [[Teutonia-Zirkel]]
desc none
</imagemap> zum Beispiel möglich, <imagemap>
Datei:Stefan-Schwartz-Goldmünze.gif|22px
default [[Stefan Schwarz Goldmünze]]
desc none
</imagemap> einige Bilder im Text zu verwenden.</div>
So ist es
zum Beispiel möglich,
einige Bilder im Text zu verwenden.

Wenn man nur ein einzelnes Bild im Fließtext so verlinken will, sollte man statt <div class="imagemap-inline"> den Befehl <div class="imagemap-inline" style="display:inline"> verwenden.

Abgesehen davon ist die Anwendung von Imagemap dieselbe wie darüber beschrieben.

Panoramabilder

Panoramabilder einzubinden ist immer mit Problemen verbunden; wichtig dabei ist, dass wir nicht wissen, wie groß das Browser-Fenster des Lesers ist: Also sollte das Bild nie größer werden als die Breite der Druckversion (ca. 780px).

Im Moment können dafür die Vorlagen {{Panorama}} (früher: {{Großes Bild}}) und {{Große Imagemap}} verwendet werden:

{{Panorama|Panorama Schwerin Wasserturm Neumuehle.jpg|2000|Panoramabild Schwerins}}

und mit verlinktem Gittermast im Vordergrund:

{{Große Imagemap|<imagemap>Datei:Panorama Schwerin Wasserturm Neumuehle.jpg|2000px
rect 1992 0 2124 852 [[Gittermast]]
desc bottom-left</imagemap>|Panoramabild Schwerins}}
Gittermast
Panoramabild Schwerins

Diese Vorlagen sollen wegen der fehlenden Barrierefreiheit nur verwendet werden, wenn das Seitenverhältnis des Bildes über 4:1 ist. Ansonsten reicht ein

[[Datei:Panorama Schwerin Wasserturm Neumuehle.jpg|zentriert|miniatur|aufrecht=4.0|Panoramabild Schwerins]]

Rahmen

Vor allem einfache Grafiken, Flaggen usw. die einen weißen Untergrund haben und nicht mit miniatur dargestellt werden sollen, benötigen einen Rahmen. Dieser kann mit dem Parameter rand bzw. border erzeugt werden:

[[Datei:Flag of the Vatican City.svg|rand|rechts|100px]]

Rahmenloses Bild mit Bildunterschrift

Bei Bildern mit weißem Hintergrund kann man den Kasten eliminieren:

Bildunterschrift
{| class="float-right"
| [[Datei:Colorful bottle.jpg|100px]]
|-
| Bildunterschrift
|}

Bei Bildern mit transparentem Hintergrund kann auch der weiße Standardhintergrund eliminiert werden:

Bildunterschrift
{| class="float-right" style="background-color:transparent;"
| [[Datei:Smile.svg|100px]]
|-
| Bildunterschrift
|}

Durch einen Klick auf ein hochgeladenes Bild erscheint eine Seite mit der Beschreibung und einer meist höher aufgelösten Version dieses Bildes. Wenn das Bild im Text nicht angezeigt werden soll, kann auf diese Seite verwiesen werden, indem man im Link vor das Wort „Datei“ einen Doppelpunkt setzt: Aus [[:Datei:Rotkehlchen_gr.jpg|Bildbeschreibung]] wird Bildbeschreibung.

Nach dem Hochladen einer neuen Bildversion

Wenn man Bilder überarbeitet und danach unter dem bisherigen Namen wieder hochlädt, gibt es Besonderheiten zu beachten, die teils die Erfolgskontrolle, teils die Wiki-Software betreffen:

  • Manche Webbrowser zeigen nach dem Hochladen einer neuen Version immer noch das alte Bild an. In diesem Fall hilft es meist, die fragliche Seite mit der Funktion des Webbrowsers neu zu laden (Refresh oder Reload). Es kann aber auch nötig sein, gezielt den Browsercache zu leeren.
  • Manchmal wird das neue Bild im Seitenverhältnis des alten Bildes angezeigt. Es erscheint dann verzerrt. In diesem Fall braucht nichts dagegen unternommen zu werden, denn die betroffenen Seiten werden nach einiger Zeit automatisch neu erzeugt, und die Verzerrungen verschwinden dann von selbst. Will man dem nachhelfen, hilft eine „leere Bearbeitung“ (das heißt, man klickt auf „Seite bearbeiten“ und speichert die Seite ohne Änderung sofort wieder) oder ein sogenanntes „Purge“.

Quelle

  1. diff=39198990&oldid=39198441 (21.11.2007) bzw. diff=next&oldid=51672691 (16.10.2008) dieser Seite