Autoren (Grundlagen) (deutsche Übersetzung der Seite PmWiki.Images, Stand 2008-03-09)

Bilder in Seiten verwenden

Um ein Bild auf einer Seite zu platzieren, wird die Adresse (URL) der Bilddatei in den Quelltext der Wikiseite eingefügt. Ein alternativer Text (für Tooltip und Browser, die keine Bilder darstellen) wird in doppelte Anführungszeichen direkt nach der URL gesetzt. Außerdem kann noch durch einen senkrechten Strich (|) abgetrennt eine einfach formatierte Bildbeschriftung folgen. 

http://pmichaud.com/img/misc/pc.jpg"Büroklammern" | [- %newwin% Mit [[ (Wikipedia:Paper_clips | Büroklammern ]] zu arbeiten, macht Spaß. -]
Büroklammern
Mit Büroklammern zu arbeiten, macht Spaß.

Bilder können ebenso als hochgeladene Dateien (Attach:image.jpg) und InterMap-Verweise angegeben werden. Standardmäßig werden von PmWiki die folgenden Bildtypen unterstützt und automatisch als Bild erkannt: 

   'gif','jpg','jpeg','png','bmp','ico','wbmp',          # Bilder@]

(Siehe auch Hochladen von Dateien und die Hinweise unten für Bilder, die keine Endung besitzen).

Um einen Verweis auf ein Bild (wie http://www.pmichaud.com/img/misc/pc.jpg) zu setzen, anstatt es anzuzeigen, wird der Verweis in doppelte Klammern gesetzt, wie in [[http://www.pmichaud.com/img/misc/pc.jpg]] oder [[Attach:image.jpg]].

Damit ein Bild auf einen anderen Ort verweist, wird das Bild als Verweistext verwendet: 

[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]|Besuche '''PmWiki'''
PmWiki
Besuche PmWiki

[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].

Beschriftung und umflossende Bilder

Eine Beschriftung wird durch einen senkrechten Strich (|) gefolgt vom Beschriftungstext hinzugefügt. 

http://pmichaud.com/img/misc/pc.jpg"Büroklammern" | '''Abbildung 1'''
Büroklammern
Abbildung 1

Normalerweise werden Bilder auf gleicher Grundlinie wie der umgebende Text angezeigt. Um ein Bild zu zentrieren, benutzt man die Formatierungsanweisung %center%. Um ein Bild rechtsbündig auszurichten, benutzt man %right%. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. %center%http://pmichaud.com/img/misc/pc.jpg"Büroklammern"%%

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. %right% http://pmichaud.com/img/misc/gem.jpg%%

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Büroklammern

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Um ein Bild links oder rechts auszurichten, wobei der Text um das Bild herumfließt, werden die Wikistile %lfloat% und %rfloat% verwendet. 

%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''Das Bild ist linksbündig ausgerichtet, wobei Abstände definiert sind. Die Beschriftung ist zentriert. Der Text fließt rechts um das Bild.'''

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Rock on!

Das Bild ist linksbündig ausgerichtet, wobei Abstände definiert sind. Die Beschriftung ist zentriert. Der Text fließt rechts um das Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Die Formatierungsanweisung [[<<]] unterbricht um ein Bild herum fließenden Text und der Text wird am unteren Rand des Bildes fortgesetzt: 

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''Das Bild ist linksbündig ausgerichtet. Der Text fließt rechts um das Bild. Der Text nach der Formatierungsanweisung ''[@[[<<]]@]'' geht unter dem Bild weiter.'''
[[<<]]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Das Bild ist linksbündig ausgerichtet. Der Text fließt rechts um das Bild. Der Text nach der Formatierungsanweisung [[<<]] geht unter dem Bild weiter.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mit den Wikistilen %lframe% oder %rframe% wird ein Bild links- oder linksbündig ausgerichtet und zusätzlich ein Rahmen um das Bild herum angezeigt. Der Rahmen kann wiederum über Wikistile formatiert werden. 

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''Das Bild ist rechtsbündig ausgerichtet. Der Text fließt links um das gerahmte Bild.'''

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

%cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

Ein Beispiel um zu zeigen, was passiert, wenn die Breite des Bildes die über einen Wikistil definierte Breite des Rahmens übertrifft:
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

Rock on!

Das Bild ist rechtsbündig ausgerichtet. Der Text fließt links um das gerahmte Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ein Beispiel um zu zeigen, was passiert, wenn die Breite des Bildes die über einen Wikistil definierte Breite des Rahmens übertrifft:

Bilder skalieren

Um die Größe eines Bildes mitteils eines Wikistils zu ändern, kann %width=50px% oder %height=50px% vor das Bild gesetzt werden. %thumb% ist eine praktische Abkürzung für %width=100px%. 

%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%thumb% http://www.pmichaud.com/img/misc/bubble.jpg

Das Skalieren ändert nur, wie das Bild im Browser angezeigt wird, nicht das Bild selbst oder die übertragene Datengröße. Daher ist das Skalieren mittels Wikistilen nicht akzeptabel, um eine Seite voller "verkleinerter" Bilder zu erzeugen.

Durch %thumb% skalierte Bilder können in Rahmen ausgerichtet oder als Verweise verwendet werden (siehe oben). 

%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Blase-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Büroklammern-]
%lframe thumb% [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Besuche den Dokumentations-Index"]] | [[DocumentationIndex | [-Rock On-]]]
Burst the bubble
Blase
Clip the ticket
Büroklammern
Besuche den Dokumentations-Index
Rock On

Hinweise

  • Bilder ohne korrekte Dateiendung können durch hinzufügen einer "falschen" Endung zur URL angezeigt werden. Wenn bspw. die URL http://www.example.com/script/tux ist, wird eine gefälschte Anfrage mit der gewünschten Endung angehängt, bspw. http://www.example.com/script/tux?format=.png. Es würde auch schon ein Fragment wie im folgenden Beispiel reichen: http://example.com/script/tux#file.png.
  • Bilder lassen sich auch mit Hilfe von Prozentangaben skalieren: 
%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg

Schwierigkeiten mit dem Hochladen von Bildern? Für den Fall, dass beim Hochladen eines Bildes eine Fehlermeldung erscheint, dass das Hochladen aus irgendeinem Grund nicht funktioniert hat, gibt es hier ein paar mögliche, zu prüfende Fehlerquellen.
Angenommen, der Provider hat die Netzseite

http://www.website.com

und der Benutzername lautet

username

und der System-Pfad zum Verzeichnis mit den WWW-Dateien könnte lauten

/home/users/~username/public_html

Wenn das Wiki im Wurzelverzeichnis installiert zu sein scheint

/pmwiki

könnte der tatsächliche Systempfad zum Upload-Verzeichnis lautet

/home/users/~username/public_html/pmwiki/uploads

und nicht einfach nur

/pmwiki/uploads

So hat es jedenfalls bei mir geklappt.

Siehe auch

  • Das Kochbuch-Rezept Cookbook:BackgroundImages beschreibt, wie Hintergrundbilder in Tabellen, -zellen und Block-Elementen genutzt werden können. (Das Kochbuch-Rezept ist nur auf Englisch verfügbar.)

Quellen

Die Bilder auf dieser Seite stammen von http://www.flickr.com und stehen unter einer Creative Commons License.

<< Verweise | Dokumentationsindex | Grundlegende Textformatierungsregeln >>

Kann ich eine lokale vorliegende Bilddatei zum Wiki hinzufügen?

Ja, siehe Hochladen von Dateien.

Ist es möglich, auf ein Bild zu verweisen, ohne die komplette URL anzugeben?

Ja. Für Bilder, die als Anhänge zu Seiten hochgeladen wurden, lautet das Format Attach:Gruppenname/bild.gif. (Jedenfalls solange, wie Anhänge gruppenweise abgespeichert werden.) Auf ein anderes Bild auf dem aktuellen Server verweist man mit Path:/pfad/zu/bild.gif.

Wie kann ich eine Seite aus einer anderen Gruppe einbinden, die ein als Anhang so jener Seite hochgeladenes Bild enthält?

Binde diese Seite ganz normal mit (:include GruppenName.Seitenname:) ein. In der einzubindenden Seite (die das Bild enthält) ändere Attach:dateiname.ext zu Attach:{$Group}/dateiname.ext.

Why, if I put an image with rframe or rfloat and immediatly after that I open a new page section with ! the section title row is below the image instead of on the left side?

Because the CSS for headings such as ! contains an element clear:both which forces this behaviour. Redefine the CSS locally if you want to stop this happening, but I think the bottom border (that underlines the heading) would need further re-definition. I just use bolding for the title, and 4 dashes below ---- to separate a new section, and it saves the effort of fiddling with the core definitions.

Unlike the lframe and rframe directives, cframe does not fully honour the width setting. While the frame itself resizes to match the request, the enclosed image does not, and retains its original width. Effect is the same in IE and Fx. I've added an example beneath the standard example above.

How can I put a table of captioned images within a numbered list? I cannot use a simple table, because images cannot (apparently) have captions within a simple table (Example 1). I cannot seem to use the table directives, because I cannot get them to work within a list without ending the list and causing subsequent numbering to restart (Example 2).

Table directives must start in column 1

Example 1

# First item
## First subitem
   || border=0 align=center
   || http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1''' || %width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 2''' ||
## Second subitem
# Second item
  1. First item
    1. First subitem
      Paper clips | Figure 1Paper clips | Figure 2
    2. Second subitem
  2. Second item
Note caption (signified by bar) is not recognised, and an erroneous bar is displayed

Example 2

# First item
## First subitem
(:table border=0 align=center margin-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 2'''
(:tableend:)
## Second subitem
(:table border=0 align=center padding-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 2'''
(:tableend:)
# Second item
  1. First item
    1. First subitem
Paper clips
Figure 1
Paper clips
Figure 2
  1. Second subitem
Paper clips
Figure 1
Paper clips
Figure 2
  1. Second item
Use styles for indentation, you will have to resume the numbering, see Wiki styles

Not good enough

# First item
## First subitem
   || border=0 align=center
   || http://pmichaud.com/img/misc/pc.jpg"Paper clips"[[<<]]'''Figure 1''' || %width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper clips"[[<<]]'''Figure 2''' ||
## Second subitem
# Second item
  1. First item
    1. First subitem
      Paper clips
      Figure 1      		Paper clips
      Figure 2
    2. Second subitem
  2. Second item

Ist es möglich, das Anzeigen von Bildern komplett zu unterbinden? Ich habe bereits das Hochladen von Dateien abgeschaltet, möchte aber auch verhindern, dass externe Bilder auf meinen Wikiseiten angezeigt werden.

Warum funktioniert die Spezifikation mit pct nicht in Kombination mit lfloat und rfloat?

%rfloat width=10pct% http://pmichaud.com/img/misc/bubble.jpg"rfloat width 10%" 
%width=10pct% http://pmichaud.com/img/misc/bubble.jpg"width 10%" [[<<]]
%lfloat height=20pct% http://pmichaud.com/img/misc/bubble.jpg"lfloat height 20%" 
%height=20pct% http://pmichaud.com/img/misc/bubble.jpg"height 20%" [[<<]]
%width=10pct rfloat% http://pmichaud.com/img/misc/bubble.jpg"width 10% rfloat" 
%height=20pct lfloat% http://pmichaud.com/img/misc/bubble.jpg"height 20% lfloat"
rfloat width 10%
width 10%
lfloat height 20%
height 20%
width 10% rfloat
height 20% lfloat