Recent Changes - Search:

PmWiki (deutsch) für die Liste aller Seiten


Englisch:

PmWiki

pmwiki.org

edit SideBar

https://www.jetphotos.com/photographer/598301 https://www.jetphotos.com/photographer/598304 https://www.jetphotos.com/photographer/598305 https://www.jetphotos.com/photographer/598307 https://www.jetphotos.com/photographer/598310 https://www.jetphotos.com/photographer/598312 https://www.jetphotos.com/photographer/598317 https://www.jetphotos.com/photographer/598318 https://www.jetphotos.com/photographer/598320 https://www.jetphotos.com/photographer/598321 https://www.jetphotos.com/photographer/598322 https://www.jetphotos.com/photographer/598324 https://www.jetphotos.com/photographer/598328 https://www.jetphotos.com/photographer/598340 https://www.jetphotos.com/photographer/598341 https://www.jetphotos.com/photographer/598346 https://www.jetphotos.com/photographer/598349 https://www.jetphotos.com/photographer/598357 https://www.jetphotos.com/photographer/598366 https://www.jetphotos.com/photographer/598372 https://www.jetphotos.com/photographer/598374 https://www.jetphotos.com/photographer/598378 https://www.jetphotos.com/photographer/600028 https://www.jetphotos.com/photographer/600031 https://www.jetphotos.com/photographer/600032 https://www.jetphotos.com/photographer/600034 https://www.jetphotos.com/photographer/600036 https://www.jetphotos.com/photographer/600037 https://www.jetphotos.com/photographer/600039 https://www.jetphotos.com/photographer/600041 https://www.jetphotos.com/photographer/600042 https://www.jetphotos.com/photographer/600045 https://www.jetphotos.com/photographer/600046 https://www.jetphotos.com/photographer/600047 https://www.jetphotos.com/photographer/600048 https://www.jetphotos.com/photographer/600050 https://www.jetphotos.com/photographer/600051 https://www.jetphotos.com/photographer/600052 https://www.jetphotos.com/photographer/600053 https://www.jetphotos.com/photographer/600055 https://www.jetphotos.com/photographer/600057 https://www.jetphotos.com/photographer/600641 https://www.jetphotos.com/photographer/600644 https://www.jetphotos.com/photographer/600645 https://www.jetphotos.com/photographer/600646 https://www.jetphotos.com/photographer/602231 https://www.jetphotos.com/photographer/602240 https://www.jetphotos.com/photographer/602244 https://www.jetphotos.com/photographer/602247 https://www.jetphotos.com/photographer/602261 https://www.jetphotos.com/photographer/602265 https://www.jetphotos.com/photographer/602279 https://www.jetphotos.com/photographer/602307 https://www.jetphotos.com/photographer/602315 https://www.jetphotos.com/photographer/602323 https://www.jetphotos.com/photographer/602340 https://www.jetphotos.com/photographer/602346 https://www.jetphotos.com/photographer/602741 https://www.jetphotos.com/photographer/602743 https://www.jetphotos.com/photographer/602744 https://www.jetphotos.com/photographer/602745 https://www.jetphotos.com/photographer/602746 https://www.jetphotos.com/photographer/602748 https://www.jetphotos.com/photographer/602749 https://www.jetphotos.com/photographer/602750 https://www.jetphotos.com/photographer/602757 https://www.jetphotos.com/photographer/602758 https://www.jetphotos.com/photographer/602762 https://www.jetphotos.com/photographer/602763 https://www.jetphotos.com/photographer/602764 https://www.jetphotos.com/photographer/602769 https://www.jetphotos.com/photographer/602770 https://www.jetphotos.com/photographer/602772 https://www.jetphotos.com/photographer/602773 https://www.jetphotos.com/photographer/602774 https://www.jetphotos.com/photographer/602775 https://www.jetphotos.com/photographer/601186 https://www.jetphotos.com/photographer/601188 https://www.jetphotos.com/photographer/601189 https://www.jetphotos.com/photographer/601191 https://www.jetphotos.com/photographer/601192 https://www.jetphotos.com/photographer/601194 https://www.jetphotos.com/photographer/601196 https://www.jetphotos.com/photographer/601197 https://www.jetphotos.com/photographer/601248 https://www.jetphotos.com/photographer/601249 https://www.jetphotos.com/photographer/601250 https://www.jetphotos.com/photographer/601251 https://www.jetphotos.com/photographer/601252 https://www.jetphotos.com/photographer/601254 https://www.jetphotos.com/photographer/601255 https://www.jetphotos.com/photographer/601256 https://www.jetphotos.com/photographer/601258 https://www.jetphotos.com/photographer/601260 https://www.jetphotos.com/photographer/601261 https://www.jetphotos.com/photographer/601263 https://www.jetphotos.com/photographer/601264 https://www.jetphotos.com/photographer/601265 https://www.jetphotos.com/photographer/601266 https://www.jetphotos.com/photographer/601267 https://www.jetphotos.com/photographer/601268 https://www.jetphotos.com/photographer/601269 https://www.jetphotos.com/photographer/601270 https://www.jetphotos.com/photographer/601272 https://www.jetphotos.com/photographer/601273 https://www.jetphotos.com/photographer/602779 https://www.jetphotos.com/photographer/602780 https://www.jetphotos.com/photographer/602781 https://www.jetphotos.com/photographer/602782 https://www.jetphotos.com/photographer/600111 https://www.jetphotos.com/photographer/600112 https://www.jetphotos.com/photographer/600148 https://www.jetphotos.com/photographer/600151 https://www.jetphotos.com/photographer/600155 https://www.jetphotos.com/photographer/600157 https://www.jetphotos.com/photographer/600159 https://www.jetphotos.com/photographer/600161 https://www.jetphotos.com/photographer/600163 https://www.jetphotos.com/photographer/600647 https://www.jetphotos.com/photographer/600648 https://www.jetphotos.com/photographer/600649 https://www.jetphotos.com/photographer/600650 https://www.jetphotos.com/photographer/602889 https://www.jetphotos.com/photographer/602890 https://www.jetphotos.com/photographer/602891 https://www.jetphotos.com/photographer/602895 https://www.jetphotos.com/photographer/602897 https://www.jetphotos.com/photographer/602900 https://www.jetphotos.com/photographer/602904 https://www.jetphotos.com/photographer/602907 https://www.jetphotos.com/photographer/602913 https://www.jetphotos.com/photographer/602916 https://www.jetphotos.com/photographer/602918 https://www.jetphotos.com/photographer/602922 https://www.jetphotos.com/photographer/602923 https://www.jetphotos.com/photographer/602925 https://www.jetphotos.com/photographer/602926 https://www.jetphotos.com/photographer/600534 https://www.jetphotos.com/photographer/600535 https://www.jetphotos.com/photographer/600536 https://www.jetphotos.com/photographer/600538 https://www.jetphotos.com/photographer/600539 https://www.jetphotos.com/photographer/600540 https://www.jetphotos.com/photographer/600542 https://www.jetphotos.com/photographer/600543 https://www.jetphotos.com/photographer/600544 https://www.jetphotos.com/photographer/600547 https://www.jetphotos.com/photographer/600548 https://www.jetphotos.com/photographer/600549 https://www.jetphotos.com/photographer/600550 https://www.jetphotos.com/photographer/600552 https://www.jetphotos.com/photographer/600553 https://www.jetphotos.com/photographer/600555 https://www.jetphotos.com/photographer/600558 https://www.jetphotos.com/photographer/600565 https://www.jetphotos.com/photographer/600566 https://www.jetphotos.com/photographer/600567 https://www.jetphotos.com/photographer/600568 https://www.jetphotos.com/photographer/600571 https://www.jetphotos.com/photographer/600573 https://www.jetphotos.com/photographer/600575 https://www.jetphotos.com/photographer/600576 https://www.jetphotos.com/photographer/600577 https://www.jetphotos.com/photographer/600578 https://www.jetphotos.com/photographer/600666 https://www.jetphotos.com/photographer/600668 https://www.jetphotos.com/photographer/600669 https://www.jetphotos.com/photographer/600670 https://www.jetphotos.com/photographer/602963 https://www.jetphotos.com/photographer/601276 https://www.jetphotos.com/photographer/601280 https://www.jetphotos.com/photographer/601281 https://www.jetphotos.com/photographer/601284 https://www.jetphotos.com/photographer/601285 https://www.jetphotos.com/photographer/601286 https://www.jetphotos.com/photographer/601287 https://www.jetphotos.com/photographer/601288 https://www.jetphotos.com/photographer/601291 https://www.jetphotos.com/photographer/601293 https://www.jetphotos.com/photographer/602776 https://www.jetphotos.com/photographer/602777 https://www.jetphotos.com/photographer/602955 https://www.jetphotos.com/photographer/602956 https://www.jetphotos.com/photographer/602957 https://www.jetphotos.com/photographer/602959 https://www.jetphotos.com/photographer/602960 https://www.jetphotos.com/photographer/602961

Bilder

für die Liste aller Seiten

Autoren (Grundlagen)

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ß. -]
Büroklammern
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'''
PmWiki
Besuche PmWiki

oder [[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"
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.

  1. 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.
  2. 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.
  3. 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.

Büroklammern

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 den um das Bild herum fließenden Text und der Text wird unter dem Bild 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 [[<<]] 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 rechtsbündig ausgerichtet und zusätzlich wird ein Rahmen um das Bild herum angezeigt. Der Rahmen kann wiederum über Wikistile formatiert werden.

%rframe% https://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.

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% https://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% https://pmichaud.com/img/misc/gem.jpg

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. Der Wikistil %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% @]
pct is "percent" in pmwiki %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"]]%% \
PmWiki PmWiki PmWiki 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"]]%%
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-]]]
Burst the bubble
Blase
Clip the ticket
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"]]
Informationen über Wiki-Links

Hinweise

  • Bilder ohne korrekte Dateiendung können durch Hinzufügen einer "falschen" Endung zur URL angezeigt werden. Wenn bspw. der URL https://www.example.com/script/tux ist, 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.--]
>><<
Lass die Blase platzen
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
https://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

  • 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

Warum sind einige externe Bilder korrekt eingebettet und andere nicht?

Wenn die aktuelle Seite eine sichere URL mit dem "https://"-Protokoll ist, verweigern einige Browser Bilder von unsicheren URLs zu laden (anders herum ist es erlaubt). Manche Webmaster konfigurieren ihre Server auch so, dass Direktverlinkung verboten ist.

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
  1. Erster Punkt
    1. Erster Unterpunkt
      Paper clips | Bild 1Paper clips | Bild 2
    2. Zweiter Unterpunkt
  2. 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.

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
  1. Erster Punkt
    1. Erster Unterpunkt
Paper clips
Bild 1
Paper clips
Bild 2
  1. Zweiter Unterpunkt
Paper clips
Bild 1
Paper clips
Bild 2
  1. Zweiter Punkt
Benutzen Sie Stile für die Einrückung, Sie müssen die Nummerierung neu aufsetzen, siehe Wikistile

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
  1. Erster Punkt
    1. Erster Unterpunkt
      Paper clips
      Bild 1
      Paper clips
      Bild 2
    2. Zweiter Unterpunkt
  2. 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-Datei 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" 
rfloat width 10%
width 10%
lfloat height 20%
height 20%
width 10% rfloat
height 20% lfloat

Wie mache ich es, dass ein Bild, das ich einfüge, innerhalb des <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 die folgende Zeile in die /local/config.php-Datei 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.

Wie füge ich $ImgExtPattern einen Bildtyp so hinzu, dass dennoch alle zukünftigen Standard-Bildtypen enthalten sind, die in PmWiki hinzugefügt werden.

Sie können die Erweiterung an $ImgExtPattern folgendermaßen anhängen:

  $ImgExtPattern = "(?:$ImgExtPattern|\\.webp|\\.WEBP)";

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

Ja, siehe TableAndImage.

für die Liste aller Seiten


Übersetzung von PmWiki.Images,   Originalseite auf PmWikiDe.Images   —   Backlinks

Zuletzt geändert:   PmWikiDe.Imagesam 28.11.2022
 PmWiki.Imagesam 27.11.2022
Edit - History - Print - Recent Changes - Search
Page last modified on November 28, 2022, at 07:50 AM