Hilfe:Bilder: Unterschied zwischen den Versionen

Auf der Stupidedia können Bilder eingebunden werden. Dazu gibt es verschiedenen Möglichkeiten, die auf dieser Seite erklärt werden.

Grundsätzlich können nur Bilder, die sich auf unseren Servern befinden, eingebunden werden, Hotlinking von anderen Domains ist nicht möglich. Das hat verschiedene technische und urheberrechtliche Gründe. Es ist aber möglich, Bilder von anderen Seiten hier hochzuladen. Sobald das geschehen ist, können sie hier benutzt werden. Dabei ist natürlich das Urheberrecht zu beachten, jedes Bild muss lizenziert sein und auf der Stupidedia genutzt werden dürfen. Aber das ist alles auf Stupidedia:Lizenzen erklärt, hier geht es um die verschiedenen Möglichkeiten, Bilder einzubinden.

Audiodateien werden übrigens völlig anders eingebunden, das wird auf Stupidedia:Stupid-Audio erläutert.

Ein einzelnes Bild einbinden

Um ein Bild auf einer Seite zu benutzen, muss man auf es verlinken. Genau genommen auf seine Dateibeschreibungsseite: [[Datei:Beispiel.jpg]] wird zu .

Du musst es ja wissen!

Nicht gut, oder? Meistens muss man ein Bild nicht direkt im Text anzeigen, sondern will es am Seitenrand haben. Evtl. auch mit Bildunterschrift oder in verschiedenen Größen. Dafür gibt es verschiedene Parameter, die durch Pipes (senkrechte Linien, also |) voneinander getrennt werden und hinter dem Dateinamen, aber vor den schließenden Klammern stehen. Z. B. erzeugt [[Datei:Beispiel.jpg|thumb|150px|Du musst es ja wissen!]] den Kasten mit Bild rechts. Die Reihenfolge der Parameter ist egal, wichtig ist nur, dass der Dateiname am Anfang steht. Aber alles schön der Reihe nach.

Darstellung

Ein Bild kann auf verschiedene Weise dargestellt werden, dafür gibt es verschiedene Befehle. Gibt man keinen davon an, wird das Bild im Fließtext so eingebaut, wie es ist. Die meisten Befehle schließen einander aus, lediglich frameless und border können kombiniert werden:

• border: Das Bild wird in seiner normalen Größe angezeigt, aber mit einem dünnen, grauen Rand umgeben.
• frameless: Das Bild wird auf eine Standardgröße verkleinert, sofern es zu groß ist. Diese Größe hängt von den Einstellungen eines Benutzers ab und beträgt standardmäßig 180 Pixel in der Breite, die Höhe passt sich dementsprechend selbst an.
• frameless border: Vereint die Eigenschaften von border und frameless.
• frame: Zeigt das Bild in normaler Größe mit Rahmen und, sofern angegeben, Bildunterschrift an. Dabei kann es nicht im Fließtext stehen, sondern nur als eigenständiger Kasten, standardmäßig am rechten Seitenrand. Mit diesem Befehl kann die Bildgröße nicht geändert werden.
• thumb: Wie frame, allerdings möglicherweise verkleinert auf Standardgröße. Die Größe kann verändert werden und rechts neben der Bildunterschrift wird ein Icon angezeigt, das auf die Dateibeschreibungsseite verlinkt.

Ausrichtung und Textumfluss

Es gibt vier Befehle, mit denen man das Bild horizontal ausrichten kann:

• right: Das Bild wird am rechten Seitenrand angezeigt und vom Text umflossen. Standardeinstellung bei thumb und frame.
• left: Wie right, nur halt links. Es kann allerdings zu optischen Unschönheiten kommen, falls sich direkt neben dem Bild Listen befinden.
• center: Zentriert das Bild in der Mitte, allerdings wird es dann nicht vom Text umflossen.
• none: Richtet das Bild gar nicht aus, zeigt es aber als Block an, selbst, wenn es direkt im Fließtext notiert wird.

Bilder, die innerhalb von Fließtext stehen, können nicht horizontal, dafür aber vertikal ausgerichtet werden:

• top: Oberer Zeilen- und oberer Bildrand stehen auf einer Höhe, das Bild hängt also unten raus, wenn es größer ist.
• bottom: Wie top, nur umgekehrt.
• middle: Standard, das Bild wird mittig zentriert.

Es gibt noch weitere Befehle, die aber mitunter Probleme verursachen und sich auch nur in Details von den oben genannten Unterscheiden.

Größe ändern

Die Größe des Bildes kann auf unterschiedliche Weise geändert werden, außer bei frame, da geht es gar nicht. Bei thumb kann das Bild nur verkleinert werden, nicht vergrößert. Die Größe wird immer in Pixeln angegeben, also so: 200px.

• 200px: Das Bild ist 200 Pixel breit, die Höhe passt sich dementsprechend an.
• x200px: Das Bild ist 200 Pixel hoch, die Breite passt sich an.
• 200x200px: Das Bild ist maximal 200 Pixel breit und maximal 200 Pixel hoch.
• upright=X: Nur bei Hochformat-Bildern sinnvoll. Wenn bei thumb oder frameless/frameless border keine Größe angegeben ist, wird das Bild auf die Breite skaliert, die der Nutzer in den Einstellungen angegeben hat. Dadurch werden Hochformat-Bilder (flächenmäßig) größer als Querformat-Bilder. Mit upright=GRÖSSENVERHÄLTNIS werden Hochformat-Bilder stattdessen auf die entsprechende Höhe skaliert.
  Beispiel: Ein Querformat-Bild der Größe 500x200 wird für Nutzer A, der eine Thumbnailgröße von 150px eingestellt hat, auf 150x80 skaliert. Ein Hochkantbild von 200x500 würde auf 150x375 skaliert. Mit upright=0.4 (200/500 = 0.4) wird es stattdessen auf 80x150 skaliert.

Bildunterschrift/Mouseover-Text

Alles, was keinem Befehl entspricht, wird als Bildunterschrift oder Mouseover-Text angenommen. Bildunterschriften gibt es nur bei frame und thumb.

Sonstige Befehle

Es gibt noch eine Reihe weiterer Befehle für erweiterte Funktionen, die allerdings etwas anders notiert werden. Man schreibt den Befehl, dahinter ein Gleichheitszeichen und dann einen (mehr oder weniger) beliebigen Wert. Für normale Artikel sind sie in der Regel nicht nötig, werden aber der Vollständigkeit halber hier erwähnt:

• link=Bla: Verlinkt das Bild auf die Seite Bla. Normalerweise ist die Bildbeschreibungsseite verlinkt. Lässt man Bla weg, schreibt also nur link=, wird das Bild nicht verlinkt. Auch volle URLs sind möglich, mit denen man z. B. auf externe Seiten verweisen kann.
• class=blubb: Weist das Bild der HTML-Klasse „blubb“ zu.
• alt=Text: Statt der Bildunterschrift, des Mouseover-Textes oder des Dateinamens wird im Falle, dass das Bild nicht geladen werden kann, dieser Text angezeigt.

Anwendungsbeispiele

Das waren jetzt sehr viele Details, fassen wir die wichtigsten Codes also kurz zusammen:

1. [[Datei:Beispiel.jpg]] zeigt das Bild im Fließtext an, gut geeignet also z. B. für Smileys auf Diskussionsseiten.
2. [[Datei:Beispiel.jpg|thumb]] verschiebt das Bild an den rechten Seitenrand und schrumpft es auf 180 Pixel Breite (bzw. je nach Einstellung eine andere Größe). Das Bild erhält einen Rahmen und wird vom Text umflossen, ohne ihn zu unterbrechen.
3. [[Datei:Beispiel.jpg|thumb|left]] funktioniert wie #2, nur links statt rechts. Kann bei Listen unschön aussehen.
4. [[Datei:Beispiel.jpg|thumb|300px]] ist wie #2, nur mit 300 Pixeln Breite.
5. [[Datei:Beispiel.jpg|thumb|left|300px]] bewirkt das Gleiche wie #2, nur links und 300 Pixel Breite.
6. [[Datei:Beispiel.jpg|thumb|Beliebiges Geblubber]] fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #2.
7. [[Datei:Beispiel.jpg|thumb|left|Beliebiges Geblubber]] fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #3.
8. [[Datei:Beispiel.jpg|thumb|300px|Beliebiges Geblubber]] fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #4.
9. [[Datei:Beispiel.jpg|thumb|left|300px|Beliebiges Geblubber]] fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #5.

Natürlich sind fast beliebige Kombinationen möglich, das waren nur die wichtigsten. Probier ruhig in unserem Labor verschiedene Möglichkeiten aus.

Kleinigkeiten

Bilder machen sich am besten am Anfang des jeweiligen Abschnitts, also direkt unter der Überschrift. Sie sollten dann thumb enthalten und am besten rechts ausgerichtet sein. Mehrere Bilder werden automatisch untereinander angeordnet.

Manchmal, grad bei höheren Auflösungen, können am Rand ausgerichtete Bilder in den nächsten Abschnitt ragen und dort das Layout zerschießen. Sollte das passieren, kann über der jeweiligen Überschrift {{Clear}} platziert werden.

Bildergalerien

Einzelne Bilder sind gut, Galerien sind besser. Zumindest hin und wieder. Eine Galerie erstellt man folgendermaßen:

<gallery>
Beispiel.jpg
Stop Hand.png|Man kann auch lustige Kommentare dazu schreiben
Beispiel.jpg|Man kann hier auch <span style="color:red">lustige</span> [[Hilfe:Formatierung|Formatierungen]] verwenden.
…
</gallery>

wird zu

• 
• 

  Bildbeschreibungen kommen hinter den Strich.

• 

  Man kann hier auch lustige Formatierungen verwenden.

Mehr dazu bei den selbsternannten Experten der Wikipedia