Hier finden Sie beschrieben, wie Sie Bilder in Ihre Wikiseiten einbetten können, entweder in Ihr Wiki hochgeladene Bilder oder Bilder aus externen Quellen.
Bilder in Seiten verwenden
Um ein Bild auf einer Seite zu platzieren, können Sie ein Bild hochladen, indem Sie das "Attach:"-Markup benutzen, oder Sie fügen die Internetadresse (URL) der Bilddatei in den Quelltext der Wikiseite ein. Ein alternativer Text (für Tooltips 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.
https://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 (d. h. 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, svg, svgz
(Siehe auch Hochladen von Dateien und die Hinweise unten für Bilder, denen die Endung fehlt).
Um einen Verweis auf ein Bild (wie https://www.pmichaud.com/img/misc/pc.jpg) zu setzen, anstatt es anzuzeigen, wird der URL in doppelte eckige Klammern gesetzt, wie in [[https://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:
[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]|Besuche '''PmWiki''' | Besuche PmWiki |
[[https://www.pmwiki.org | Attach:image.jpg"PmWiki"]].
Tooltipps oder alternativer Text
Eine Tooltipp oder alternativer Text wird angezeigt, wenn der Mauszeiger über dem Bild schwebt. Die Beschreibung wird in Anführungszeichen direkt hinter den URL geschrieben.
https://pmichaud.com/img/misc/pc.jpg"Bunte Büroklammern" | |
Beschriftung
Eine Beschriftung wird durch einen senkrechten Strich (|) gefolgt vom Beschriftungstext hinzugefügt.
https://pmichaud.com/img/misc/pc.jpg | '''Abbildung 1''' | Abbildung 1 |
Ausrichtung des Bildes
Normalerweise werden Bilder auf gleicher Grundlinie wie der umgebende Text angezeigt.
In Skins mit '<!DOCTYPE html>'-Deklaration (HTML5) gibt es ein Problem mit der Ausrichtung auf der Grundlinie. Bilder, die übereinander angeordnet werden, erhalten einen zusätzlichen Abstand um ca. 4 Pixel. Auch eine Bildunterschrift erscheint um diesen Betrag zu tief. Um diese zu umgehen, gibt es seit Version 2.90 neue Klassen für Bilder.
- Das Bild wird allein und ohne Bildunterschrift in eine Zeile gestellt. Es erscheint kein Text vor dem Bild.
Das umgebende DIV-Element erhält zusätzlich die Klasse 'imgonly', also<div class='img imgonly'>. Das erlaubt es einem Skinentwickler, diesem Bild ein passendes Aussehen mit Hilfe von CSS-Attributen zu geben. - Das Bild wird zusammen mit einer Bildunterschrift (d. h. mit einem nachgestellten Pipezeichen '|' und Text als Bildunterschrift (caption)) in eine Zeile gestellt.
Das umgebende DIV-Element erhält zusätzlich die Klasse 'imgcaption', also<div class='img imgcaption'>. Das erlaubt es einem Skinentwickler, diesem Bild ein passendes Aussehen mit Hilfe von CSS-Attributen zu geben, so dass der Abstand wieder verringert wird. - Das Bild wird mit nachfolgendem Text in die Zeile gestellt, aber ohne Bildunterschrift.
Das umgebende DIV-Element erhält nur die Klasse 'img', also<div class='img'>, so wie es vor der Version 2.90 auch war.
Siehe auch PITS:01390
Um ein Bild in dessen eigenen Absatz 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%https://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. |
Bilder umfließen lassen
Um ein Bild links oder rechts auszurichten, wobei der Text um das Bild herum fließt, werden die Wikistile %lfloat% und %rfloat% verwendet.
%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% https://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% https://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.
Verwenden Sie '%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%https://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.\\\ https://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 zuzuordnen. 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 [=\\\=] (statt einer leeren Zeile) 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 zuzuordnen. 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 \\\ (statt einer leeren Zeile) 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% https://www.pmichaud.com/img/misc/bubble.jpg \ %height="50px"% https://www.pmichaud.com/img/misc/bubble.jpg \ %width=10pct% https://www.pmichaud.com/img/misc/bubble.jpg %comment% pct is "percent" in pmwiki \ %thumb% https://www.pmichaud.com/img/misc/bubble.jpg %comment%[@ %thumb% is shortcut for %width=100px% @] |
 |
Anmerkung: Das Skalieren ändert nur, wie groß das Bild im Browser angezeigt wird, nicht die Größe des Bildes selbst oder die übertragene Dateigröße. Daher ist das Skalieren mittels Wikistilen nicht akzeptabel, um eine Seite voller "verkleinerter" Bilder zu erzeugen, z. B. als Galerie oder Verweisliste.
Wenn Sie ein Bild in einem Link skalieren wollen, müssen Sie die Größe vor dem Link angeben und alles mit einem %% abschließen.
%width=60px%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \ %width=60%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \ %width=10pct%[[https://pmwiki.org/ | https://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%% \ %height=60%[[https://pmwiki.org/ | https://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%[[https://pmwiki.org/ | https://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% [[https://www.pmichaud.com/img/misc/bubble.jpg | https://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Blase-] %lframe thumb% https://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Büroklammern-] %lframe thumb% [[DocumentationIndex | https://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 | https://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
https://www.example.com/script/tuxist, wird eine gefälschte Anfrage mit der gewünschten Endung angehängt, bspw.https://www.example.com/script/tux?format=.png. Es würde auch schon ein Fragment wie im folgenden Beispiel reichen:https://example.com/script/tux#file.png. - Bilder lassen sich auch mit Hilfe von Prozentangaben skalieren:
%width=10pct% https://pmichaud.com/img/misc/bubble.jpg \ %height=30pct% https://pmichaud.com/img/misc/bubble.jpg |
| |
- Fließtext ist, genau wie Hinweise am Mauszeiger, in Rahmen möglich.
>>lframe width=130px<< %thumb width=130% [[https://pmichaud.com/img/misc/bubble.jpg | https://pmichaud.com/img/misc/bubble.jpg"Lass die Blase platzen"]] | [--Ein langer Text als Bildunterschrift für ein Bild wie [[https://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?
Angenommen, der Provider hat die Netzseite
https://www.website.com
username
/home/users/~username/public_html
/pmwiki
/home/users/~username/public_html/pmwiki/uploads
/pmwiki/uploads
Siehe auch
- Cookbook:Images - Eine Sammlung von Rezepten, die u. a. Bilderzeugung, Smileys, Thumbnails, Galerien, Hochladen, Manipulation und Anzeigen von Bildern behandeln.
Quellen
Die Bilder auf dieser Seite stammen von https://www.flickr.com und stehen unter einer Creative Commons License.
FAQ
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 generelle Format Attach:Gruppenname/bild.png (jedenfalls solange, wie Anhänge gruppenweise gespeichert werden). Auf ein anderes Bild auf dem aktuellen Server verweist man mit Pfad:/pfad/zum/bild.png, wobei "Pfad:" durch den Servernamen wie "https://www.example.com" ersetzt wird.
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 der untere Rand (bottom border), die unter der Überschrift liegt, weitere Anpassungen nötig macht. Vielleicht setzen Sie die Überschrift einfach in fett und setzen Sie vier Bindestriche 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.
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 || https://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Bild 1''' || %width=50pct%https://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:) https://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Bild 1''' (:cell:) %width=50pct%https://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Bild 2''' (:tableend:) ## Zweiter Unterpunkt (:table border=0 align=center padding-left:4em :) (:cellnr:) https://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Bild 1''' (:cell:) %width=50pct%https://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Bild 2''' (:tableend:) # Zweiter Punkt |
|
Noch besser
# Erster Punkt ## Erster Unterpunkt || border=0 align=center || https://pmichaud.com/img/misc/pc.jpg"Paper clips"[[<<]]'''Bild 1''' || %width=50pct%https://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% https://pmichaud.com/img/misc/bubble.jpg"rfloat width 10%" %width=10pct% https://pmichaud.com/img/misc/bubble.jpg"width 10%" [[<<]] %lfloat height=20pct% https://pmichaud.com/img/misc/bubble.jpg"lfloat height 20%" %height=20pct% https://pmichaud.com/img/misc/bubble.jpg"height 20%" [[<<]] %width=10pct rfloat% https://pmichaud.com/img/misc/bubble.jpg"width 10% rfloat" %height=20pct lfloat% https://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 einzelnes Bild brauchen, setzen Sie [==] an den Zeilenanfang wie in:
[==] https://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 — Rückverweise
| Zuletzt geändert: | PmWikiDe.Images | am 28.11.2019 |
| PmWiki.Images | am 08.09.2019 |