Hilfe:Bilder: Unterschied zwischen den Versionen

Hilfeseite Diskussion
Quelltext anzeigen Versionsgeschichte
VisuellWikitext
Keine Bearbeitungszusammenfassung
(überarbeitet)
Zeile 13: Zeile 13:
Diese Seite erklärt, wie du Bilder, Grafiken und Karten in Artikel einfügst. Wie du Bilder hochladen kannst, erfährst du im [[Hilfe:Bildertutorial|Bildertutorial]].   
Diese Seite erklärt, wie du Bilder, Grafiken und Karten in Artikel einfügst. Wie du Bilder hochladen kannst, erfährst du im [[Hilfe:Bildertutorial|Bildertutorial]].   


== Grundregeln ==
==Grundregeln==
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.


* Du musst beim Tamriel-Almanach [[Hilfe:Registrierung|registriert]] und angemeldet sein, um Bilder/Dateien hochladen zu können.
Die Bilder sollten möglichst in die jeweiligen Kapitel gesetzt werden. Zuviele Bilder am Anfang des Artikels angeführt, um sich „von selbst“ auf den Artikel zu verteilen, sind ungüstig: Sie zeigen leicht unerwüschte Nebenwirkungen im Layout, und bringen auch manche Browser zum Absturz.
* Gib deinem Bild einen klaren und detaillierten Dateinamen (zum Beispiel "Balmora.jpg" statt "Bild 1.jpg"). Der Dateiname sollte immer so wie das Objekt lauten, für das das Bild erstellt wurde.
* Bearbeite das Bild so, dass es das Wesentliche zeigt.


== Prinzipelles zur Anordnung ==
==Das Einfügen von Bildern==
[[Datei:Hilfe Eingebettete Datei Editor.jpg]]


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.
Bilder werden, ähnlich wie Wiki-Interne Links, mit doppelten eckigen Klammern eingefügt. Hieran wird erkennbar, dass immer immer mit dem Befehl '''Datei:''' vorher klargemacht werden muss das es sich dabei um eine Datei handelt. Auch ähnlich wie bei Wiki-Internen Links, ist das hinzufügen von Parametern, die mit einem | getrennt werden.


Die Bilder sollten möglichst in die jeweiligen Kapitel gesetzt werden. Zuviele Bilder am Anfang des Artikels angeführt, um sich „von selbst“ auf den Artikel zu verteilen, sind ungüstig: Sie zeigen leicht unerwüschte Nebenwirkungen im Layout, und bringen auch manche Browser zum Absturz.
<pre>[[Datei:Name.Format]]</pre>


== Originalgröße ==
===Bildbeschreibung===
Es gibt eine Menge festgelegter Parameter die bestimmte Effekte verursachen, aber dazu später mehr. Der einfachste davon ist die Bildbeschreibung. Damit kann in einen kurzen Satz zum Inhalt des Bildes geschrieben werden, der dann erscheint wenn der Cursor sich über dem Bild befindet oder es steht unter dem Bild, je nach anderen Parametern.


Bilder lassen sich mit <nowiki>[[Bild:Dateiname|Beschreibung]]</nowiki> in Artikel einfügen. Das Bild wird dann in Originalgröße links im Artikel angezeigt. Mit der Option "framed", z.B. <nowiki>[[Bild:Dateiname|framed|Beschreibung]]</nowiki> wird das Bild mit einem Rahmen umgeben.
{| class="wikitable"
 
{| border="1" style="border-collapse:collapse"
! Eingabe
! Ergebnis
|-
|-
| class="hintergrundfarbe5" |
! Wikicode !! Wirkung
<tt><nowiki>[[Bild:Kleine Seelensteine.jpg|Kleine Seelensteine]]</nowiki></tt>
|
[[Bild:Kleine Seelensteine.jpg|Kleine Seelensteine]]
|-
|-
| class="hintergrundfarbe5" |
| <pre>[[Datei:Bebilderung.png|Bildbeschreibung]]</pre> || [[Datei:Bebilderung.png|Bildbeschreibung]]
<tt><nowiki>[[Bild:Kleine Seelensteine.jpg|framed|Kleine Seelensteine mit Rahmen]]</nowiki></tt>
|
[[Bild:Kleine Seelensteine.jpg|framed|Kleine Seelensteine 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 (so genannte [[#Thumbnails|Thumbnails]]), die der Leser – wenn es ihn interessiert – dann mit einem Klick auf das Icon vergrößern und genauer betrachten kann.
===Thumbnails===
Ein sehr wichtiger Parameter ist ''thumb''. Dieser erzeugt vom Bild ein sogenanntes Thumbnail. Ein Thumbnail, ist eine verkleinerte Version die automatisch am rechten Bildrand mit Untertitel dargestellt wird und gleichzeitig mit dem Original verlinkt ist, sodass bei einem Klick auf die Seite des Bildes weitergeleitet wird. Dies ist die gängigste Art der Einbindung von Bilder im Almanach.


== Thumbnails ==
{| class="wikitable"
[[Bild:Yagrum Bagarn.jpg|thumbnail|Yagrum Bagarn]]
|-
! Wikicode !! Wirkung
|-
| <pre>[[Datei:Bebilderung.png|thumb|Bildbeschreibung]]</pre> || [[Datei:Bebilderung.png|thumb|Bildbeschreibung]]
|}


Die von dem Tamriel-Almanach verwendete Software Mediawiki kann automatisch Vorschaubilder erzeugen. Dazu fügt man den Zusatz '''''<nowiki>|thumb</nowiki>''''' oder '''''<nowiki>|thumbnail</nowiki>''''' zwischen Dateiname und Alternativtext ein, zum Beispiel '''''<nowiki>[[Bild:Yagrum Bagarn.jpg|thumb|Yagrum Bagarn]]</nowiki>'''''. Das erzeugte Vorschaubild wird rechtsbündig ausgerichtet und vom Artikeltext umflossen. Der Alternativtext wird unter dem Bild als Beschreibung angezeigt. Über ein Klicken springt man zur großen Version des Bildes auf seiner Beschreibungsseite. Angemeldete Benutzer können die Bildgröße der Thumbnails in ihren [[Hilfe:Einstellungen|Benutzereinstellungen]] festlegen; für nichtangemeldete Leser erscheinen diese Bilder mit einer Bildbreite von 180 Pixeln. Diese Art der Bilddarstellung sollte im Allgemeinen in Artikeln verwendet werden. Bildunterschriften unterstützen alle [[Hilfe:Textgestaltung|Möglichkeiten der Textgestaltung]].
===Links- und Rechtsbündigkeit===
<br style="clear:both" />
Wenn sich Bilder zu einem Artikel ansammeln, entsteht meist das Bedürfnis, die Thumbnails auch an den linken Bildrand zu platzieren. Ein weitere Anwendung hierfür ist bei Bildern, die nicht automatisch an der rechten Seite stehen, an die rechte Seite stellen. Diese Beiden Wünsche erfüllen die beiden Parameter ''left'' und ''right''.


=== Abweichende Thumbnails ===
{| class="wikitable"
 
|-
Mit der Option '''''<nowiki>[[Bild:Beispielbild.jpg|thumbnail=Beispielthumb.jpg|Bildbeschreibung]]</nowiki>''''' lässt sich ein Thumbnail darstellen, das nicht dem hinterlegten Bild entspricht. Eine sinnvolle Anwendung besteht darin, einen Ausschnitt aus einem großen Bild als Thumbnail zu nehmen, beispielsweise um auf ein Detail hinzuweisen oder bei einer Panoramaaufnahme (extremes Seitenverhältnis) ein Teil mit gängigem Format (4:3) als Thumbnail anzuzeigen. Eine andere Anwendung: Bei einigen Bildern verschwinden in der Thumbnail-Ansicht wichtige Details. Beim Vergrößern erscheint dann das komplette Bild.
! Wikicode !! Wirkung
 
|-
== Bilder skalieren ==
| <pre>[[Datei:Bebilderung.png|thumb|left|Bildbeschreibung]]</pre> || [[Datei:Bebilderung.png|thumb|left|Bildbeschreibung]]
 
|-
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.
| <pre>[[Datei:Bebilderung.png|right|Bildbeschreibung]]</pre> || [[Datei:Bebilderung.png|right|Bildbeschreibung]]
 
|}
=== Feste Skalierung ===
[[Bild:Yagrum Bagarn.jpg|thumb|100px|Yagrum Bagarn]]
 
Mit '''''<nowiki>[[Bild:Yagrum Bagarn.jpg|thumb|100px|Yagrum Bagarn]]</nowiki>''''' wird die Breite des generierten Miniaturbildes auf 100 Pixel festgelegt (Standardgröße sind 180&nbsp;Pixel). Die Höhe wird aus dem Seitenverhältnis automatisch berechnet. Es ist auch möglich, eine Maximalhöhe festzulegen. Wird etwa als Größe '''''<nowiki>100x200px</nowiki>''''' angegeben, wird das Bild so skaliert, dass es in einem gedachten Rechteck von 100 Pixel Breite und 200 Pixel Höhe Platz findet. Das Seitenverhältnis bleibt dabei in jedem Fall erhalten.
 
[[Bild:Yagrum Bagarn.jpg|left|100px|Yagrum Bagarn ohne Thumbnailrahmen]]
Mit '''''<nowiki>[[Bild:Yagrum Bagarn.jpg|left|100px|Yagrum Bagarn ohne Thumbnailrahmen]]</nowiki>''''' skalierst du das Bild und lässt es ohne einen Thumbnailrahmen anzeigen.
<br style="clear:both" />
 
=== Hoch- und querformatige Bilder kombinieren – automatische Skalierung ===
 
Werden hoch- und querformatige Bilder untereinander gesetzt, ohne dass eine Breite vorgegeben wird, wirken die hochformatigen Thumbs meist übermäßig groß. Es empfiehlt sich in solchen Fällen, dem hochformatigen Bild den Parameter '''''<nowiki>|upright</nowiki>''''' 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 Verhältnisse bleiben immer gewahrt.
 
Beispiel:
 
'''''<nowiki>[[Bild:Bildname.jpg|thumb|upright|Ohne px, aber mit "upright" Angabe]]</nowiki>'''''
 
Dem Parameter '''''<nowiki>|upright</nowiki>''''' kann auch ein Faktor mitgegeben werden, falls es sich um sehr hohe Bilder handelt, bei der eine Skalierung auf 0,75 noch nicht reicht:
 
'''''<nowiki>[[Bild:Bildname.jpg|thumb|upright=0.5|Ohne px, aber mit "upright=0.5" Angabe]]</nowiki>'''''
 
Auf diese Weise können auch sehr breite Bilder, z.B. Panoramen, skaliert werden. Mit einem upright-Wert > 1 werden sie entsprechend breiter als das Standard-Thumbnail dargestellt. Die Proportionen bleiben dadurch in jeder Darstellung erhalten:
 
'''''<nowiki>[[Bild:Panorama.jpg|thumb|upright=1.8|Panorama, es wird mit 180% der Standardbreite dargestellt.]]</nowiki>'''''
 
Die Breite der so berechneten Thumbnails wird immer auf den nächsthöheren 10er-Wert aufgerundet. Dieser automatischen Skalierung sollte der Vorzug gegeben werden vor der Verwendung fester Bilderbreiten.
<br style="clear:both" />
 
== Ausrichten im Text ==


Die Optionen '''''<nowiki>|left</nowiki>''''', '''''<nowiki>right</nowiki>''''', '''''<nowiki>|center<nowiki>''''' und '''''<nowiki>|none</nowiki>''''' richten Bilder im Text 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 thumbs auf der rechten Seite, bei längeren Absätzen auch absatzweise unter der Absatzüberschrift einzufügen.
===Feste Skalierung===
Die Skalierung des Bildes wird mit '''?px''' eingestellt, wobei das ? dann die Breite des Bildes festlegt. Beispielsweise stellt '''100px''' die Breite des Bildes auf 100 Pixel, '''200px''' auf 200 Pixel. Ein Thumbnail ist standardmäßig auf 180px Breite festgelegt. Die Höhe kann mit einer weiteren Angabe in px festgelegt werden.  


{| border="1" style="border-collapse:collapse"
{| class="wikitable"
! Eingabe
! Ergebnis
|-
|-
| class="hintergrundfarbe5" |
! Wikicode !! Wirkung
<tt><nowiki>[[Bild:Almanach-Button.jpg|left|Das Almanach-Symbol]] Das '''Almanach-Symbol''' ist das offizielle Symbol des Tamriel-Almanachs. </nowiki></tt>
| class="hintergrundfarbe5" |
[[Bild:Almanach-Button.jpg|left|Das Almanach-Symbol]]
Das '''Almanach-Symbol''' ist das offizielle Symbol des Tamriel-Almanachs.
|-
|-
| class="hintergrundfarbe5" |
| <pre>[[Datei:Schrein-von-Peryite.jpg|100px|Bildbeschreibung]]</pre> || [[Datei:Schrein-von-Peryite.jpg|100px|Bildbeschreibung]]
<tt><nowiki>[[Bild:Almanach-Button.jpg|right|Das Almanach-Symbol]] Das '''Almanach-Symbol''' ist das offizielle Symbol des Tamriel-Almanachs. </nowiki></tt>
| class="hintergrundfarbe5" |
[[Bild:Almanach-Button.jpg|right|Das Almanach-Symbol]]
Das '''Almanach-Symbol''' ist das offizielle Symbol des Tamriel-Almanachs.
|-
|-
| class="hintergrundfarbe5" |
| <pre>[[Datei:Schrein-von-Peryite.jpg|200x300px|Bildbeschreibung]]</pre> || [[Datei:Schrein-von-Peryite.jpg|200x300px|Bildbeschreibung]]
<tt><nowiki>[[Bild:Almanach-Button.jpg|thumb|center|100px|Das Almanach-Symbol]]</nowiki></tt>
| class="hintergrundfarbe5" |
[[Bild:Almanach-Button.jpg|center|Das Almanach-Symbol]]
<tt>center</tt> zentriert ein Bild innerhalb einer Tabellenzelle.
|}
|}


Der Parameter '''''<nowiki>|none</nowiki>''''' schaltet jegliche automatische Ausrichtung (bei Thumbnails) ab und stellt das Bild inline dar. Das ist vor allem zum Einfügen von Thumbnails in [[Hilfe:Tabellen|Tabellen]] praktisch.
===Upright===
Werden hoch- und querformatige Bilder untereinander gesetzt, ohne dass eine Breite vorgegeben wird, wirken die hochformatigen Thumbs meist übermäßig groß. Es empfiehlt sich in solchen Fällen, dem hochformatigen Bild den Parameter '''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 Verhältnisse bleiben immer gewahrt.


Alle Optionen lassen sich beliebig, jeweils durch senkrechte Striche getrennt, miteinander kombinieren, unbekannte Optionen ignoriert die Software.
{| class="wikitable"
|-
! Wikicode !! Wirkung
|-
| <pre>[[Datei:Galerion-Statue.JPG|thumb|upright|Bildbeschreibung]]</pre> || [[Datei:Galerion-Statue.JPG|thumb|upright|Bildbeschreibung]]
|}


=== Thumbs nebeneinander am rechten Rand ===
Dem Parameter upright kann auch ein Faktor mitgegeben werden, falls es sich um sehr hohe Bilder handelt, bei der eine Skalierung auf 0,75 noch nicht reicht. Die Breite der so berechneten Thumbnails wird immer auf den nächsthöheren 10er-Wert aufgerundet. Dieser automatischen Skalierung sollte der Vorzug gegeben werden vor der Verwendung fester Bilderbreiten.


Gelegentlich möchte man zwei oder mehr Bilder am rechten Rand vergleichend nebeneinander darstellen. Auch hierzu sind Tabellen nützlich:
{| class="wikitable"
 
|-
<pre style="width:60%">
! Wikicode !! Wirkung
{| style="float:right; background:transparent; padding:0px; margin:0px;"
|-
|[[Bild:Hund.jpg|thumb|Hund]]
| <pre>[[Datei:Galerion-Statue.JPG|thumb|upright=0.5|Bildbeschreibung]]</pre> || [[Datei:Galerion-Statue.JPG|thumb|upright=0.5|Bildbeschreibung]]
|[[Bild:Wolf.jpg|thumb|Wolf]]
|}
|}
</pre>


{| style="float:right; background:transparent; padding:0px; margin:0px;"
===Panoramabilder===
|[[Bild:Hund.jpg|thumb|upright=0.5|Hund]]
Mit dem Parameter '''upright''' können auch sehr breite Bilder, z.B. Panoramen, skaliert werden. Mit einem Faktor > 1 werden sie entsprechend breiter als das Standard-Thumbnail dargestellt. Die Proportionen bleiben dadurch in jeder Darstellung erhalten. Der im Beispiel verwendete Faktor 1.8, stellt das Bild in 180% der Standardbreite dar.
|[[Bild:Wolf.jpg|thumb|upright=0.5|Wolf]]
|}
<br style="clear:both" />


Die üblichen Tabellenformatierungen funktionieren auch, so dass Bilder unterschiedlicher Ausrichtung oder Seitenverhältnisse beispielsweise durch Einfügen von '''''<nowiki>|- valign="top"</nowiki>''''' oben ausgerichtet werden können.
{| class="wikitable"
<pre style="width:60%">
|-
{| style="float:right; background:transparent; padding:0px; margin:0px;"
! Wikicode !! Wirkung
|- valign="top"
|-
|[[Bild:Baer.jpg|thumb|Bär]]
| <pre>[[Datei:Panorama Baumgartenbezirk.jpg|thumb|upright=1.8|Bildbeschreibung]]</pre> || [[Datei:Panorama Baumgartenbezirk.jpg|thumb|upright=1.8|Bildbeschreibung]]
|[[Bild:Berglöwe.jpg|thumb|Berglöwe]]
|}
|}
</pre>
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).


{| style="float:right; background:transparent; padding:0px; margin:0px;"
==Die Gallerie==
|- valign="top"
[[Datei:Hilfe Gallerie Editor.jpg]]
|[[Bild:Baer.jpg|thumb|upright=0.5|Bär]]
|[[Bild:Berglöwe.jpg|thumb|upright=0.5|Berglöwe]]
|}
<br style="clear:both" />


In beiden Fällen können auch Skalierungen eingesetzt werden, wegen der besseren Flexibilität sollte der Parameter '''''<nowiki>|upright</nowiki>''''' verwendet werden.
Die Galerie eignet sich, um mehrere Bilder tabellarisch anzuordnen. Das Einfügen und Befüllen von Galerien sollte allerdings nicht übertrieben werden, da nur selten mehr als vier Bilder zu einem Thema notwendig sind.


 
{| class="wikitable"
== Galerie ==
|-
 
! Wikicode !! Wirkung
Die Galerie eignet sich, um mehrere Bilder tabellarisch anzuordnen. Das Einfügen von Galerien mit mehr als vier Bildern ist aber nur in Ausnahmefällen sinnvoll.
|-
 
| <pre>
=== Standard ===
 
Standardmäßig werden vier Bilder pro Zeile angeordnet.
 
<pre>
<gallery>
<gallery>
Bild:Hund.jpg|Hund
Datei:Goldring.jpg|Goldring
Bild:Wolf.jpg|Wolf
Datei:Silberring.jpg|Silberring
Bild:Baer.jpg|Bär
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Berglöwe.jpg|Berglöwe
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>
</gallery>
</pre>
</pre> || <gallery>
 
Datei:Goldring.jpg|Goldring
<gallery>
Datei:Silberring.jpg|Silberring
Bild:Hund.jpg|Hund
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Wolf.jpg|Wolf
Datei:Ebenerzring.jpg|Ebenerzring
Bild:Baer.jpg|Bär
Bild:Berglöwe.jpg|Berglöwe
</gallery>
</gallery>
|}


=== Bilder pro Zeile ===
===Bilder pro Zeile===
Mit dem Parameter '''perrow''' kann angegeben werden, wieviele Bilder pro Zeile gezeigt werden sollen:


Mit dem Schlüsselwort '''''<nowiki>|perrow</nowiki>''''' kann angegeben werden, wieviele Bilder pro Zeile gezeigt werden sollen:
{| class="wikitable"
 
|-
<pre>
! Wikicode !! Wirkung
|-
| <pre>
<gallery perrow="2">
<gallery perrow="2">
Bild:Hund.jpg|Hund
Datei:Goldring.jpg|Goldring
Bild:Wolf.jpg|Wolf
Datei:Silberring.jpg|Silberring
Bild:Baer.jpg|Bär
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Berglöwe.jpg|Berglöwe
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>
</gallery>
</pre>
</pre> || <gallery perrow="2">
 
Datei:Goldring.jpg|Goldring
<gallery perrow="2">
Datei:Silberring.jpg|Silberring
Bild:Hund.jpg|Hund
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Wolf.jpg|Wolf
Datei:Ebenerzring.jpg|Ebenerzring
Bild:Baer.jpg|Bär
Bild:Berglöwe.jpg|Berglöwe
</gallery>
</gallery>
|}


=== Skalierung in Galerien ===
===Skalierung in Galerien===
Mit den Parametern '''heights''' bzw. '''widths''' wird die Breite und/oder Höhe der Bilder vorgegeben. 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.


Mit den Schlüsselwörtern '''''<nowiki>|heights</nowiki>''''' bzw. '''''<nowiki>|widths</nowiki>''''' wird die Breite und/oder Höhe der Bilder vorgegeben. Das jeweils breiteste bzw. höchste Bild wird für die Galerie als Maßstab genommen und die kleineren Bilder entsprechend angepasst. Kombinationen von '''''<nowiki>|heights</nowiki>''''' und '''''<nowiki>|widths</nowiki>''''' sind möglich.
{| class="wikitable"
 
|-
<pre>
! Wikicode !! Wirkung
|-
| <pre>
<gallery heights="300">
<gallery heights="300">
Bild:Hund.jpg|Hund
Datei:Goldring.jpg|Goldring
Bild:Wolf.jpg|Wolf
Datei:Silberring.jpg|Silberring
Bild:Baer.jpg|Bär
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Berglöwe.jpg|Berglöwe
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>
</gallery>
</pre>
</pre> || <gallery heights="300">
 
Datei:Goldring.jpg|Goldring
<gallery heights="300">
Datei:Silberring.jpg|Silberring
Bild:Hund.jpg|Hund
Datei:Kupfertopasring.jpg|Kupfertopasring
Bild:Wolf.jpg|Wolf
Datei:Ebenerzring.jpg|Ebenerzring
Bild:Baer.jpg|Bär
Bild:Berglöwe.jpg|Berglöwe
</gallery>
</gallery>
|}


=== Überschrift ===
==Einfügen eines Links zur Bildbeschreibungsseite==
 
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 '''Bild''' einen ''Doppelpunkt'' setzt: Aus '''<nowiki>[[:Datei:Bebilderung.png|Siehe Hier]]</nowiki>''' wird [[:Datei:Bebilderung.png|Siehe Hier]].
Mit dem optionalen Schlüsselwort '''''<nowiki>|caption</nowiki>''''' lässt sich eine Überschrift einfügen: '''''<nowiki><gallery caption="Bäume"></nowiki>'''''
 
== 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).
 
== Rahmen ==
 
Vor allem einfache Grafiken, Flaggen usw. die einen weißen Untergrund haben und nicht mit '''''<nowiki>|thumb</nowiki>''''' dargestellt werden sollen, benötigen einen Rahmen. Dieser kann mit dem Parameter '''''<nowiki>|border</nowiki>''''' erzeugt werden:
 
'''''<nowiki>[[Bild:Beispiel.jpg|border|right|100px]]</nowiki>'''''
 
== Einfügen eines Links zur Bildbeschreibungsseite ==
 
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
'''''<nowiki>|Bild</nowiki>''''' einen ''Doppelpunkt'' setzt: Aus '''''<nowiki>[[</nowiki>:Bild:Beispiel.jpg<nowiki>|</nowiki>Bildbeschreibung<nowiki>]]</nowiki>''''' wird [[:Bild:Beispiel.jpg|Bildbeschreibung]].
 
== Bild als externen Link ==
 
Es ist auch möglich, durch Bilder auf externe Seiten zu verlinken. Vor allem für direkte Links zur [http://www.scharesoft.de/joomla/almanach/nirn/ interaktiven Nirn-Karte] ist diese Funktion nützlich.
 
'''''<nowiki>[[Bild:Beispiel.jpg|link=http://Linkadresse|250px]]</nowiki>'''''


{{Wikipedia|Hilfe:Bilder}}
{{Wikipedia|Hilfe:Bilder}}
[[Kategorie:Tamriel-Almanach Hilfe|Bilder]]
[[Kategorie:Tamriel-Almanach Hilfe|Bilder]]

Version vom 20. Juni 2012, 14:37 Uhr


< Hilfe < Bilder


Diese Seite erklärt, wie du Bilder, Grafiken und Karten in Artikel einfügst. Wie du Bilder hochladen kannst, erfährst du im Bildertutorial.

Grundregeln

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.

Die Bilder sollten möglichst in die jeweiligen Kapitel gesetzt werden. Zuviele Bilder am Anfang des Artikels angeführt, um sich „von selbst“ auf den Artikel zu verteilen, sind ungüstig: Sie zeigen leicht unerwüschte Nebenwirkungen im Layout, und bringen auch manche Browser zum Absturz.

Das Einfügen von Bildern

Datei:Hilfe Eingebettete Datei Editor.jpg

Bilder werden, ähnlich wie Wiki-Interne Links, mit doppelten eckigen Klammern eingefügt. Hieran wird erkennbar, dass immer immer mit dem Befehl Datei: vorher klargemacht werden muss das es sich dabei um eine Datei handelt. Auch ähnlich wie bei Wiki-Internen Links, ist das hinzufügen von Parametern, die mit einem | getrennt werden. 

[[Datei:Name.Format]]

Bildbeschreibung

Es gibt eine Menge festgelegter Parameter die bestimmte Effekte verursachen, aber dazu später mehr. Der einfachste davon ist die Bildbeschreibung. Damit kann in einen kurzen Satz zum Inhalt des Bildes geschrieben werden, der dann erscheint wenn der Cursor sich über dem Bild befindet oder es steht unter dem Bild, je nach anderen Parametern.

Wikicode Wirkung 
[[Datei:Bebilderung.png|Bildbeschreibung]]
 Bildbeschreibung

Thumbnails

Ein sehr wichtiger Parameter ist thumb. Dieser erzeugt vom Bild ein sogenanntes Thumbnail. Ein Thumbnail, ist eine verkleinerte Version die automatisch am rechten Bildrand mit Untertitel dargestellt wird und gleichzeitig mit dem Original verlinkt ist, sodass bei einem Klick auf die Seite des Bildes weitergeleitet wird. Dies ist die gängigste Art der Einbindung von Bilder im Almanach.

Wikicode Wirkung 
[[Datei:Bebilderung.png|thumb|Bildbeschreibung]]
Bildbeschreibung

Links- und Rechtsbündigkeit

Wenn sich Bilder zu einem Artikel ansammeln, entsteht meist das Bedürfnis, die Thumbnails auch an den linken Bildrand zu platzieren. Ein weitere Anwendung hierfür ist bei Bildern, die nicht automatisch an der rechten Seite stehen, an die rechte Seite stellen. Diese Beiden Wünsche erfüllen die beiden Parameter left und right.

Wikicode Wirkung 
[[Datei:Bebilderung.png|thumb|left|Bildbeschreibung]]
Bildbeschreibung
[[Datei:Bebilderung.png|right|Bildbeschreibung]]
Bildbeschreibung
Bildbeschreibung

Feste Skalierung

Die Skalierung des Bildes wird mit ?px eingestellt, wobei das ? dann die Breite des Bildes festlegt. Beispielsweise stellt 100px die Breite des Bildes auf 100 Pixel, 200px auf 200 Pixel. Ein Thumbnail ist standardmäßig auf 180px Breite festgelegt. Die Höhe kann mit einer weiteren Angabe in px festgelegt werden.

Wikicode Wirkung 
[[Datei:Schrein-von-Peryite.jpg|100px|Bildbeschreibung]]
 Bildbeschreibung 
[[Datei:Schrein-von-Peryite.jpg|200x300px|Bildbeschreibung]]
 Bildbeschreibung

Upright

Werden hoch- und querformatige Bilder untereinander gesetzt, ohne dass eine Breite vorgegeben wird, wirken die hochformatigen Thumbs meist übermäßig groß. Es empfiehlt sich in solchen Fällen, dem hochformatigen Bild den Parameter 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 Verhältnisse bleiben immer gewahrt.

Wikicode Wirkung 
[[Datei:Galerion-Statue.JPG|thumb|upright|Bildbeschreibung]]
Bildbeschreibung

Dem Parameter upright kann auch ein Faktor mitgegeben werden, falls es sich um sehr hohe Bilder handelt, bei der eine Skalierung auf 0,75 noch nicht reicht. Die Breite der so berechneten Thumbnails wird immer auf den nächsthöheren 10er-Wert aufgerundet. Dieser automatischen Skalierung sollte der Vorzug gegeben werden vor der Verwendung fester Bilderbreiten.

Wikicode Wirkung 
[[Datei:Galerion-Statue.JPG|thumb|upright=0.5|Bildbeschreibung]]
Bildbeschreibung

Panoramabilder

Mit dem Parameter upright können auch sehr breite Bilder, z.B. Panoramen, skaliert werden. Mit einem Faktor > 1 werden sie entsprechend breiter als das Standard-Thumbnail dargestellt. Die Proportionen bleiben dadurch in jeder Darstellung erhalten. Der im Beispiel verwendete Faktor 1.8, stellt das Bild in 180% der Standardbreite dar.

Wikicode Wirkung 
[[Datei:Panorama Baumgartenbezirk.jpg|thumb|upright=1.8|Bildbeschreibung]]
Bildbeschreibung

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).

Die Gallerie

Datei:Hilfe Gallerie Editor.jpg

Die Galerie eignet sich, um mehrere Bilder tabellarisch anzuordnen. Das Einfügen und Befüllen von Galerien sollte allerdings nicht übertrieben werden, da nur selten mehr als vier Bilder zu einem Thema notwendig sind.

Wikicode Wirkung 
<gallery>
Datei:Goldring.jpg|Goldring
Datei:Silberring.jpg|Silberring
Datei:Kupfertopasring.jpg|Kupfertopasring
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>

Bilder pro Zeile

Mit dem Parameter perrow kann angegeben werden, wieviele Bilder pro Zeile gezeigt werden sollen:

Wikicode Wirkung 
<gallery perrow="2">
Datei:Goldring.jpg|Goldring
Datei:Silberring.jpg|Silberring
Datei:Kupfertopasring.jpg|Kupfertopasring
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>

Skalierung in Galerien

Mit den Parametern heights bzw. widths wird die Breite und/oder Höhe der Bilder vorgegeben. 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.

Wikicode Wirkung 
<gallery heights="300">
Datei:Goldring.jpg|Goldring
Datei:Silberring.jpg|Silberring
Datei:Kupfertopasring.jpg|Kupfertopasring
Datei:Ebenerzring.jpg|Ebenerzring
</gallery>

Einfügen eines Links zur Bildbeschreibungsseite

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 Bild einen Doppelpunkt setzt: Aus [[:Datei:Bebilderung.png|Siehe Hier]] wird Siehe Hier.


Diese Seite basiert auf der Seite Hilfe:Bilder aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.
Abgerufen von „https://www.elderscrollsportal.de/wiki/index.php?title=Hilfe:Bilder&oldid=115439“
Oben Unten
Zurück