Hilfe:Bilder: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (Linkbild)
(Größe ändern: Umständliche Erklärung zu upright hinzugefügt)
 
(12 dazwischenliegende Versionen von 6 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
__notoc__
+
<div style="background: lightyellow; border: 3px dotted black; padding: 5px;">
 +
Auf der Stupidedia können '''Bilder''' eingebunden werden. Dazu gibt es verschiedenen Möglichkeiten, die auf dieser Seite erklärt werden.
  
{| align=center style="background:lightyellow; border: 3px dotted black; font-size: 100%; width: 100%;"
+
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 [[Stupidedia:Hochladen|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.
|<br style=clear:both />
 
<div style="float:right;"><div class="parseHTML"><nowiki>
 
Wie Bilder hochgeladen werden, zeigt dir dieses Video genau:<br>
 
<object width="445" height="364"><param name="movie" value="http://www.youtube.com/v/JG6yDpiOw6Q&hl=de_DE&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JG6yDpiOw6Q&hl=de_DE&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed></object><br>
 
</nowiki></div>
 
<small>Dieses Video wurde erstellt von [[Benutzer:Sky]]</small>
 
</div>
 
== Bilder ==
 
Bilder können direkt auf den Stupidedia-Server geladen werden, wenn ihre Lizenzen das erlauben und sie mit korrekten und vollständigen Quellenangaben versehen werden.<br>
 
'''Bilder ohne korrekte Lizenz und/oder ohne korrekte bzw. unvollständige Quellenangabe werden innerhalb von 24 Stunden wieder gelöscht.''' Beachtet hierzu die [[Stupidedia:Bilderlizenzen|Lizenzbestimmungen]].<br>Um ein Bild hochzuladen, benutzt einfach den Link "Hochladen" unter der Suchleiste oder [[Spezial:Upload|'''klickt hier drauf''']].
 
  
<center>'''<font color="red">Extern eingebundene Bilder sind nicht erlaubt und werden bei Sichtung entfernt!</font>'''</center>
+
Audiodateien werden übrigens völlig anders eingebunden, das wird auf [[Stupidedia:Stupid-Audio]] erläutert.
<div style=font-size:90%><br>'''Weshalb?'''<br>
 
Bis zum Sommer 2007 hatten alle User der Stupidedia noch die Möglichkeit, externe Bilder in die Artikel einzubinden. Technisch geht dies auch immer noch. Anfangs nutzten viele Schreiber externe Bilder für ihre Artikel. Nur ist es so, dass stupidedia.org gibt inzwischen schon länger als zwei Jahre existiert und so kam es vermehrt zu fehlenden Bildern. Wenn ein Bild bei uns "extern eingebunden" ist, haben wir keine Kontrolle darüber, ob es das Bild nach einiger Zeit überhaupt noch unter der angegebenen/verwendeten URL gibt! So fanden sich plötzlich viele viele Artikel, die nur noch den Quelltexte zu externen Bildern hatten, die es dort aber gar nicht mehr gab. Da solche Artikel niemandem nützen und der Humor vieler Artikel ja u.a. auf der Bebilderung beruht oder durch sie verstärkt wird, trennten wir uns von extern eingebundenen Bildern. Verständlich, oder?!</div>
 
  
=== Standardbefehle um Bilder einzubinden ===
+
== Ein einzelnes Bild einbinden ==
Bilder kann man entweder normal, mit Rahmen oder als Thumbnail darstellen, dazu muss folgendes angegeben werden:
+
Um ein Bild auf einer Seite zu benutzen, muss man auf es verlinken. Genau genommen auf seine ''Dateibeschreibungsseite'': <code><nowiki>[[Datei:Beispiel.jpg]]</nowiki></code> wird zu [[Datei:Beispiel.jpg]].
{| border="2" cellpadding="3" style="border-collapse: collapse" align="center" width="75%"
 
! Form
 
! Ergebnis
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG]]</nowiki>
 
|
 
Bild in Originalgröße ohne Rahmen
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG|Text]]</nowiki>
 
|
 
Kleiner Infotext hinzu
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG|framed]]</nowiki>
 
|
 
Das Bild behält seine Größe immer noch, wird aber in einen Rahmen gesetzt und landet rechts.
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG|framed|left|Text]]</nowiki>
 
|
 
Das Bild im Rahmen steht links neben dem fortlaufendem Artikel mit einem kleinen Zusatz darunter.
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG|thumb]]</nowiki>
 
|
 
Das Bild bekommt einen Rahmen und wird auf 100px skaliert
 
|-
 
|
 
<nowiki>[[Datei:Beispiel.JPG|thumb|left|123px|Text]]</nowiki>
 
|
 
Der Text erscheint unter dem Rahmen und die Größe wird in Pixel angegeben. Diese Größe ist natürlich beliebig verstellbar. Das Bild wandert auf die linke Seite.
 
|}
 
==== Normal ====
 
'''<code><nowiki>[[Datei:Dateiname]]</nowiki></code>''' - Bindet das Bild in voller Größe an der Stelle ein, wo es im Text steht. Steht dieser Code ganz links, so ist auch das Bild links ausgerichtet.
 
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png]]</nowiki></code>''' wird zu:<br>
 
[[Datei:Football-small.png]]
 
==== Rahmen ====
 
'''<code><nowiki>[[Datei:Dateiname|framed]]</nowiki></code>''' - Bindet das Bild in voller Größe ein. Das Bild wird hiermit standardmäßig nach '''rechts''' ausgerichtet und hat einen Rahmen.
 
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|framed]]</nowiki></code>''' wird zu:<br>
 
[[Datei:Football-small.png|framed]]<br style=clear:both />
 
==== Thumbnail ====
 
'''<code><nowiki>[[Datei:Dateiname|thumb]]</nowiki></code>''' - Bindet das Bild in verminderter Größe ein. Das Bild wird hiermit standardmäßig nach '''rechts''' ausgerichtet und hat einen Rahmen. Die Thumbnailgröße könnt ihr in euren [[Spezial:Einstellungen|Einstellungen]] einstellen. Standard ist 180 Pixel Bildbreite. Das Symbol http://www.stupidedia.org/skins/common/images/magnify-clip.png kennzeichnet das Bild als Thumbnail. Um das Bild in voller Größe anzuzeigen, muss man es einfach anklicken. '''Hinweis:''' Im nachfolgenden Beispiel wird das Bild natürlich in voller Größe angezeigt, weil unser Beispielbild kleiner als 180 Pixel breit ist. Größere Bilder werden jedoch mit diesem Befehl kleiner angezeigt.
 
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|thumb]]</nowiki></code>''' wird zu:<br>
 
[[Datei:Football-small.png|thumb]]<br style=clear:both />
 
  
=== Größe einstellen ===
+
[[Datei:Beispiel.jpg|thumb|150px|Du musst es ja wissen!]]
Bei hochgeladenen Bildern kann man die gewünschte Größe einstellen. Ihr müsst also ein Bild nicht so groß oder so klein hochladen, wie ihr es gerne einbinden würdet. Die Bildgröße lässt sich beim normalen Befehl und beim Thumbnail einstellen, <u>nicht aber beim Rahmenbefehl (framed)</u>. Die Bildgröße wird in Pixel angegeben. Dieser Wert stellt die Breite des Bildes ein (nur die Breite kann eingestellt werden, die Höhe passt sich danach an). Bilder können - unabhängig von ihrer Größe - entweder vergrößert oder verkleinert dargestellt werden. Beides ist möglich. <u>Bei Thumbnails kann man das Bild nur kleiner machen wie es ist, nicht größer!</u> '''Größer funktioniert nur mit dem normalen Befehl!''' Dies geschieht folgendermaßen:
+
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 <code>|</code>) voneinander getrennt werden und hinter dem Dateinamen, aber vor den schließenden Klammern stehen. Z. B. erzeugt <code><nowiki>[[Datei:Beispiel.jpg|thumb|150px|Du musst es ja wissen!]]</nowiki></code> 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.
  
Kleiner: '''<code><nowiki>[[Datei:Dateiname|40px]]</nowiki></code>'''<br>
+
=== Darstellung ===
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|40px]]</nowiki></code>''' Wird zu: [[Datei:Football-small.png|40px]]<br>
+
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:
Größer: '''<code><nowiki>[[Datei:Dateiname|100px]]</nowiki></code>'''<br>
+
* ''border'': Das Bild wird in seiner normalen Größe angezeigt, aber mit einem dünnen, grauen Rand umgeben.
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|100px]]</nowiki></code>'''Wird zu: [[Datei:Football-small.png|100px]]<br>
+
* ''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.
Die Werte lassen sich beliebig frei Schnauze einstellen. Bei Thumbnails schreibt man einfach hinter den jeweiligen Befehl dann die Bildgröße nach einem weiteren senkrechten Strich | dahinter, zum Beispiel so: '''<code><nowiki>[[Datei:Football-small.png|thumb|30px]]</nowiki></code>''', was dann zu folgendem wird:
+
* ''frameless border'': Vereint die Eigenschaften von ''border'' und ''frameless''.
[[Datei:Football-small.png|thumb|30px]]<br style=clear:both />
+
* ''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.
=== Ausrichtung ===
+
* ''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.
Bilder können in 3 verschiedene Richtungen ausgerichtet werden. Dies funktioniert mit allen 3 Befehlen (Normal, Rahmen und Thumbnail). Dazu trennt man den Befehl mit einem weiteren senkrechten Strich | und fügt dann entweder '''left''', '''center''' oder '''right''' ein. Bei Rahmen und Thumbnails ist das '''right''' nicht nötig, weil diese Bilder immer nach rechts ausgerichtet werden. Den '''right''' Befehl braucht man also nur für die normale Variante zu nehmen. Hier einige Beispiele:
 
*Beispiel 1: '''<code><nowiki>[[Datei:Football-small.png|right]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|right]]<br style=clear:both />
 
*Beispiel 2: '''<code><nowiki>[[Datei:Football-small.png|framed|center]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|framed|center]]<br style=clear:both />
 
*Beispiel 3: '''<code><nowiki>[[Datei:Football-small.png|thumb|left]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|thumb|left]]<br style=clear:both />
 
=== Beschreibung ===
 
Zu jedem Bild sollte man auch eine Beschreibung schreiben. Dazu wird ein weiterer senkrechter Trennstrich gemacht, wo ihr dann schreibt was dort rein soll.
 
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|thumb|Test]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|thumb|Test]]<br style=clear:both />
 
=== Zusammenfassung ===
 
Ihr seht also, daß sich die ganzen Befehle in vielen Möglichenkeiten variieren lassen. Wenn ihr nun zum Beispiel ein Bild als thumbnail darstellen wollt, das verkleinert wird, nach links ausgerichtet ist und beschriftet ist, gebt ihr in dem Fall folgendes ein:<br>
 
'''<code><nowiki>[[Datei:Football-small.png|thumb|40px|left|Test]]</nowiki></code>''' Daraus wird dann:[[Datei:Football-small.png|thumb|40px|left|Test]]<br style=clear:both />
 
'''Hinweis:''' Ihr braucht nur die Befehle anzugeben, die ihr auch verwenden wollt. Wenn ihr z.B. das Bild einfach ganz normal als Thumbnail (standardmäßig nach rechts ausgerichtet) ohne Größenveränderung, aber mit Beschreibung platzieren wollt, so lasst einfach die Befehle für Ausrichtung und Bildgröße weg!<br>
 
'''Übrigens:''' Bilder positioniert man am besten direkt an den Anfang eines Artikels, und bei Zwischenüberschriften direkt darunter. Damit man den nächsten Absatz nicht zerdrückt, sollte man VOR dem nächsten Absatz den Code '''<nowiki><br style=clear:both /></nowiki>''' platzieren. Also bei einer Zwischenüberschrift kommt zuerst darunter das Bild, dann der Text und DANACH dieser Code.
 
  
=== Galerie ===
+
=== Ausrichtung und Textumfluss ===
Mehrere Bilder kann man in einer Galerie darstellen. Dazu kann man auch Beschreibungen einfügen. Die Bilder werden hierbei nicht in die eckigen Klammern [[]] geschrieben!<br>
+
Es gibt vier Befehle, mit denen man das Bild horizontal ausrichten kann:
Nachfolgendes Beispiel sollte selbsterklärend sein ;-)
+
* ''right'': Das Bild wird am rechten Seitenrand angezeigt und vom Text umflossen. Standardeinstellung bei ''thumb'' und ''frame''.
<pre><gallery>
+
* ''left'': Wie ''right'', nur halt links. Es kann allerdings zu optischen Unschönheiten kommen, falls sich direkt neben dem Bild Listen befinden.
Datei:Gold.png
+
* ''center'': Zentriert das Bild in der Mitte, allerdings wird es dann nicht vom Text umflossen.
Datei:Silber.png|Test
+
* ''none'': Richtet das Bild gar nicht aus, zeigt es aber als Block an, selbst, wenn es direkt im Fließtext notiert wird.
Datei:Bronze.png|Test 2
 
</gallery></pre>
 
Daraus wird dann:
 
<gallery>
 
Datei:Gold.png
 
Datei:Silber.png|Test
 
Datei:Bronze.png|Test 2
 
</gallery>
 
  
=== Bild in Bild ===
+
Bilder, die innerhalb von Fließtext stehen, können nicht horizontal, dafür aber vertikal ausgerichtet werden:
Wenn ihr ein Bild in ein anderes hineinsetzen wollt geht das zum Beispiel so :
+
* ''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.
  
<nowiki>[[Datei:Name des Hauptbildes|Größe in px]]
+
=== Größe ändern ===
<div style="position:relative; top (bottom):-Position von oben (oder unten) in px; left (oder right):Position von links (oder rechts) in px ;">[[Datei:Name des einzufügenden Bildes|Grösse in px]]</div></nowiki>
+
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: <code>200px</code>.
 +
* ''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.<br />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.
  
Lange Rede, kurzer Sinn, ein Beispiel: <br>
+
=== Bildunterschrift/Mouseover-Text ===
<nowiki>[[Datei:Weltraum.jpg|80px]]
+
Alles, was keinem Befehl entspricht, wird als Bildunterschrift oder Mouseover-Text angenommen. Bildunterschriften gibt es nur bei ''frame'' und ''thumb''.
<div style="position:relative; top:-65px; left:25px;">[[Datei:Feuerschale2.gif]]</div></nowiki>
 
  
wird zu :
+
=== 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.
  
[[Datei:Weltraum.jpg|80px]]
+
=== Anwendungsbeispiele ===
<div style="position:relative; top:-65px; left:25px;">[[Bild:Feuerschale2.gif]]</div>
+
Das waren jetzt sehr viele Details, fassen wir die wichtigsten Codes also kurz zusammen:
=== Linkbild ===
+
# <code><nowiki>[[Datei:Beispiel.jpg]]</nowiki></code> zeigt das Bild im Fließtext an, gut geeignet also z. B. für Smileys auf Diskussionsseiten.
*3 Möglichkeiten wie ihr ein Bild zu einem Link machen könnt, so daß man beim draufklicken auf einem Artikel landet:
+
# <code><nowiki>[[Datei:Beispiel.jpg|thumb]]</nowiki></code> 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.
'''1. Wikicode'''
+
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|left]]</nowiki></code> funktioniert wie #2, nur links statt rechts. Kann bei Listen unschön aussehen.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|300px]]</nowiki></code> ist wie #2, nur mit 300 Pixeln Breite.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|left|300px]]</nowiki></code> bewirkt das Gleiche wie #2, nur links und 300 Pixel Breite.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|Beliebiges Geblubber]]</nowiki></code> fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #2.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|left|Beliebiges Geblubber]]</nowiki></code> fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #3.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|300px|Beliebiges Geblubber]]</nowiki></code> fügt dem Bild zusätzlich eine Bildunterschrift hinzu, ansonsten wie #4.
 +
# <code><nowiki>[[Datei:Beispiel.jpg|thumb|left|300px|Beliebiges Geblubber]]</nowiki></code> 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 [[Stupidedia:Labor|unserem Labor]] verschiedene Möglichkeiten aus.
  
<nowiki>[[Datei:Bla.png|link=Ziel]]</nowiki>
+
=== 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.
  
'''2. html'''
+
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 <code>{{[[Vorlage:Clear|Clear]]}}</code> platziert werden.
  
<nowiki><span class="plainlinks">[http://www.''Link der Zielseite'' http://www.''Bildlink (nicht Bild:!'')] </span></nowiki>
+
== Bildergalerien ==
 
+
Einzelne Bilder sind gut, Galerien sind besser. Zumindest hin und wieder. Eine Galerie erstellt man folgendermaßen:
'''3. imagemap'''
+
<pre>
 +
<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>
 +
</pre>
 +
wird zu
 +
<gallery>
 +
Beispiel.jpg
 +
Stop Hand.png|Bildbeschreibungen kommen hinter den Strich.  
 +
Beispiel.jpg|Man kann hier auch <span style="color:red">lustige</span> [[Hilfe:Formatierung|Formatierungen]] verwenden.
 +
</gallery>
  
<nowiki><imagemap>
+
Mehr dazu [[Wikipedia:de:Hilfe:Galerie|bei den selbsternannten Experten der Wikipedia]]
Datei:Name des Bildes
 
default
 
desc none
 
</imagemap></nowiki>
 
  
=== Sonstiges ===
+
{| border "1" cellpadding="1" cellspacing="0" class="wikitable" style="width:95%;align=center; border:2px solid grey"
Folgendes soll hier noch angesprochen werden:
 
  
#Wie ihr große Bilder oder auch Panoramabilder in ein Scrollfenster einfügen könnt, erfahrt ihr [[Vorlage:Scroll|'''hier''']]
+
|- style="font-size:7pt" align="center" valign="center"
#Lade keine urheberrechtlich geschützten Bilder in der Stupidedia hoch (siehe '''[[Spezial:Hochladen|hier]]''')!
+
| width="30%" | '''[[Stupidedia:Bilddatenbanken|Bilddatenbanken]]'''
#Ein Bild braucht eine Quelle '''und''' eine Lizenz. Suche am besten "freie Bilder", z.B. '''[[Stupidedia:Bilddatenbanken|HIER]]'''!
+
| width="17%" height="25"| '''[[Stupidedia:Richtlinien|Richtlinien]]'''
#Manche wenige Artikel brauchen gar keine Bilder.
+
| width="17%" | '''[[Stupidedia:Editierhilfe|Editierhilfe]]'''
#Achte auf die Platzierung! Der Artikel soll ja am Ende harmonisch wirken und nicht total durcheinander.<br><br>
+
| width="17%" | '''[[Stupidedia:Lizenzen|Hilfe zu Lizenzen]]'''
<center>'''Wenn ihr noch Fragen haben solltet, so stellt diese [[Stupidedia Diskussion:Userportal|hier]]'''</center>
+
| width="17%" | '''[[Spezial:Listadmins|Diktatoren]]'''
 
|}
 
|}

Aktuelle Version vom 15. April 2017, 16:39 Uhr

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 Beispiel.jpg.

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

Mehr dazu bei den selbsternannten Experten der Wikipedia

Bilddatenbanken Richtlinien Editierhilfe Hilfe zu Lizenzen Diktatoren

Linktipps: Faditiva und 3DPresso