User:I.R. Annie IP./Annie IP's 1st/Embed media

From Wikimedia Commons, the free media repository
Jump to: navigation, search
Sample on Any IP's Thumbnail

Notice to beloved visitors: This article is my way to merge hints from Commons:First steps, reverted work I did in de:Wikipedia:Bildertutorial/4 (DE), and my suggestion for German de:Hilfe:Bilder (DE) (at the time I write this - might be reverted soon). A copy of told suggestion can be found on de:User:W.:BilderBilder (DE). This "Embed media" article is being worked at hard, and still may take more than 24hrs to be finished to a presentable state (Zustand) which I would announce at COM:VP. Seemingly stupid red wikilinks may just mark terms which I at the moment cannot translate within reasonable time, or might be due to not being adapted to Commons and English WP yet.


  • Please do not edit this article unless your feedback at Commons talk:First steps or at my home would be approved by Annie IP, to avoid waist of your manpower and edit conflicts.
  • Please do not use this page's discussion page either. As soon as an agreement on the use of this article will be found, I might just cut out pieces form here, insert them on an appropriate place, and have this working copy deleted.
  • (DE) means links to pages in German language which might be of no use to anyone not speaking the language. I'll do my best to replace them by English links ASAP.
  • I apologize for my lack of perfect English. tx, ——Annie IP 10:00, 14 March 2006 (UTC)

Any media file from Commons may be used in any wiki. This page explains how to embed media in articles.

Beginners' ways to embed pictures[edit]

Example
Same, scaled to 100 px.
The better way to scale, by "upright=", refers to possible user settings. Default setting =0.7, to compensate for thumbnails of upright images.


  • Open the article, click edit and set your cursor beyond the line where the file's upper edge shall appear.
  • Remember: Picture size should always be appropriate to the amount of text. If text is too short, it might rather be experienced as a picture description. If, in very short articles, you decide to use a somewhat larger picture, keep the whole stuff within one standard screen page.
  • There is a quantity of tricks on formatting pictures, but you will achieve satisfying results by just using one of the three or four most important ones:

Use Thumbnails[edit]

The simplest and in most cases best way "to do it" is usings, small pictures which may be clicked, which are generated by [[Image:File:Filename.ext|thumb|description]]. Filename.ext means the complete name. [[Image:Example.png|thumb|Example]].
Such thumbnails automatically appear at the right edge of the screen, within a frame containing the description, too. The article's text will flow around the picture.

  • Preset thumbnail size is 180pixels; logged-in users may set sizes from 120 to 300 px in preferences.

Scale pictures[edit]

In case you want to show your picture in a certain size, you have to scale it. [[Image:Example.png|100px|Same, scaled to 100 px.]] will bring your thumbnail to this size and create a frame, including your description.

  • Scaling pictures is not desirable in many cases, as it would overran users' preference settings.

Prevent text flowing around pictures or media =[edit]

By <br style="clear:both;" /> you force the browser to display any following text only beyond anything above this tag, which is useful in case you want to finish a chapter by giving some samples.

Use pictures in talk[edit]

[[:Image:Annie IP's style Rotkehlchen.jpg|'''See this birdie!''' (picture)]],
will generate See this birdie! (picture). In talks, it would be disturbing to display pictures which one wants to talk about. The colon before „Image“ makes the difference! By clicking the link, you open the picture's description page, which makes such formatting less useful for articles.

Simple Annie IP's Picture Show[edit]

  • It's that easy to create a gallery:
<gallery>
Image:Filename1.jpg|Description_1
Image:Filename2.png|Description_2, and so on.
</gallery>

Gallery on Decision Tree Development

More delicate ways to use images[edit]

Bilder skalieren für Fuzzis[edit]

left|100px|Diese Beschreibung wird nur angezeigt, wenn die Maus über dem Bild steht

Überraschung! ;)) Dieses Bild kommt aus der de:WP; auf Commons liegt ein gleichnamiges anderes

Mit [[Bild:Exemplum JPEGis.jpg|thumb|left|100px|Diese Beschreibung wird nur angezeigt, wenn die Maus über dem Bild steht]] skalierst du das Bild und lässt es ohne Thumbnailrahmen und ohne direkt sichtbare Beschreibung am linken Seitenrand erscheinen.

Zuletzt: [[Image:Example.png|left|100px|Überraschung! ;)) Dieses Bild kommt aus der de:WP; auf Commons liegt ein gleichnamiges anderes]]


thumb|100px|Ausführliche Beschreibung, Bild rechtsbündig. thumb|left|100px|Bild links, die Beschreibung wird angezeigt. [[Bild:Exemplum JPEGis.jpg|thumb|100px|Ausführliche Beschreibung, Bild rechtsbündig.]] legt die Breite des generierten Thumbnails auf 100 Pixel fest. Die Höhe ergibt sich aus dem Seitenverhältnis. Das Bild steht, wenn keine Ausrichtung angegeben wurde, am rechten Seitenrand.

Um Bilder am linken Seitenrand zu platzieren, schreibst du [[Bild:Exemplum JPEGis.jpg|thumb|left|100px|Bild links, die Beschreibung wird angezeigt.]]

Pictures in original size[edit]

Option „framed“, z.B. [[Bild:Dateiname|framed|Beschreibung]] will display your picture framed, together with its description. Text written beyond the Image-tag will flow around your picture. [[Bild:Exemplum JPEGis.jpg|framed|Example, framed]] framed|Example, framed Blind text: lsd vbzwe9ue#üpi rn#zi#q toi äoiä#t küpi #u6i ükopfekihz76eadae#, zkü#ks#mber,erö#tzf. rozoökdf z..,poiumnipwemn! zj,wp+üoumnnuo; -.+üp,nuou o,+ürp,iupiumop, w.

Almost Blind Text, adopted from www, adapted by digital enhancement: Hervorragend! Nun sieht es wirklich vollständig aus. ;-) nein, nur ein Scherz. Ja saaache ma, bist Du? Ich schäme mich ja schon, zu arbeiten. Und den hab ich immer noch nicht aber egal. Wird nachgeholt. Freut mich, dass die Revision der Grafik Deine Zustimmung findet. Ich dachte, halt's so einfach wie möglich. Der ganze ist an sich schon derart verschwurbelt, versuch' besser gar nicht erst. Mal sehen, wann sich einer beschwert ;o)

Btw.: Wenn es etwas gibt, nur immer zur selben Zeit wie Du. Daß war im übrigen unglaublicher :-) längst eingestellt, da reicht es - denke ich. ;-) (Taken vrom ani blase by Annie IP. Zeit und Namen, Annie Kind, sind bekannt!!!)


Beispiel einer Beschreibung

Zwar lassen sich Bilder auch mit [[Bild:Dateiname|Beschreibung]] in Artikel einfügen (das Bild wird dann in Originalgröße und linksbündig angezeigt), doch zumindest im derzeitigen Browser firefox umfließt der Text das Bild nicht. Der Beschreibungstext wird nur angezeigt, wenn der Mauszeiger über dem Bild steht.

Zum Einbau in voller Größe sind nur Bilder geeignet, die deutlich kleiner sind als eine Bildschirmseite: bis zu rund 400x400 Pixel können in Einzelfällen geduldet werden. Bedenke bitte, dass das Einbinden großer Bilder auch die Ladezeit des Artikels verlängert!


Bilder im Text[edit]

Bilder links, rechts und zentriert ausrichten[edit]

Die Optionen left, right, center und none richten Bilder im Text aus:
[[Bild:Smile.png|left|Der Smiley ist...]] left|Der Smiley ist... Der Smiley ist ein vor allem im Chat beliebtes Emoticon. [[Bild:Smile.png|right|Ein ebensolcher Smiley am rechten Seitenrand]] right|Ein ebensolcher Smiley am rechten Seitenrand


Der tag center zentriert ein Bild horizontal innerhalb einer Zeile.

[[Image:Annie IP's joke -2- wikiWölfchens Späßchen.png|thumb|center|100px|Don't use Non-ASCII]]

Don't use Non-ASCII
  • In diesem Fall hat ein kleines Dummchen namens Annie IP eine Datei beim Hochladen mit deutschen Sonderzeichen benannt. In fremdsprachigen Browsern kann solches sich äußerst lästig auswirken!
  • Der Parameter none schaltet die automatische Ausrichtung von Thumbnails ab und stellt das Bild inline dar, was vor allem zum Einfügen von Thumbnails in Tabellen praktisch ist (siehe unten).
  • Die genannten Optionen lassen sich, jeweils durch senkrechte Striche getrennt, beliebig kombinieren, unbekannte Optionen ignoriert die Software üblicherweise.

Arranging several pictures[edit]

Galleries[edit]

Galleries will arrange files in rows by order of their listing. The number of items in one row may vary, depending on screen resolution. Standard = 4, but some wikipedia projects, e.g. enWP, deWP, frWP, allow to force a value, say "perrow=5", which is not the case with commons' galleries. Here, the lenght of the rows is automatically adapted to screen resolution, which is not always an advantage, concerning layout design.)

  • The tag {{Commons|Name_of_Gallery}}links to Name_of_Gallery from any wiki article.

<gallery perrow=5 caption="This is a gallery">
File:Annie IP's joke -2- wikiWölfchens Späßchen.png|Rather use ASCII characters for filenames (outdated, as of 2008).
File:Annie IP's Ready for dinner Cat.jpg|Ready-for-dinner styled cat.
and so on... </gallery>

Pictures within tables[edit]

Most difficult, but most flexible, is the use of tables for arranging pictures:

{| border="1" style="border-collapse:collapse" cellpadding="3"
!colspan="4"| German Cities around 1900
|-
| Dresden || [[Image:Dresden Kreuzkirche 1900.jpg|thumb|none|100px|Dresden, Kreuzkirche]]
| Hildesheim || [[Image:Hildesheim_um_1900.jpg|thumb|none|100px|Hildesheim]]
|}

German Cities around 1900
Dresden
Dresden, Kreuzkirche
Hildesheim
Hildesheim

See also (DE)[edit]

  • behandelt das Bildrecht ausführlicher als das Lies es bitte bald: Es kommt leider zu oft vor, dass Bilder wegen Lizenzproblemen oder fehlender Angaben wieder gelöscht werden müssen.
  • ...weitere Informationen auf de:Wikipedia:Artikel illustrieren.
  • Hilfe bei konkreten Problemen mit Bildbearbeitung bekommst Du in der de:Wikipedia:Bilderwerkstatt.
  • Wikipedianer haben auch eine Sammlung von Fototipps zusammengestellt.

Zuletzt eine Bitte:
Um dieses Tutorial weiter zu verbessern und spätere Einsteiger besser führen zu können, sind wir auf Dein Feedback angewiesen. Blieb eine für Dich wichtige Frage offen, dann sieh bitte zuerst, ob sie nicht in den FAQs beantwortet wird. Falls nicht, findest Du dort den richtigen Link, um sie zu stellen.

  • Bitte notiere keine Anmerkungen in die Diskussionsseiten der Unterseiten, die werden nämlich kaum gelesen. Solltest Du trotz der Warnung dort bereits etwas hinterlassen haben, so weise bitte auf darauf hin, damit Dein Beitrag nicht übersehen wird.

    Und jetzt: Mach's gut! Wir sehen uns. ;-)