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ß. -] |
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''' |
 Besuche PmWiki |
[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].
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%% |
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. 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 |
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.  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. |
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 |
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"]] |
 |
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/tuxist, 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
und der Benutzername lautet
und der System-Pfad zum Verzeichnis mit den WWW-Dateien könnte lauten
Wenn das Wiki im Wurzelverzeichnis installiert zu sein scheint
könnte der tatsächliche Systempfad zum Upload-Verzeichnis lautet
und nicht einfach nur
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 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.
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 |
|
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 |
|
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 |
|
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.
Übersetzung von PmWiki.Images
Originalseite auf PmWikiDe.Images - Backlinks
Zuletzt geändert:
PmWikiDe.Images am 10.06.2012
PmWiki.Images am 13.09.2013