Bilder

Autoren (Grundlagen)

< Verweise | Dokumentations-Index | Grundlegende Textformatierungsregeln >

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ß. -]

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:

(Edit Section ↓)

   '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'''

Besuche PmWiki

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

(Edit Section ↓)

Beschriftung und umflossene Bilder

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

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

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%%

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.

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:

Verwende '%block rframe%', um mehrere Bilder mit Text in einem umflossenen Rahmen rechts untereinander anzuordnen, also Text links, Rahmen rechts und Bilder abwechselnd mit Text in dem Rahmen untereinander.

%block rframe width=300px%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.\\\
http://pmichaud.com/img/misc/bubble.jpg\\
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.%%
Der Text, der dem definierten Rahmen folgt, umfließt den Rahmen an der
linken Seite, wie es bei 'rframe' zu erwarten war. Die Bilder werden in den
Rahmen untereinander gesetzt. Der Text ist wunderbar als Bildunterschrift
dem darüberliegenden Bild zugeordnet. Das geschieht hier durch den Einsatz
von [=\\=] direkt nach dem URL des Bildes und am Ende der Zeile. Der Text
steht dann in der nächsten Zeile. Die Bilder mit ihren Unterschriften sind
voneinander durch eine zusätzliche Zeile getrennt dadurch, dass hier
[=\\\=] nach dem ersten Text eingesetzt wurde. Auf die Zeilentrennung durch
[=\\=] und [=\\\=] kann nicht verzichtet werden, da sonst der Block mit dem
Wikistil unterbrochen würde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Der Text, der dem definierten Rahmen folgt, umfließt den Rahmen an der linken Seite, wie es bei 'rframe' zu erwarten war. Die Bilder werden in den Rahmen untereinander gesetzt. Der Text ist wunderbar als Bildunterschrift dem darüberliegenden Bild zugeordnet. Das geschieht hier durch den Einsatz von \\ direkt nach dem URL des Bildes und am Ende der Zeile. Der Text steht dann in der nächsten Zeile. Die Bilder mit ihren Unterschriften sind voneinander durch eine zusätzliche Zeile getrennt dadurch, dass hier \\\ nach dem ersten Text eingesetzt wurde. Auf die Zeilentrennung durch \\ und \\\ kann nicht verzichtet werden, da sonst der Block mit dem Wikistil unterbrochen würde.

(Edit Section ↓)

Bilder skalieren

Um die Größe eines Bildes mittels 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 Dateigröße. Daher ist das Skalieren mittels Wikistilen nicht akzeptabel, um eine Seite voller "verkleinerter" Bilder zu erzeugen.

Wenn man ein Bild in einem Link skalieren will, muss man die Größe vor dem Link angeben und alles mit einem %% abschließen.

%width=60px%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \
%width=60%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \
%width=10pct%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \
%height=60%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \

Um das Linkziel in einem neuen Browserfenster (oder Tab) zu öffnen, stellt man dem Link ein %newwin% voran.

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

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-]]]

Blase

Büroklammern

Rock On

(Edit Section ↓)

Bilder als Verweise

Um Bilder als Links einzusetzen, gibt man ein Bild anstelle des Linktextes an.

[[PmWikiDe/Links | http://pmichaud.com/img/2003/atc-1.gif"Informationen
über Wiki-Links"]]

(Edit Section ↓)

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

Fließtext ist, genau wie Hinweise am Mauszeiger, in Rahmen möglich.

>>lframe width=130px<<
%thumb width=130% [[http://pmichaud.com/img/misc/bubble.jpg |
http://pmichaud.com/img/misc/bubble.jpg"Lass die Blase platzen"]] | [--Ein
langer Text als Bildunterschrift für ein Bild wie
[[http://pmichaud.com/img/misc/bubble.jpg | die Blase]]. Dies ist nur dazu
da, ein bisschen Fließtext in dem Rahmen zu haben.--]
>><<

Ein langer Text als Bildunterschrift für ein Bild wie die Blase. Dies ist nur dazu da, ein bisschen Fließtext in dem Rahmen zu haben.

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.

(Edit Section ↓)

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

(Edit Section ↓)

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

Wenn ich ein Bild mit rframe oder rfloat einbinde und direkt dahinter einen neuen Seitenabschnitt mit ! eröffne, ist die Überschrift unterhalb des Bildes anstatt links daneben. Warum?

Die CSS-Angaben für Überschriften wie ! enthalten ein clear:both-Element, das dieses Verhalten erzeugt. Redefinieren Sie die CSS lokal, wenn Sie dieses Verhalten beenden wollen. Ich denke allerdings, dass die Unterstreichung der Unterschrift weitere Anpassungen nötig macht. Vielleicht setzen Sie die Überschrift einfach in fett und setzen Sie vier Bindestrichrte darunter ---- , um den neuen Abschnitt abzutrennen. Das erspart Ihnen an den Kerndefinitionen herumzufummeln.

Anders als die lframe- und rframe-Direktiven berücksichtigt die cframe-Direktive die Breitenangaben mit width nicht vollständig. Während der Rahmen selbst die gewünschte Größe annimmt, wird ein eingeschlossenes Bild nicht skaliert und behält seine ursprüngiche Größe. Der Effekt tritt sowohl im IE als auch im FF auf. Oben ist ein Beispiel dazu bei dem Standardbeispiel eingefügt. example above.

Wie kann ich eine Tabelle mit Bildern in eine nummerierte Liste einfügen?

Die Bilder sollen Hinweise am Mauszeiger haben (Caption genannt). Ich kann keine einfache Tabelle einsetzen, weil Bilder (augenscheinlich) keine Captions in einfachen Tabellen haben können (Beispiel 1). Ich kann anscheinend auch keine Tabellendirektiven einsetzen, weil ich diese nicht innerhalb einer Liste einsetzen kann, ohne die Liste zu beenden und nachfolgend einen Neustart der Nummerierung zu erzeugen (Beispiel 2).

Tabellendirektiven müssen in der ersten Spalte beginnen.

(Edit Section ↓)

Beispiel 1

# Erster Punkt
## Erster Unterpunkt
   || border=0 align=center
   ||
http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 1''' ||
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 2''' ||
## Zweiter Unterpunkt
# Zweiter Punkt

Erster Punkt
1. Erster Unterpunkt
  | Bild 1 | Bild 2
2. Zweiter Unterpunkt
Zweiter Punkt

Beachten Sie: Caption (eingeleitet durch einen senkrechten Strich) wird nicht erkannt, es wird ein fehlerhafter, verwirrender Strich angezeigt, die Unterschrift ist nicht unter den Bildern.

(Edit Section ↓)

Beispiel 2

# Erster Punkt
## Erster Unterpunkt
(:table border=0 align=center
margin-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 2'''
(:tableend:)
## Zweiter Unterpunkt
(:table border=0 align=center
padding-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper
clips" | '''Bild 2'''
(:tableend:)
# Zweiter Punkt

Erster Punkt
1. Erster Unterpunkt

Bild 1

Bild 2

Zweiter Unterpunkt

Bild 1

Bild 2

Zweiter Punkt

Benutzen Sie Stile für die Einrückung, Sie müssen die Nummerierung neu aufsetzen, siehe Wikistile

(Edit Section ↓)

Noch besser

# Erster Punkt
## Erster Unterpunkt
   || border=0 align=center
   ||
http://pmichaud.com/img/misc/pc.jpg"Paper
clips"[[<<]]'''Bild 1''' ||
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Paper
clips"[[<<]]'''Bild 2''' ||
## Zweiter Unterpunkt
# Zweiter Punkt

Erster Punkt
1. Erster Unterpunkt
  
  Bild 1
  Bild 2
2. Zweiter Unterpunkt
Zweiter Punkt

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.

Fügen Sie Folgendes in die /local/config.php ein:

DisableMarkup('img');
$ImgExtPattern = "$^";

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"

Wie mache ich das, dass ein Bild, das ich einfüge, innerhalb der P-Tags des dazugehörenden Absatzes bleibt und nicht in einem DIV-Abschnitt landet?

Wenn Sie das nur für ein einzeles Bild brauchen, setzen Sie [==] an den Zeilenanfang wie in:

[==] http://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif

Ein [==] am Zeilenanfang bewirkt, dass das danach Folgende noch als zum Absatz dazugehörend angesehen wird.

Gibt es einen Weg, eine BMP anzuhängen und das Bild in der Seite anzuzeigen anstatt des Links darauf?

Fügen Sie Folgendes in die /local/config.php ein:
$ImgExtPattern = "\\.(?:gif|jpg|jpeg|png|bmp|GIF|JPG|JPEG|PNG|BMP)";
Bedenken Sie, dass BMP-Bilder nicht komprimiert sind und deshalb sehr groß sind. Sie sollten sie lieber vorher in das PNG-Format umwandeln (verlustfrei) oder ins JPG-Format (verlustbehaftet). Sie reduzieren die Dateigröße um den Faktor 5-20.

Gibt es einen Weg, eine Tabelle links oder rechts neben einem Bild zu bekommen?

Ja, siehe TableAndImage.

< Verweise | Dokumentations-Index | Grundlegende Textformatierungsregeln >

Übersetzung von PmWiki.Images Originalseite auf PmWikiDe.Images - Rückverweise
Zuletzt geändert:
PmWikiDe.Images am 10.06.2012
PmWiki.Images am 13.09.2013