Hilfe:Bilder: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
Diese Seite erklärt die '''image''' Syntax beim Bearbeiten des Wikis. | Diese Seite erklärt die '''image''' Syntax beim Bearbeiten des Wikis. | ||
Normalerweise musst du oder ein anderer Nutzer [[Special:MyLanguage/Help:Managing files|ein Bild hochladen]] bevor es auf der Seite benutzt werden kann. | Normalerweise musst du oder ein anderer Nutzer [[Special:MyLanguage/Help:Managing files|ein Bild hochladen]] bevor es auf der Seite benutzt werden kann. | ||
Zeile 23: | Zeile 16: | ||
Andere von Wikimedia verwendete Formate, die üblicherweise anderswo aktiviert sind (diese bedürfen möglicherweise zusätzliche Konfiguration, da sie mitunter nicht standardmäßig aktiviert sind): | Andere von Wikimedia verwendete Formate, die üblicherweise anderswo aktiviert sind (diese bedürfen möglicherweise zusätzliche Konfiguration, da sie mitunter nicht standardmäßig aktiviert sind): | ||
* <code>.svg</code> - Skalierbare Grafik im "Scalable Vector Graphics"-Format (Spezifiziert durch das "W3-Konsortium") | * <code>.svg</code> - Skalierbare Grafik im "Scalable Vector Graphics"-Format (Spezifiziert durch das "W3-Konsortium"). | ||
* <code>.tiff</code> - Abkürzung für tagged image format. Häufig verwendet für Hochauflösende Archivbilder | * <code>.tiff</code> - Abkürzung für tagged image format. Häufig verwendet für Hochauflösende Archivbilder. | ||
* <code>.ogg</code>, <code>.oga</code>, <code>.ogv</code> - Ogg-Multimedia-Dateien (Audio oder Video). Kein Bildformat, wird aber ebenso behandelt. | * <code>.ogg</code>, <code>.oga</code>, <code>.ogv</code> - Ogg-Multimedia-Dateien (Audio oder Video). Kein Bildformat, wird aber ebenso behandelt. | ||
* <code>.pdf</code> - mehrseitige Dokumente im ''Portablen Dokumenten Format'' (ursprünglich von ''Adobe'' spezifiziert). | * <code>.pdf</code> - mehrseitige Dokumente im ''Portablen Dokumenten Format'' (ursprünglich von ''Adobe'' spezifiziert). | ||
* <code>.djvu</code> - mehrseitige Bitmap Dokumente im ''DejaVu''-Format (meist Buchscans). | * <code>.djvu</code> - mehrseitige Bitmap Dokumente im ''DejaVu''-Format (meist Buchscans). | ||
*: Nur eine Seite einer <code>.pdf</code> oder <code>.djvu</code> Datei wird auf einmal angezeigt. | *: Nur eine Seite einer <code>.pdf</code> oder <code>.djvu</code> Datei wird auf einmal angezeigt. | ||
Zeile 33: | Zeile 26: | ||
<span id="Rendering_a_single_image"></span> | <span id="Rendering_a_single_image"></span> | ||
== Anzeigen eines einzelnen Bildes == | == Anzeigen eines einzelnen Bildes == | ||
Zeile 60: | Zeile 54: | ||
* ''[[#Altering the default link target|Link]] option'': Eine von | * ''[[#Altering the default link target|Link]] option'': Eine von | ||
** '''link='''''{target}'' — Erlaubt das Ändern des erzeugten Linkziels (zu einem zufälligen Seitentitel oder URL), aktivierbar auf der angezeigten Bildfläche ; z.B. <code><nowiki>[[File:Example.jpg|20px|link=http://www.wikipedia.org]]</nowiki></code> wird dargestellt als [[File:Example.jpg|20px|link=http://www.wikipedia.org]] (externer Link), oder <code><nowiki>[[File:Example.jpg|20px|link=MediaWiki]]</nowiki></code> als [[File:Example.jpg|20px|link=MediaWiki]] (interner Link). | ** '''link='''''{target}'' — Erlaubt das Ändern des erzeugten Linkziels (zu einem zufälligen Seitentitel oder URL), aktivierbar auf der angezeigten Bildfläche ; z.B. <code><nowiki>[[File:Example.jpg|20px|link=http://www.wikipedia.org]]</nowiki></code> wird dargestellt als [[File:Example.jpg|20px|link=http://www.wikipedia.org]] (externer Link), oder <code><nowiki>[[File:Example.jpg|20px|link=MediaWiki]]</nowiki></code> als [[File:Example.jpg|20px|link=MediaWiki]] (interner Link). | ||
** '''link=''' (mit einem Leerwert) — | ** '''link=''' (mit einem Leerwert) — Zeigt ein Bild ohne aktivierbaren Link; z.B. <code><nowiki>[[</nowiki>File:Example.jpg|20px|link=]]</code> wird dargestellt als [[File:Example.jpg|20px|link=]]. | ||
*: Wenn zwischen <code>link</code> und dem Gleichheitszeichen ein Leerzeichen steht, wird die Link-Anweisung als Beschriftung verwendet. | *: Wenn zwischen <code>link</code> und dem Gleichheitszeichen ein Leerzeichen steht, wird die Link-Anweisung als Beschriftung verwendet. | ||
*:Das Einfügen einiger HTML-Zeichen-Äquivalente, wie <code>%22</code> für <code>"</code>, kann dazu führen, dass die Link-Anweisung als Bildunterschrift behandelt wird | *:Das Einfügen einiger HTML-Zeichen-Äquivalente, wie <code>%22</code> für <code>"</code>, kann dazu führen, dass die Link-Anweisung als Bildunterschrift behandelt wird. | ||
* Andere spezifische Optionen: | * Andere spezifische Optionen: | ||
** '''alt='''''{alternativer Text}'' — | ** '''alt='''''{alternativer Text}'' — spezifiziert alternativen Text (bezogen auf das HTML Attribut <code>alt="..."</code> des generierten {{tag|img|single}} Elements) eines Bilds, der angezeigt wird, wenn entweder das gewünschte Bild nicht heruntergeladen und angezeigt werden kann oder das anzeigende System diesen Text verwenden '''muss''' (z. B. wenn ein Braille-Leser eingesetzt wird oder der Nutzer im Browser entsprechendes einstellt). | ||
*: Wenn zwischen <code>alt</code> und dem Gleichheitszeichen ein Leerzeichen steht, wird die alt-Anweisung als Beschriftung verwendet. | *: Wenn zwischen <code>alt</code> und dem Gleichheitszeichen ein Leerzeichen steht, wird die alt-Anweisung als Beschriftung verwendet. | ||
** '''page='''''{Nummer}'' — zeigt die angegebene Seitennummer (zur Zeit nur verwendbar, wenn eine *.djvu- oder eine *.pdf-Datei angezeigt wird). | ** '''page='''''{Nummer}'' — zeigt die angegebene Seitennummer (zur Zeit nur verwendbar, wenn eine *.djvu- oder eine *.pdf-Datei angezeigt wird). | ||
** '''class='''''{HTML Klasse}'' — (MediaWiki 1.20+) Definiert die Klassen (spezifiziert das HTML-Attribut <code>class="..."</code> des generierten {{tag|img|single}} Elements). | ** '''class='''''{HTML Klasse}'' — (MediaWiki 1.20+) Definiert die Klassen (spezifiziert das HTML-Attribut <code>class="..."</code> des generierten {{tag|img|single}} Elements). | ||
** '''lang='''''{language code}'' – | ** <s>'''lang='''''{language code}'' – für SVG-Dateien mit [http://www.w3.org/TR/SVG/struct.html#SwitchElement <switch>] Anweisungen, die für ein Attribut ''systemLanguage'' variieren, wählen aus, in welcher Sprache die Datei dargestellt werden soll. Die Standardeinstellung ist die Seitensprache (bei den meisten Projekten wird standardmäßig die Standardsprache des Projekts verwendet).</s> | ||
Wenn ein Parameter mit keiner der anderen Möglichkeiten übereinstimmt, wird davon ausgegangen, dass er der Beschriftungstext ist. | Wenn ein Parameter mit keiner der anderen Möglichkeiten übereinstimmt, wird davon ausgegangen, dass er der Beschriftungstext ist. | ||
Zeile 80: | Zeile 72: | ||
Wenn "alt" nicht angegeben ist und eine Beschriftung bereitgestellt wird, wird der alternative Text automatisch aus der Beschriftung erstellt, ohne Formatierung, es sei denn, die Beschriftung ist bereits für "thumb" oder "frame" Screenreader lesbar. | Wenn "alt" nicht angegeben ist und eine Beschriftung bereitgestellt wird, wird der alternative Text automatisch aus der Beschriftung erstellt, ohne Formatierung, es sei denn, die Beschriftung ist bereits für "thumb" oder "frame" Screenreader lesbar. | ||
{{note|1=Das aktuelle Standardverhalten ist, die Multimediadatei in ihrer vollen Größe anzuzeigen. Dies kann zu Problemen mit der Darstellung führen, wenn die Dateibreite größer als die Seite ist. Siehe auch Task [[ | {{note|1=Das aktuelle Standardverhalten ist, die Multimediadatei in ihrer vollen Größe anzuzeigen. Dies kann zu Problemen mit der Darstellung führen, wenn die Dateibreite größer als die Seite ist. Siehe auch Task [[phabricator:T113101]] für weitere Details.}} | ||
=== Format === | === Format === | ||
Zeile 91: | Zeile 83: | ||
!Geschrieben | !Geschrieben | ||
!Angezeigt | !Angezeigt | ||
{{ | {{ Hilfe:Bilder/frame|frame=|ex=Kein Format angegeben|float=no|inline=yes|render caption=no}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=border|ex='''border''' resultiert in einem sehr dünnen grauen Rand.|float=no|inline=yes|render caption=no}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=frameless|ex='''frameless''' übernimmt (wie thumbnail) die User-Vorgabe für Bildbreite, jedoch ohne Rahmen und ohne rechtes Umfließen des Textes|float=no|inline=yes|render caption=no}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=frameless|2=border|ex='''frameless''' and '''border''' | ||
'''Rahmenlos''' und '''Begrenzung'''|float=no|inline=yes|render caption=no}} | '''Rahmenlos''' und '''Begrenzung'''|float=no|inline=yes|render caption=no}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=frame|ex='''frame'''|float=yes|inline=no|render caption=yes}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=thumb|ex='''thumb''' oder '''thumbnail'''|float=yes|inline=no|render caption=yes}} | ||
|} | |} | ||
Zeile 107: | Zeile 99: | ||
<span id="Size_and_frame"></span> | <span id="Size_and_frame"></span> | ||
=== Größe und Rahmen === | === Größe und Rahmen === | ||
Zeile 120: | Zeile 113: | ||
|- | |- | ||
! Format !! Verkleinert !! Vergrößert | ! Format !! Verkleinert !! Vergrößert | ||
{{ | {{ Hilfe:Bilder/frame|frame=}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=border}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=frame}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=thumb}} | ||
{{ | {{ Hilfe:Bilder/frame|frame=frameless}} | ||
|} | |} | ||
<span id="Horizontal_alignment"></span> | <span id="Horizontal_alignment"></span> | ||
=== Horizontale Ausrichtung === | === Horizontale Ausrichtung === | ||
Zeile 137: | Zeile 131: | ||
!Eingabe | !Eingabe | ||
!Ergebnis | !Ergebnis | ||
{{ | {{ Hilfe:Bilder/frame|2=100px|frame=|ex='''Keine horizontale Ausrichtung angegeben''' oder Standardausrichtung|inline=yes|float=no}} | ||
{{ | {{ Hilfe:Bilder/frame|2=100px|frame=none|ex=horizontale Ausrichtung angeben als: '''none'''|inline=no|float=no}} | ||
{{ | {{ Hilfe:Bilder/frame|2=100px|frame=center|ex=horizontale Ausrichtung angeben als: '''center'''|inline=no|float=no}} | ||
{{ | {{ Hilfe:Bilder/frame|2=100px|frame=left|ex=horizontale Ausrichtung angeben als: '''left'''|inline=no|float=yes}} | ||
{{ | {{ Hilfe:Bilder/frame|2=100px|frame=right|ex=horizontale Ausrichtung angeben als: '''right'''|inline=no|float=yes}} | ||
|} | |} | ||
<span id="Vertical_alignment"></span> | <span id="Vertical_alignment"></span> | ||
=== Vertikale Ausrichtung === | === Vertikale Ausrichtung === | ||
Die vertikalen Ausrichtungsoptionen wirken sich nur aus, wenn das Bild als Inline-Element '''gerendert''' wird und '''nicht''' floatet. | Die vertikalen Ausrichtungsoptionen wirken sich nur aus, wenn das Bild als Inline-Element '''gerendert''' wird und '''nicht''' floatet. | ||
Zeile 205: | Zeile 200: | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''top:''' [[File: | '''top:''' [[File:MWExample.jpg|20px|top]] [[File:MWExample.jpg|40px|top]] [[File:MWExample.jpg|100px|top]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''text-top:''' [[File: | '''text-top:''' [[File:MWExample.jpg|20px|text-top]] [[File:MWExample.jpg|40px|text-top]] [[File:MWExample.jpg|100px|text-top]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
<sup>'''super:'''</sup> [[File: | <sup>'''super:'''</sup> [[File:MWExample.jpg|20px|super]] [[File:MWExample.jpg|40px|super]] [[File:MWExample.jpg|100px|super]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''baseline:''' [[File: | '''baseline:''' [[File:MWExample.jpg|20px|baseline]] [[File:MWExample.jpg|40px|baseline]] [[File:MWExample.jpg|100px|baseline]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
<sub>'''sub:'''</sub> [[File: | <sub>'''sub:'''</sub> [[File:MWExample.jpg|20px|sub]] [[File:MWExample.jpg|40px|sub]] [[File:MWExample.jpg|100px|sub]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''default:''' [[File: | '''default:''' [[File:MWExample.jpg|20px]] [[File:MWExample.jpg|40px]] [[File:MWExample.jpg|100px]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''middle:''' [[File: | '''middle:''' [[File:MWExample.jpg|20px|middle]] [[File:MWExample.jpg|40px|middle]] [[File:MWExample.jpg|100px|middle]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''text-bottom:''' [[File: | '''text-bottom:''' [[File:MWExample.jpg|20px|text-bottom]] [[File:MWExample.jpg|40px|text-bottom]] [[File:MWExample.jpg|100px|text-bottom]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> | ||
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> | ||
'''bottom:''' [[File: | '''bottom:''' [[File:MWExample.jpg|20px|bottom]] [[File:MWExample.jpg|40px|bottom]] [[File:MWExample.jpg|100px|bottom]] | ||
<del>text</del></u></span></p> | <del>text</del></u></span></p> | ||
Zeile 259: | Zeile 254: | ||
<span id="Stopping_the_text_flow"></span> | <span id="Stopping_the_text_flow"></span> | ||
=== Textfluss stoppen === | === Textfluss stoppen === | ||
Gelegentlich ist es wünschenswert, zu verhindern, dass Text (oder andere nicht floatende Inline-Bilder) um ein floatendes Bild herumfließen. | Gelegentlich ist es wünschenswert, zu verhindern, dass Text (oder andere nicht floatende Inline-Bilder) um ein floatendes Bild herumfließen. | ||
Zeile 278: | Zeile 274: | ||
!Du schreibst | !Du schreibst | ||
!Du erhältst | !Du erhältst | ||
{{ | {{ Hilfe:Bilder/frame|2=link=Main Page|ex=Interner Verweis (link)}} | ||
{{ | {{ Hilfe:Bilder/frame|2=link=https://skandinavien-wiki.net/wiki/Test|ex=Externer Link}} | ||
{{ | {{ Hilfe:Bilder/frame|2=link=|ex=kein Link (externe oder Dateiseite)}} | ||
|} | |} | ||
<span id="Rendering_a_gallery_of_images"></span> | |||
== Anzeigen einer Bildergalerie == | == Anzeigen einer Bildergalerie == | ||
Zeile 306: | Zeile 297: | ||
Bildunterschriften sind optional und können Wiki-Links oder andere Formatierungen enthalten. | Bildunterschriften sind optional und können Wiki-Links oder andere Formatierungen enthalten. | ||
{{note|1= | {{note|1=Die Wörter "center", "left" und "right", die als Beschriftungen verwendet werden, verursachen falsch-positive Linter-Fehler. Siehe {{phab|T266406}} für Details.See {{phab|T275074}} for details.}} | ||
Einige der Parameter, die die Ausgabe der Vorschaubilder steuern, können auch hier verwendet werden, insbesondere diejenigen, die die Datei ändern (im Gegensatz zu denen, die steuern, wo auf der Seite das Bild abgelegt wird). | Einige der Parameter, die die Ausgabe der Vorschaubilder steuern, können auch hier verwendet werden, insbesondere diejenigen, die die Datei ändern (im Gegensatz zu denen, die steuern, wo auf der Seite das Bild abgelegt wird). | ||
Bei mehrseitigen Medien wie pdfs kannst Du beispielsweise Code wie <code>page=4</code> verwenden. | Bei mehrseitigen Medien wie pdfs kannst Du beispielsweise Code wie <code>page=4</code> verwenden. | ||
Zeile 317: | Zeile 308: | ||
<syntaxhighlight lang="moin"> | <syntaxhighlight lang="moin"> | ||
<gallery> | <gallery> | ||
File: | File:MWExample.jpg|Item 1 | ||
File: | File:MWExample.jpg|a link to [[Help:Contents]] | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg|alt=An example image. It has flowers | ||
File: | File:MWExample.jpg|''italic caption'' | ||
File: | File:MWExample.jpg|Links to external website|link=https://example.com | ||
File: | File:MWExample.jpg|link=w:Main_Page|Internal link | ||
MWExample.jpg|on page "{{PAGENAME}}" | |||
File:Using Firefox.pdf|page=72 | File:Using Firefox.pdf|page=72 | ||
</gallery> | </gallery> | ||
Zeile 332: | Zeile 323: | ||
<gallery> | <gallery> | ||
File: | File:MWExample.jpg|Item 1 | ||
File: | File:MWExample.jpg|a link to [[Help:Contents]] | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg|alt=An example image. It has flowers | ||
File: | File:MWExample.jpg|''italic caption'' | ||
File: | File:MWExample.jpg|Links to external website|link=https://example.com | ||
File: | File:MWExample.jpg|link=w:Main_Page|Internal link | ||
MWExample.jpg|on page "{{PAGENAME}}" | |||
File:Using Firefox.pdf|page=72 | File:Using Firefox.pdf|page=72 | ||
</gallery> | </gallery> | ||
Zeile 345: | Zeile 336: | ||
<span id="mode_parameter"></span> | <span id="mode_parameter"></span> | ||
==== mode-Parameter ==== | ==== mode-Parameter ==== | ||
* <code>traditional</code> ist der Orginal-Galerietyp, der von MediaWiki verwendet wird. | * <code>traditional</code> ist der Orginal-Galerietyp, der von MediaWiki verwendet wird. | ||
* <code>nolines</code> ähnelt <code>traditional</code>, hat jedoch keine Begrenzungslinien. | * <code>nolines</code> ähnelt <code>traditional</code>, hat jedoch keine Begrenzungslinien. | ||
* <code>packed</code> bewirkt, dass Bilder dieselbe Höhe, aber unterschiedliche Breiten haben, wobei zwischen den Bildern nur wenig Platz gelassen wird. Die Zeilen in diesem | * <code>packed</code> bewirkt, dass Bilder dieselbe Höhe, aber unterschiedliche Breiten haben, wobei zwischen den Bildern nur wenig Platz gelassen wird. Die Zeilen in diesem responsive Modus ordnen sich nach der Breite des Bildschirms. | ||
* <code>packed-overlay</code> zeigt die dem Bild überlagerte Beschriftung in einem halbtransparenten weißen Feld. | * <code>packed-overlay</code> zeigt die dem Bild überlagerte Beschriftung in einem halbtransparenten weißen Feld. | ||
* <code>packed-hover</code> ähnelt <code>packed-overlay</code>, nur dass die Beschriftung und das Kästchen nur beim Mouse-over angezeigt werden. | * <code>packed-hover</code> ähnelt <code>packed-overlay</code>, nur dass die Beschriftung und das Kästchen nur beim Mouse-over angezeigt werden. | ||
Zeile 432: | Zeile 420: | ||
</gallery> | </gallery> | ||
<code id="slideshow-demo">mode="slideshow"</code> | <code id="slideshow-demo">mode="slideshow"</code> | ||
<gallery mode="slideshow"> | <gallery mode="slideshow"> | ||
Zeile 463: | Zeile 450: | ||
* <code>caption="{caption}"</code>: (Beschriftungstext zwischen Anführungszeichen für mehr als ein Wort) legt eine Beschriftung fest, die über der Galerie zentriert wird. In der Beschriftung darf nur einfacher Text verwendet werden. Formatierungen, Vorlagen und ähnliches funktionieren nicht. | * <code>caption="{caption}"</code>: (Beschriftungstext zwischen Anführungszeichen für mehr als ein Wort) legt eine Beschriftung fest, die über der Galerie zentriert wird. In der Beschriftung darf nur einfacher Text verwendet werden. Formatierungen, Vorlagen und ähnliches funktionieren nicht. | ||
* <code>widths={width}px</code>: Legt die (maximale) Breite der Bilder fest. Der | * <code>widths={width}px</code>: Legt die (maximale) Breite der Bilder fest. Der Standardwert ist 120px. ''Beachte den Plural: width'''s'''''. | ||
* <code>heights={heights}px</code>: Legt die (maximale) Höhe der Bilder fest. Der Standardwert ist 120px. | * <code>heights={heights}px</code>: Legt die (maximale) Höhe der Bilder fest. Der Standardwert ist 120px. | ||
* <code>perrow={integer}</code>: bestimmt die Anzahl der Bilder pro Reihe. 0 bedeutet, dass die Einstellung automatisch an die Bildschirmbreite angepasst wird. | * <code>perrow={integer}</code>: bestimmt die Anzahl der Bilder pro Reihe. 0 bedeutet, dass die Einstellung automatisch an die Bildschirmbreite angepasst wird. | ||
* <code>showfilename={anything}</code>: Zeigt die Dateinamen der Bilder in den einzelnen Bildunterschriften für jedes Bild an (1.17+). | * <code>showfilename={anything}</code>: Zeigt die Dateinamen der Bilder in den einzelnen Bildunterschriften für jedes Bild an (1.17+). | ||
* <code>mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}</code>: Siehe oben ( | * <code>mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}</code>: Siehe oben ("slideshow"). | ||
* <code>showthumbnails</code>: Zeigt im "Diashow" -Modus standardmäßig den Streifen mit den Miniaturbildern unter der Diashow | * <code>showthumbnails</code>: Zeigt im "Diashow" -Modus standardmäßig den Streifen mit den Miniaturbildern unter der Diashow | ||
{{note|1=Die Parameter widths und heights dienen eher als Vorschläge denn als strikte Werte für "packed" (und verwandte) Modi. Die "packed modes" passen die Breite der Bilder an, damit jede Zeile dieselbe Länge hat.}} | {{note|1=Die Parameter widths und heights dienen eher als Vorschläge denn als strikte Werte für "packed" (und verwandte) Modi. Die "packed modes" passen die Breite der Bilder an, damit jede Zeile dieselbe Länge hat.}} | ||
Zeile 478: | Zeile 465: | ||
<syntaxhighlight lang=html> | <syntaxhighlight lang=html> | ||
<gallery widths=300px heights=200px> | <gallery widths=300px heights=200px> | ||
File: | File:MWExample.jpg|Lorem ipsum | ||
File: | File:MWExample.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut | ||
</gallery> | </gallery> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Zeile 486: | Zeile 473: | ||
<gallery widths="300px" heights="200px"> | <gallery widths="300px" heights="200px"> | ||
File: | File:MWExample.jpg|Lorem ipsum | ||
File: | File:MWExample.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut | ||
</gallery> | </gallery> | ||
Zeile 496: | Zeile 483: | ||
<syntaxhighlight lang=html> | <syntaxhighlight lang=html> | ||
<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy"> | <gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy"> | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
</gallery> | </gallery> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Zeile 512: | Zeile 499: | ||
<gallery widths="60px" heights="60px" perrow="7" caption="sunflowers are groovy"> | <gallery widths="60px" heights="60px" perrow="7" caption="sunflowers are groovy"> | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
File: | File:MWExample.jpg | ||
</gallery> | </gallery> | ||
<span id="Row_of_images_that_will_wrap_to_browser_width"></span> | <span id="Row_of_images_that_will_wrap_to_browser_width"></span> | ||
== Reihe von Bildern, die auf die Browserbreite angepasst wird == | == Reihe von Bildern, die auf die Browserbreite angepasst wird == | ||
Eine Möglichkeit, die für eine Reihe von Bildern mit unterschiedlichen Breiten funktioniert, besteht darin, nicht "Vorschaubilder" oder "Seitenangabe links" oder "keine" zu verwenden. | Eine Möglichkeit, die für eine Reihe von Bildern mit unterschiedlichen Breiten funktioniert, besteht darin, nicht "Vorschaubilder" oder "Seitenangabe links" oder "keine" zu verwenden. | ||
Zeile 541: | Zeile 529: | ||
</pre> | </pre> | ||
[[File: | [[File:MWExample.jpg|220px]] | ||
[[File: | [[File:MWExample.jpg|100px]] | ||
[[File: | [[File:MWExample.jpg|150px]] | ||
[[File: | [[File:MWExample.jpg|250px]] | ||
[[File: | [[File:MWExample.jpg|200px]] | ||
[[File: | [[File:MWExample.jpg|50px]] | ||
[[File: | [[File:MWExample.jpg|220px]] | ||
[[File: | [[File:MWExample.jpg|175px]] | ||
'''Um Bilder unterschiedlicher Breite mit Beschriftungen zu versehen,''' ist es erforderlich, div HTML für eine ungeordnete Liste zu verwenden. Zusammen mit <code>style="display: inline-block;"</code>. Weitere Informationen und Anregungen findest Du unter: [http://www.sitepoint.com/give-floats-the-flick-in-css-layouts Geben Sie Floats den Flick in CSS-Layouts]. | '''Um Bilder unterschiedlicher Breite mit Beschriftungen zu versehen,''' ist es erforderlich, div HTML für eine ungeordnete Liste zu verwenden. Zusammen mit <code>style="display: inline-block;"</code>. Weitere Informationen und Anregungen findest Du unter: [http://www.sitepoint.com/give-floats-the-flick-in-css-layouts Geben Sie Floats den Flick in CSS-Layouts]. | ||
Zeile 566: | Zeile 554: | ||
<div><ul> | <div><ul> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|220px|Caption 1]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|100px|Caption 2]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|150px|Caption 3]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|250px|Caption 4]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|200px|Caption 5]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|50px|Caption 6]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|220px|Caption 7]] </li> | ||
<li style="display: inline-block;"> [[File: | <li style="display: inline-block;"> [[File:MWExample.jpg|thumb|none|175px|Caption 8]] </li> | ||
</ul></div> | </ul></div> | ||
Zeile 592: | Zeile 580: | ||
<div><ul> | <div><ul> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|220px|Caption 1]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|100px|Caption 2]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|150px|Caption 3]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|250px|Caption 4]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|200px|Caption 5]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|50px|Caption 6]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|220px|Caption 7]] </li> | ||
<li style="display: inline-block; vertical-align: top;"> [[File: | <li style="display: inline-block; vertical-align: top;"> [[File:MWExample.jpg|thumb|none|175px|Caption 8]] </li> | ||
</ul></div> | </ul></div> | ||
Zeile 612: | Zeile 600: | ||
<span id="Link_behavior"></span> | <span id="Link_behavior"></span> | ||
== Verhalten von Links == | == Verhalten von Links == | ||
Standardmäßig verlinkt ein Bild auf seine Dateibeschreibungsseite. | Standardmäßig verlinkt ein Bild auf seine Dateibeschreibungsseite. | ||
Die Option "link=" ändert dieses Verhalten, um eine Verknüpfung zu einer anderen Seite oder Website herzustellen oder das Verknüpfungsverhalten des Bildes zu deaktivieren. | Die Option "link=" ändert dieses Verhalten, um eine Verknüpfung zu einer anderen Seite oder Website herzustellen oder das Verknüpfungsverhalten des Bildes zu deaktivieren. Alternativ kannst Du einen Textlink zu einer Dateibeschreibungsseite oder zur Datei selbst erstellen. | ||
<span id="Display_image,_link_it_to_another_page_or_website"></span> | <span id="Display_image,_link_it_to_another_page_or_website"></span> | ||
Zeile 691: | Zeile 678: | ||
====Abrufen der vollständigen URL eines Bildes==== | ====Abrufen der vollständigen URL eines Bildes==== | ||
Um den vollständigen Pfad eines Bildes zu erhalten (ohne Weiterleitungen zu durchlaufen, wie oben gezeigt), können einige | Um den vollständigen Pfad eines Bildes zu erhalten (ohne Weiterleitungen zu durchlaufen, wie oben gezeigt), können einige [[Help:Magische Wörter|nsp=0}} verwendet werden. | ||
<nowiki>{{filepath:MediaWiki-2020-logo.svg}}</nowiki> | <nowiki>{{filepath:MediaWiki-2020-logo.svg}}</nowiki> | ||
Zeile 708: | Zeile 695: | ||
<span id="Requisites"></span> | <span id="Requisites"></span> | ||
== Dateien anderer Webseiten == | == Dateien anderer Webseiten == | ||
Du kannst mit derselben Syntax, die für das Verknüpfen mit einer externen Webseite verwendet wird, auf eine online verfügbare externe Datei verweisen. | Du kannst mit derselben Syntax, die für das Verknüpfen mit einer externen Webseite verwendet wird, auf eine online verfügbare externe Datei verweisen. | ||
Zeile 724: | Zeile 706: | ||
<pre>[http://url.for/some/image.png verlinke den Text hier]</pre> | <pre>[http://url.for/some/image.png verlinke den Text hier]</pre> | ||
<span id="See_also"></span> | |||
== Siehe auch == | == Siehe auch == | ||
*[[ | *[[wikipedia:Wikipedia:Erweiterter Bild-Syntax|Wikipedia:Erweiterter Bild-Syntax]] | ||
*[[ | *[[wikipedia:Kategorie:Wikipedia Bilder Hilfe|Kategorie:Wikipedia Bilder Hilfe]] | ||
*[[ | *[[wikipedia:Hilfe:Bilder|Hilfe:Bilder]] | ||
*[[ | *[[wikipedia:Hilfe:Galerie|Hilfe:Galerie]] | ||
*[[Phabricator:T113101]] - responsive Eigenschaften | |||
*[[ | |||
[[Kategorie:Hilfe|{{PAGENAME}}]] | [[Kategorie:Hilfe|{{PAGENAME}}]]{{IstIn|Übersicht}} |
Aktuelle Version vom 13. Februar 2023, 14:30 Uhr
Diese Seite erklärt die image Syntax beim Bearbeiten des Wikis. Normalerweise musst du oder ein anderer Nutzer ein Bild hochladen bevor es auf der Seite benutzt werden kann.
Auf einem MediaWiki Server gespeicherte Bilder werden normalerweise dargestellt mit dem Präfix File:
für den Datei-Namensraum als Ziel für einen MediaWiki Link. (Die alte Schreibweise Image:
wird noch immer als Synonym unterstützt).
Das alternative Namensraum-Präfix Media:
kann ebenfalls genutzt werden, um den originalen Dateiinhalt zu bezeichnen (um ihn separat auf jeder MediaWiki Seite anzuzeigen oder herunterzuladen).
Unterstützte Bildformate
Die folgenden Formate werden standardmäßig unterstützt.
.jpg
oder.jpeg
- Bitmap Bilder im Standard JPEG Format komprimiert (dieses verlustbehaftete Format ist am besten geeignet für Fotos)..png
- Bitmap Bilder im Portable Network Graphics Format (Spezifiziert vom W3 Consortium)..gif
- Bitmap Bilder im alten Graphics Interchange Format.
Andere von Wikimedia verwendete Formate, die üblicherweise anderswo aktiviert sind (diese bedürfen möglicherweise zusätzliche Konfiguration, da sie mitunter nicht standardmäßig aktiviert sind):
.svg
- Skalierbare Grafik im "Scalable Vector Graphics"-Format (Spezifiziert durch das "W3-Konsortium")..tiff
- Abkürzung für tagged image format. Häufig verwendet für Hochauflösende Archivbilder..ogg
,.oga
,.ogv
- Ogg-Multimedia-Dateien (Audio oder Video). Kein Bildformat, wird aber ebenso behandelt..pdf
- mehrseitige Dokumente im Portablen Dokumenten Format (ursprünglich von Adobe spezifiziert)..djvu
- mehrseitige Bitmap Dokumente im DejaVu-Format (meist Buchscans).- Nur eine Seite einer
.pdf
oder.djvu
Datei wird auf einmal angezeigt.
- Nur eine Seite einer
Andere Medientypen können unterstützt werden, aber nicht deren Darstellung in einer Zeile.
Anzeigen eines einzelnen Bildes
Syntax
Die vollständige Syntax für das Anzeigen eines Bildes ist:
[[File:filename.extension|options|caption]]
Option kann keine oder mehrere der Folgenden sein, getrennt durch den vertikalen Strich (|):
- Format Option: eine von border und/oder frameless, frame (oder framed), thumb (oder thumbnail). Note: border can be used in combination with frameless but will be ignored if used with one of the other options.
- Bestimmt wie das angezeigt Bild auf der Seite formatiert und eingebettet wird.
- Grösse anpassen (resizing) Option: eine von
- {width}px — ändert die Bildbreite auf das angegebene Maximum, ohne die Höhe festzusetzen. (Es werden nur ganzzahlige Pixelwerte unterstützt. Ein Leerzeichen zwischen dem Wert für die Breite und "px" ist zulässig.)
- x{height}px — ändert die Bildhöhe auf das angegebene Maximum, ohne die Breite festzusetzen. Es werden nur ganzzahlige Pixelwerte unterstützt. Ein Leerzeichen zwischen dem Wert für die Höhe und "px" ist zulässig.
- {width}x{height}px — ändert die Bildgrösse um innerhalb der Höhe und Breite zu liegen. Es werden nur ganzzahlige Pixelwerte unterstützt. Ein Leerzeichen zwischen dem Wert für die Breite und "px" ist zulässig.
- upright — ändert die Größe innerhalb sinnvoller Ausdehnungen, gemäß Benutzervorgaben (geeignet für Bilder mit größerer Höhe als Breite). Wenn Du
|upright=1.0|
einstellst, wird das Bild mit der Standardbildbreite des Benutzers angezeigt.|upright=2.0|
zeigt das Bild mit der doppelten Standardbreite des Benutzers an.
- Das Bild behält immer sein Seitenverhältnis bei.
- Bilder in nicht skalierbaren Medientypen können verkleinert, aber nicht vergrößert werden. Bitmap-Bilder können beispielsweise nicht vergrößert werden.
- Die Einstellung
upright
erfordert kein Gleichheitszeichen, d. h.|upright 2.0|
funktioniert genauso wie|upright=2.0|
. - Bei Verwendung ohne Wert oder Gleichheitszeichen (z. B.
|upright|
) wird standardmäßig|upright=0.75|
verwendet (obwohl|upright=|
mit|upright=1.0|
identisch ist). - Die maximale Standardgröße hängt ab vom Format und den internen Bildmaßen (gemäß des Medientyps).
- Horizontale Ausrichtungs Option: eines von left, right, center, none; Wenn mehrere dieser Optionen zur Verfügung stehen, wird nur die erste verwendet;
- Bestimmt die Horizontale Ausrichtung (und inline/block oder floating Stile) des Bildes innerhalb von Text (ohne Standardwert).
- Vertikale Ausrichtungs Option: eines von baseline, sub, super, top, text-top, middle, bottom, text-bottom;
- Bestimmt die vertikale Ausrichtung eines non-floating inline Bildes mit dem Text vor oder nach dem Bild innerhalb des selben Blocks (die vertikale Standardausrichtung ist middle)
- Link option: Eine von
- link={target} — Erlaubt das Ändern des erzeugten Linkziels (zu einem zufälligen Seitentitel oder URL), aktivierbar auf der angezeigten Bildfläche ; z.B.
[[File:Example.jpg|20px|link=http://www.wikipedia.org]]
wird dargestellt als (externer Link), oder[[File:Example.jpg|20px|link=MediaWiki]]
als (interner Link). - link= (mit einem Leerwert) — Zeigt ein Bild ohne aktivierbaren Link; z.B.
[[File:Example.jpg|20px|link=]]
wird dargestellt als .
- Wenn zwischen
link
und dem Gleichheitszeichen ein Leerzeichen steht, wird die Link-Anweisung als Beschriftung verwendet. - Das Einfügen einiger HTML-Zeichen-Äquivalente, wie
%22
für"
, kann dazu führen, dass die Link-Anweisung als Bildunterschrift behandelt wird.
- link={target} — Erlaubt das Ändern des erzeugten Linkziels (zu einem zufälligen Seitentitel oder URL), aktivierbar auf der angezeigten Bildfläche ; z.B.
- Andere spezifische Optionen:
- alt={alternativer Text} — spezifiziert alternativen Text (bezogen auf das HTML Attribut
alt="..."
des generierten<img />
Elements) eines Bilds, der angezeigt wird, wenn entweder das gewünschte Bild nicht heruntergeladen und angezeigt werden kann oder das anzeigende System diesen Text verwenden muss (z. B. wenn ein Braille-Leser eingesetzt wird oder der Nutzer im Browser entsprechendes einstellt).
- Wenn zwischen
alt
und dem Gleichheitszeichen ein Leerzeichen steht, wird die alt-Anweisung als Beschriftung verwendet.
- page={Nummer} — zeigt die angegebene Seitennummer (zur Zeit nur verwendbar, wenn eine *.djvu- oder eine *.pdf-Datei angezeigt wird).
- class={HTML Klasse} — (MediaWiki 1.20+) Definiert die Klassen (spezifiziert das HTML-Attribut
class="..."
des generierten<img />
Elements). lang={language code} – für SVG-Dateien mit <switch> Anweisungen, die für ein Attribut systemLanguage variieren, wählen aus, in welcher Sprache die Datei dargestellt werden soll. Die Standardeinstellung ist die Seitensprache (bei den meisten Projekten wird standardmäßig die Standardsprache des Projekts verwendet).
- alt={alternativer Text} — spezifiziert alternativen Text (bezogen auf das HTML Attribut
Wenn ein Parameter mit keiner der anderen Möglichkeiten übereinstimmt, wird davon ausgegangen, dass er der Beschriftungstext ist. Wenn mehr als eine Nicht-Parameter-Zeichenfolge vorhanden ist, wird die letzte Nicht-Parameter-Zeichenfolge als Beschriftung verwendet. Beschriftungstext wird unterhalb des Bildes in thumb und frame Formaten angezeigt oder als Tooltip-Text in jedem anderen Format. Der in den Formaten thumb und Frame angezeigte Beschriftungstext kann Wiki-Links und andere Formatierungen enthalten. MediaWiki Erweiterungen können zusätzliche Optionen hizufügen.
Wenn "alt" nicht angegeben ist und eine Beschriftung bereitgestellt wird, wird der alternative Text automatisch aus der Beschriftung erstellt, ohne Formatierung, es sei denn, die Beschriftung ist bereits für "thumb" oder "frame" Screenreader lesbar.
Format
Die folgende Tabelle zeigt die Auswirkung aller verfügbaren Formate.
Beschreibung | Geschrieben | Angezeigt |
---|---|---|
Kein Format angegeben Rendered as a floating block: Nein Rendered inline: Ja Rendered caption: Nein |
... Text Text Text [[Datei:MWExample.jpg|Überschrift]] Text Text Text ... |
... Text Text Text |
border resultiert in einem sehr dünnen grauen Rand. Rendered as a floating block: Nein Rendered inline: Ja Rendered caption: Nein |
... Text Text Text [[Datei:MWExample.jpg|border|Überschrift]] Text Text Text ... |
... Text Text Text |
frameless übernimmt (wie thumbnail) die User-Vorgabe für Bildbreite, jedoch ohne Rahmen und ohne rechtes Umfließen des Textes Rendered as a floating block: Nein Rendered inline: Ja Rendered caption: Nein |
... Text Text Text [[Datei:MWExample.jpg|frameless|Überschrift]] Text Text Text ... |
... Text Text Text |
frameless and border
Rahmenlos und Begrenzung |
... Text Text Text [[Datei:MWExample.jpg|frameless|border|Überschrift]] Text Text Text ... |
... Text Text Text |
frame Rendered as a floating block: Ja Rendered inline: Nein Rendered caption: Ja |
... Text Text Text [[Datei:MWExample.jpg|frame|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
thumb oder thumbnail Rendered as a floating block: Ja Rendered inline: Nein Rendered caption: Ja |
... Text Text Text [[Datei:MWExample.jpg|thumb|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
Wenn die Höhe eines Bilds in der Miniaturansicht größer als seine Breite ist (d. h. im Hochformat statt im Querformat) und Du sie zu groß findest, kannst Du die Option upright=N
verwenden, wobei N für das Seitenverhältnis des Bildes steht (Breite geteilt durch Höhe, standardmäßig 0,75).
Die Alternative besteht darin, die gewünschte maximale Höhe (in Pixel) explizit anzugeben.
Beachte, dass Du durch Einfügen von thumb={filename}
ein anderes Bild für die Miniaturansicht verwenden kannst.
Größe und Rahmen
Unter verschiedenen Formaten kann die Auswirkung des Größenparameters unterschiedlich ausfallen, wie unten gezeigt.
- Wie es angezeigt wird, wenn seine Größe nicht angegeben ist, findest Du im obigen Abschnitt Format.
- Wenn das Format nicht angegeben oder nur
border
enthält, kann die Größe auf jede angegebene Größe verkleinert und vergrößert werden. - In den folgenden Beispielen beträgt die Originalgröße des Bildes 400 × 267 Pixel.
- Ein Bild mit
frame
ignoriert immer die Größenangabe. Das Originalbild wird verkleinert, wenn es die in den Benutzereinstellungen festgelegte maximale Größe überschreitet. - Die Größe eines Bildes mit
thumb
oderframeless
kann reduziert, aber nicht über die Originalgröße des Bildes hinaus vergrößert werden.
Format | Verkleinert | Vergrößert |
---|---|---|
... Text Text Text [[Datei:MWExample.jpg|Überschrift]] Text Text Text ... |
... Text Text Text | |
border |
... Text Text Text [[Datei:MWExample.jpg|border|Überschrift]] Text Text Text ... |
... Text Text Text |
frame |
... Text Text Text [[Datei:MWExample.jpg|frame|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
thumb |
... Text Text Text [[Datei:MWExample.jpg|thumb|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
frameless |
... Text Text Text [[Datei:MWExample.jpg|frameless|Überschrift]] Text Text Text ... |
... Text Text Text |
Horizontale Ausrichtung
Beachte, dass bei Verwendung der Formate frame
oder thumb[nail]
die horizontale Standardausrichtung right lautet, bei Sprachen von links nach rechts, und links bei Sprachen von rechts nach links.
Beschreibung | Eingabe | Ergebnis |
---|---|---|
Keine horizontale Ausrichtung angegeben oder Standardausrichtung Rendered as a floating block: Nein Rendered inline: Ja |
... Text Text Text [[Datei:MWExample.jpg|100px|Überschrift]] Text Text Text ... |
... Text Text Text |
horizontale Ausrichtung angeben als: none Rendered as a floating block: Nein Rendered inline: Nein |
... Text Text Text [[Datei:MWExample.jpg|none|100px|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
horizontale Ausrichtung angeben als: center Rendered as a floating block: Nein Rendered inline: Nein |
... Text Text Text [[Datei:MWExample.jpg|center|100px|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
horizontale Ausrichtung angeben als: left Rendered as a floating block: Ja Rendered inline: Nein |
... Text Text Text [[Datei:MWExample.jpg|left|100px|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
horizontale Ausrichtung angeben als: right Rendered as a floating block: Ja Rendered inline: Nein |
... Text Text Text [[Datei:MWExample.jpg|right|100px|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
Vertikale Ausrichtung
Die vertikalen Ausrichtungsoptionen wirken sich nur aus, wenn das Bild als Inline-Element gerendert wird und nicht floatet. Sie ändern die Art und Weise, in der das eingeblendete Bild vertikal an dem Text ausgerichtet wird, der in demselben Block vor und/oder nach diesem Bild in derselben gerenderten Zeile vorhanden ist.
Beachte, dass die gerenderte Textzeile, in die Inline-Bilder eingefügt werden (und die nach der aktuellen Textzeile gerenderten Textzeilen) nach unten verschoben werden können (dies erhöht die Zeilenhöhe bedingt durch zusätzlichen Zeilenabstand, genau wie dies bei Text mit variablen Schriftgrößen oder mit Hoch- und Tiefstellungen sein kann), damit die Bildhöhe mit dieser Ausrichtungsbeschränkung vollständig angezeigt werden kann.
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>
Um das Ausrichtungsergebnis klarer darzustellen, werden die Textbereiche über- und unterstrichen, die Schriftgröße auf 200% erhöht und der Absatzblock mit einem dünnen Rand versehen. zusätzlich werden Bilder unterschiedlicher Größe ausgerichtet:
Hinweise:
- Die "mittlere" vertikale Ausrichtungsposition des Bildes (die auch die Standardposition ist) bezieht sich normalerweise auf die Mitte zwischen der x-Höhe und der Grundlinie des Texts (an der die vertikale Bildmitte ausgerichtet wird und an der in der Regel der Text überschrieben sein kann), jedoch nicht in der Mitte der Zeilenhöhe der Schrifthöhe, die sich auf den Abstand zwischen den Positionen "Text oben" und "Text unten" bezieht; Die Schrifthöhe schließt aus:
- der zusätzliche Zeilenabstand, der normalerweise gleichmäßig in zwei Zeilenränder (hier 0,5em, entsprechend der auf 200% eingestellten Zeilenhöhe) oberhalb und unterhalb der Schrifthöhe aufgeteilt wird.
- der zusätzliche Zeilenabstand, der durch hochgestellte und tiefgestellte Zeichen hinzugefügt werden kann.
- Wenn jedoch die Bildhöhe dazu führt, dass die obere oder untere Position über oder unter der normalen vollen Zeilenhöhe des Texts liegt, wird die mittlere Position nach dem Erhöhen der oberen und/oder unteren Zeilenränder angepasst, damit das Bild angepasst und korrekt ausgerichtet angezeigt werden kann. Alle Bilder (einschließlich der Bilder mit kleineren Höhen) werden vertikal in der angepassten Mittelposition zentriert (zur Berechnung der effektiven Zeilenhöhe wird der Text jeder gerenderten Zeile mit der größeren Schrifthöhe berücksichtigt).
- Die Ausrichtungspositionen "Text oben" und "Text unten" schließen auch den zusätzlichen Zeilenabstand aus, der durch hochgestellte und tiefgestellte Zeichen hinzugefügt wird, jedoch nicht den zusätzlichen Zeilenabstand, der durch die Zeilenhöhe definiert wird.
- Die Ausrichtungspositionen "oben" und "unten" berücksichtigen all diese zusätzlichen Zeilenabstände (einschließlich hochgestellter und tiefgestellter Zeilen, wenn sie in einem gerenderten Zeilenbereich vorhanden sind). Wenn die Bildausrichtung das Bild so einschränkt, dass es über oder unter dem normalen Zeilenabstand hinausragt und das Bild nicht absolut positioniert ist, werden durch das Bild die Positionen "oben" und "unten" angepasst (genau wie bei Hoch- und Tiefstellungen). Daher ist die effektive Zeilenhöhe zwischen gerenderten Textzeilen höher.
- Die Textformatierungen "unterstrichen", "überstrichen" und "durchgestrichen" sollten irgendwo innerhalb dieser beiden Grenzen liegen und können von der Art und Höhe der verwendeten Schriftarten abhängen (die hochgestellten und tiefgestellten Stile können berücksichtigt werden) In einigen Browsern werden diese Stile jedoch normalerweise ignoriert und die Position dieser Textformatierungen möglicherweise nicht angepasst. Daher haben diese Formatierungen normalerweise keinen Einfluss auf die vertikale Position der Bilder relativ zum Text.
Textfluss stoppen
Gelegentlich ist es wünschenswert, zu verhindern, dass Text (oder andere nicht floatende Inline-Bilder) um ein floatendes Bild herumfließen.
Abhängig von der Bildschirmauflösung des Webbrowsers und dergleichen kann der Textfluss auf der rechten Seite eines Bildes dazu führen, dass rechts neben dem Bild eine Abschnittsüberschrift (z. B. == My Header ==) angezeigt wird, anstatt darunter, wie man es erwarten würde.
Der Textfluss kann gestoppt werden, indem <br clear=all>
(oder falls bevorzugt, <div style="clear: both"></div>
) vor dem Text platziert wird, der unter dem floatenden Bild beginnen soll.
(Dies kann auch ohne eine Leerzeile geschehen, indem der Abschnitt mit den floatenden Bildern mit <div style="overflow: hidden">…</div>
umbrochen wird, wodurch alle Floats innerhalb des div
-Elements gelöscht werden.)
Alle Bilder werden als Blöcke gerendert (einschließlich zentrierter, nicht floatender Bilder,links oder rechts floatender Bilder sowie gerahmter Bilder oder floatender Vorschaubilder) unterbrechen implizit die umgebenden Textzeilen (beenden den aktuellen Textblock vor dem Bild und erstellen einen neuen Absatz für den Text danach). Sie werden dann vertikal entlang ihres linken oder rechten Ausrichtungsrandes (oder entlang der Mittellinie zwischen diesen Rändern von zentrierten Bildern) gestapelt.
Ändern des Standard-Link-Ziels
In der folgenden Tabelle wird gezeigt, wie Du das Linkziel (dessen Standardeinstellung die Bildbeschreibungsseite ist) ändern oder entfernen kannst. Durch Ändern des Links wird das in den vorherigen Abschnitten beschriebene Format nicht geändert.
Beschreibung | Du schreibst | Du erhältst |
---|---|---|
Interner Verweis (link) |
... Text Text Text [[Datei:MWExample.jpg|link=Main Page|Überschrift]] Text Text Text ... |
... Text Text Text |
Externer Link |
... Text Text Text [[Datei:MWExample.jpg|link=https://skandinavien-wiki.net/wiki/Test|Überschrift]] Text Text Text ... |
... Text Text Text |
kein Link (externe oder Dateiseite) |
... Text Text Text [[Datei:MWExample.jpg|link=|Überschrift]] Text Text Text ... |
... Text Text Text
Text Text Text ... |
Anzeigen einer Bildergalerie
Gallery syntax
Mit dem <gallery>
-Tag kannst Du ganz einfach eine Galerie mit Miniaturansichten erstellen.
Die Syntax ist:
<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>
Beachte, dass der Bildcode nicht durch Klammern eingeschlossen ist, wenn er in Galerie-Tags eingeschlossen ist.
Bildunterschriften sind optional und können Wiki-Links oder andere Formatierungen enthalten.
Einige der Parameter, die die Ausgabe der Vorschaubilder steuern, können auch hier verwendet werden, insbesondere diejenigen, die die Datei ändern (im Gegensatz zu denen, die steuern, wo auf der Seite das Bild abgelegt wird).
Bei mehrseitigen Medien wie pdfs kannst Du beispielsweise Code wie page=4
verwenden.
Das Präfix File:
kann weggelassen werden.
Es ist jedoch hilfreich, es als Hilfe zum schnellen Auffinden von Bildspezifizierern im Wikitext aufzunehmen (z. B. beim Aufräumen des Seitenlayouts).
Zum Beispiel:
<gallery>
File:MWExample.jpg|Item 1
File:MWExample.jpg|a link to [[Help:Contents]]
File:MWExample.jpg
File:MWExample.jpg|alt=An example image. It has flowers
File:MWExample.jpg|''italic caption''
File:MWExample.jpg|Links to external website|link=https://example.com
File:MWExample.jpg|link=w:Main_Page|Internal link
MWExample.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>
wird formatiert als:
a link to Help:Contents
mode-Parameter
traditional
ist der Orginal-Galerietyp, der von MediaWiki verwendet wird.nolines
ähnelttraditional
, hat jedoch keine Begrenzungslinien.packed
bewirkt, dass Bilder dieselbe Höhe, aber unterschiedliche Breiten haben, wobei zwischen den Bildern nur wenig Platz gelassen wird. Die Zeilen in diesem responsive Modus ordnen sich nach der Breite des Bildschirms.packed-overlay
zeigt die dem Bild überlagerte Beschriftung in einem halbtransparenten weißen Feld.packed-hover
ähneltpacked-overlay
, nur dass die Beschriftung und das Kästchen nur beim Mouse-over angezeigt werden.slideshow
erstellt eine Diashow der Bilder.
Zum Beispiel:
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>
Ergibt (Modus: packed-hover
):
Astronotus ocellatus (Oscar)
Salmo salar (Salmon Larva)
Epinephelus lanceolatus (Giant grouper)
Pterois volitans (Red Lionfish)
Macropodus opercularis (Paradise fish)
Canthigaster valentini (Valentinni's sharpnose puffer)
Dactylopterus volitans (Flying gurnard)
Semicossyphus pulcher (California Sheephead)
Pseudorasbora parva (Topmouth gudgeon)
Pterois antennata (Antennata Lionfish)
Synchiropus splendidus (Mandarin fish)
Psetta maxima (Turbot)
Beispiele für die anderen Modi:
mode="traditional"
Astronotus ocellatus (Oscar)
Salmo salar (Salmon Larva)
Epinephelus lanceolatus (Giant grouper)
mode="nolines"
Astronotus ocellatus (Oscar)
Salmo salar (Salmon Larva)
Epinephelus lanceolatus (Giant grouper)
mode="packed"
Astronotus ocellatus (Oscar)
Salmo salar (Salmon Larva)
Epinephelus lanceolatus (Giant grouper)
mode="packed-overlay"
mode="packed-hover"
Astronotus ocellatus (Oscar)
Salmo salar (Salmon Larva)
Epinephelus lanceolatus (Giant grouper)
mode="slideshow"
Optionale Galerieattribute
Das Galerie-Tag selbst akzeptiert mehrere zusätzliche Parameter, die als attribute name-value pairs angegeben werden:
<gallery {parameters}>
{images}
</gallery>
caption="{caption}"
: (Beschriftungstext zwischen Anführungszeichen für mehr als ein Wort) legt eine Beschriftung fest, die über der Galerie zentriert wird. In der Beschriftung darf nur einfacher Text verwendet werden. Formatierungen, Vorlagen und ähnliches funktionieren nicht.widths={width}px
: Legt die (maximale) Breite der Bilder fest. Der Standardwert ist 120px. Beachte den Plural: widths.heights={heights}px
: Legt die (maximale) Höhe der Bilder fest. Der Standardwert ist 120px.perrow={integer}
: bestimmt die Anzahl der Bilder pro Reihe. 0 bedeutet, dass die Einstellung automatisch an die Bildschirmbreite angepasst wird.showfilename={anything}
: Zeigt die Dateinamen der Bilder in den einzelnen Bildunterschriften für jedes Bild an (1.17+).mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}
: Siehe oben ("slideshow").showthumbnails
: Zeigt im "Diashow" -Modus standardmäßig den Streifen mit den Miniaturbildern unter der Diashow
- Beispiel 1
Syntax:
<gallery widths=300px heights=200px>
File:MWExample.jpg|Lorem ipsum
File:MWExample.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>
Ergebnis:
- Beispiel 2
Syntax:
<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
File:MWExample.jpg
</gallery>
Ergebnis:
Reihe von Bildern, die auf die Browserbreite angepasst wird
Eine Möglichkeit, die für eine Reihe von Bildern mit unterschiedlichen Breiten funktioniert, besteht darin, nicht "Vorschaubilder" oder "Seitenangabe links" oder "keine" zu verwenden. Wenn "mini" nicht verwendet wird (und somit keine Bildunterschriften), wird eine Reihe von Bildern auf die Breite des Browsers angepasst. Wenn nötig, verkleinere das Browserfenster, damit Du siehst, wie die Bilder in die nächste Zeile umgebrochen werden.
[[File:Example.jpg|220px]] [[File:Example.jpg|100px]] [[File:Example.jpg|150px]] [[File:Example.jpg|250px]] [[File:Example.jpg|200px]] [[File:Example.jpg|50px]] [[File:Example.jpg|220px]] [[File:Example.jpg|175px]]
Um Bilder unterschiedlicher Breite mit Beschriftungen zu versehen, ist es erforderlich, div HTML für eine ungeordnete Liste zu verwenden. Zusammen mit style="display: inline-block;"
. Weitere Informationen und Anregungen findest Du unter: Geben Sie Floats den Flick in CSS-Layouts.
<div><ul>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>
Um den oberen Rand von Bildern auszurichten, den Befehl vertical-align hinzufügen
<div><ul>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>
Einige Wikis verfügen nicht über alle Galerieoptionen (z. B. "widths"). Manchmal möchte man auch unterschiedliche Breiten für Bilder in einer Reihe. Außerhalb einer Galerie oder des div-HTML-Codes ist es nicht möglich, einzelne Beschriftungen für Bilder in einer Reihe von Bildern zu erstellen, die sich an die Breite des Browsers anpassen. Probiere es aus und schaue es Dir an. Sonst funktioniert Wikitext nicht richtig. Die Bilder überlappen sich entweder rechts oder erzwingen eine horizontale Bildlaufleiste.
Die Verwendung einer linken Floats ("left") für einige Bilder, kombiniert mit "none" für einige der Bilder, funktioniert ebenfalls nicht konsistent, insbesondere wenn es auch eine rechte Seitenleiste von Bildern gibt. Es werden seltsame Dinge passieren. Bei schmaleren Browser- oder Bildschirmbreiten wird möglicherweise ein Bild aus der Zeile ganz unten auf der Seite nach dem Ende der rechten Bildseitenleiste angezeigt.
Verhalten von Links
Standardmäßig verlinkt ein Bild auf seine Dateibeschreibungsseite. Die Option "link=" ändert dieses Verhalten, um eine Verknüpfung zu einer anderen Seite oder Website herzustellen oder das Verknüpfungsverhalten des Bildes zu deaktivieren. Alternativ kannst Du einen Textlink zu einer Dateibeschreibungsseite oder zur Datei selbst erstellen.
Bild anzeigen, auf eine andere Seite oder Website verlinken
Verwende die Option "link=", um ein Bild mit einer anderen Seite oder Website zu verknüpfen:
Wenn Du auf das folgende Bild klickst, gelangst Du nach MediaWiki:
[[File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]
Wenn Du auf das Bild unten klickst, gelangst Du nach example.com:
[[File:MediaWiki-2020-logo.svg|50px|link=http://example.com]]
Bild anzeigen, Verlinkung deaktivieren
Verwende die Option "link=" ohne zugewiesenen Wert, um den Link vollständig zu deaktivieren. Das folgende Bild ist kein Link:
[[File:MediaWiki-2020-logo.svg|50px|link=]]
Link zu einem Bild
Füge dem zu erstellenden Link :
als Präfix hinzu.
[[:File:MediaWiki-2020-logo.svg]]
[[:File:MediaWiki-2020-logo.svg|Wiki]]
Direkter Link zu einem Bild
Die Beispiele oben verweisen auf die Seite mit der Bildbeschreibung.
Um direkt auf ein Bild zu verlinken, kann auf MediaWiki-Seiten der Pseudo-Namensraum Media:
verwendet werden:
[[Media:MediaWiki-2020-logo.svg]]
Direkte Links von externen Web-Sites
Eine andere Möglichkeit ist die Verwendung der Seite Special:Redirect/file (oder deren Alias Special:Filepath). Im Gegensatz zum oberen Beispiel kann sowohl von externen Websites als auch von MediaWiki-Seiten darauf verlinkt werden.
[[Special:Redirect/file/Wikipedia.png]]
Die Parameter height
und width
können auch hinzugefügt werden, um eine bestimmte Größe des Bildes anzugeben.
Das Bildseitenverhältnis bleibt immer erhalten.
https://www.mediawiki.org/w/index.php?title=Special:Redirect/file/Wikipedia.png&width=100&height=100
Abrufen der vollständigen URL eines Bildes
Um den vollständigen Pfad eines Bildes zu erhalten (ohne Weiterleitungen zu durchlaufen, wie oben gezeigt), können einige [[Help:Magische Wörter|nsp=0}} verwendet werden.
{{filepath:MediaWiki-2020-logo.svg}}
Wird zu:
Falls dies aus einer Vorlage verwendet wird, in der der Namensraum Datei:
entfernt werden muss, kann {{PAGENAME}}
dies tun:
{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}
Wird zu:
Dateien anderer Webseiten
Du kannst mit derselben Syntax, die für das Verknüpfen mit einer externen Webseite verwendet wird, auf eine online verfügbare externe Datei verweisen. Mit diesen Syntaxen wird das Bild nicht gerendert, sondern nur der Text des Links zu diesem Bild angezeigt.
[http://url.for/some/image.png]
Oder mit einem anderen angezeigten Text:
[http://url.for/some/image.png verlinke den Text hier]
Siehe auch
- Wikipedia:Erweiterter Bild-Syntax
- Kategorie:Wikipedia Bilder Hilfe
- Hilfe:Bilder
- Hilfe:Galerie
- Phabricator:T113101 - responsive Eigenschaften