Laboratoire Méthodes Formelles PmWikiNl/Afbeeldingen

< Links | Documentatie index | Tekst opmaakregels >

Om een afbeelding in een pagina op te nemen, gebruik je een URL link naar het afbeeldingsbestand, maar zonder de dubbele rechte haken. Standaard herkent PmWiki volgende bestandstypes als een afbeelding:

  gif, jpg, jpeg, png, bmp, ico, wbmp, svg, svgz, xcf, webp  # image files

See Images for the files PmWiki automatically displays as images. Ook de verkorte URL-vormen via interMap-links ^(en) (bijvoorbeeld Wikipedia:afbeelding.ext) of via bijlagen ^(en) - standaard niet geactiveerd - (met Attach:afbeelding.ext) zijn mogelijk.

http://pmichaud.com/img/misc/pc.jpg

Om toch een gewone link aan te maken naar het afbeeldingsbestand, gebruik je wel de dubbele rechte haken, zoals in [[http://pmichaud.com/img/misc/pc.jpg]] of [[Attach:afbeelding.ext]].

De combinatie een afbeelding als link, doe je door de linktekst te wijzigen met de (verkorte) afbeeldings-URL:

[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg]] of [[http://pmichaud.com/img/misc/pc.jpg -> http://pmwiki.org/]]

Of indien bijlagen geactiveerd zijn (standaard niet), met de opmaak [[http://example.com | Attach:afbeelding.ext]] of [[Attach:afbeelding.ext -> http://example.com]].

Zie bijlagen ^(en) voor meer details over syntaxis en mogelijkheden met bijlagen. Zie bijlagen administratie ^(en) hoe bijlagen te activeren zijn.

Alternatieve tekst

Een alternatieve tekst, gebruikt voor tooltips of wanneer de browser de afbeelding niet kan tonen, wordt binnen dubbele aanhalingstekens onmiddellijk na de afbeeldings-URL geplaatst.

http://pmichaud.com/img/misc/pc.jpg"Paperclips"

[[http://pmichaud.com/img/2003/atc-1.gif"Informatie over wiki links" -> PmWikiNl/Links]]

Onderschriften

Een afbeelding kan voorzien worden van een onderschrift, door toevoeging van een vertikale streep (|) en de onderschrift tekst. Dit onderschrift mag eenvoudige opmaak bevatten.

http://pmichaud.com/img/misc/pc.jpg"Paperclips" | '''Figuur 1'''

http://pmichaud.com/img/misc/pc.jpg"Paperclips" | [- %newwin% [[ Wikipedia:Paper_clip | Paperclips ]] zijn ''grappig'' om mee te werken. -]

Figuur 1

Paperclips zijn grappig om mee te werken.

Opgelet:

Initiele tekst of zelfs een spatie net voor de linkopmaak, breekt de interpretatie als onderschrift. Dus wanneer een onderschrift is gewenst, moet je de linkopmaak in een aparte regel opnemen.
Bij een afbeelding als link moet de opmaak voor het onderschrift buiten de dubbele rechte haken na de link geplaatst worden.

[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg]] | '''Figuur 1'''

[[http://pmichaud.com/img/misc/pc.jpg -> http://pmwiki.org/]] | '''Figuur 1'''

Figuur 1

Horizontaal uitlijnen

Standaard is de uitlijning van een afbeelding "in lijn" met de omliggende tekst. Gebruik %center% om de afbeelding te centreren, of %right% om de afbeelding rechts te positioneren.

Opgelet: Eventuele "in lijn" tekst op dezelfde regel, wordt mee gealigneerd. Onderschriften zijn in dat geval niet mogelijk (zie opgelet bij onderschriften).

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"Paperclips"

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

Zwevende afbeeldingen

Om een afbeelding links of rechts te positioneren terwijl de tekst eromheen vloeit, gebruik je de %lfloat% of %rfloat% opmaak. Zie wiki stijlen ^(en) voor meer details over de aanvullende parameters.

%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!'''
'''De afbeelding wordt links uitgelijnd, met een kantlijn (via de [@margin-*@] parameters); het onderschrift wordt gecentreerd (via de [@text-align@] parameter); de tekst vloeit rechts van en onder de afbeelding.'''

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!

De afbeelding wordt links uitgelijnd, met een kantlijn (via de margin-* parameters); het onderschrift wordt gecentreerd (via de text-align parameter); de tekst vloeit rechts van en onder de afbeelding.

De [[<<]] opmaak forceert dat de tekst verder loopt onder de afbeelding. De \\ opmaak forceert gewoon een nieuwe regel naast de afbeelding.

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''De afbeelding wordt links uitgelijnd en de tekst vloeit rechts van de afbeelding.\\
Tekst na de ''[@[[<<]]@]'' opmaak loopt verder onder de afbeelding.'''
[[<<]]
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.

De afbeelding wordt links uitgelijnd en de tekst vloeit rechts van de afbeelding.
Tekst na de [[<<]] opmaak loopt verder onder de afbeelding.
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.

Zwevende afbeeldingen met kader

Gebruik anderzijds de %lframe%, %cframe% of %rframe% opmaak, om ook een kader te plaatsen rond de afbeelding en zijn onderschrift. Zie wederom wiki stijlen ^(en) voor het vormgeven van de kader.

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''De afbeelding, met kader, wordt rechts uitgelijnd en de tekst vloeit links van of onder de afbeelding.'''

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

Voorbeeld van een te kleine [@width@] parameter:
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px% http://pmichaud.com/img/misc/gem.jpg

Rock on!

De afbeelding, met kader, wordt rechts uitgelijnd en de tekst vloeit links van of onder de afbeelding.

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.

Voorbeeld van een te kleine width parameter:

Gebruik de %block rframe% variant (en vergeet niet om het blok af te sluiten met %%), om een kader te plaatsen rond een veelvoud van afbeeldingen en tekst. In dit geval een rechts uitgelijnde zwevende kader.

%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.%%
De tekst die volgt vloeit links van (of onder) de kader. 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.

De tekst die volgt vloeit links van (of onder) de kader. 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.

Een alternatief voor bovenstaande waarbij de blokopmaak op een aparte regel staat:

>>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.
>><<
De tekst die volgt vloeit links van (of onder) de kader.

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

De tekst die volgt vloeit links van (of onder) de kader.

Herschalen

Om een afbeelding te herschalen via een wiki stijl, gebruik dan de %width=...% of %height=...% opmaak net voor de afbeeldings-URL. Wiki stijl %thumb% is een verkorte notatie voor %width=100px%.
Standaard wordt de (absolute) grootte uitgedrukt in pixels. De afkorting px mag eventueel weggelaten worden.

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

Relatieve grootte is ook mogelijk via percentages. Gebruik hierbij de afkorting pct en niet %.

%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg

Opgelet: Herschalen van een afbeelding via een wiki stijl beinvloed alleen hoe het wordt getoond in de browser. Het zal de afbeelding niet verkleinen alvorens het van de webserver naar de browser wordt gestuurd. Dit is dus geen goede methode voor het genereren van een pagina vol met afbeeldingen, of een zogenaamde 'fotogalerij'.

Bij een afbeelding als link plaats je de linkopmaak tussen de %grootteParameter% en een afsluitende %%.

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

Om deze link tevens in een nieuw venster te openen, plaats het woord newwin voor de grootte parameter: %newwin grootteParameter%...%%.

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

Opgelet: Enkel in combinatie met een float of frame parameter (of andere blokopmaak) kunnen ook onderschriften toegevoegd worden.

%lfloat thumb% http://pmichaud.com/img/misc/pc.jpg"Clip het ticket" | [-Paperclips-]
%lframe thumb% [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Barst de zeepbel"]] | [-Zeepbel-]
%rframe newwin thumb% [[DocumentationIndex | http://pmichaud.com/img/misc/gem.jpg"Bezoek de documentatie index"]] | [[DocumentationIndex | [-Rock On!-]]]

Paperclips

Zeepbel

Rock On!

Zie ook

Wiki stijlen ^(en) - voor meer details over wiki stijl mogelijkheden
Bijlagen ^(en) - voor meer details over syntaxis en mogelijkheden met bijlagen
Cookbook:Images ^(en) - voor allerlei recepten in fotogalerijen, automatische "thumbnails", achtergrond foto's en meer.

Credits

De afbeeldingen op deze pagina komen van http://flickr.com en zijn beschikbaar onder de licentie "Creative Commons".

Veelgestelde vragen

Is it possible to link an image on PmWiki without using a fully qualified URL?

Yes. For images that are attachments, the general format is Attach:Groupname./image.gif. To link to an image that is on the same server, use Path:/path/to/image.gif.

Can I attach a client image file on PmWiki?

Yes, see Uploads .

Can I use an image file that lacks a correct extension?

An image file that lacks a correct extension can be displayed by addition of a "false" extension to the URL. For example, if the url is http://example.com/script/tux, add a fake query string on the end with the desired extension (e.g., http://example.com/script/tux?format=.png). If query strings are unsuitable, a fragment identifier should work, e.g. http://example.com/script/tux#file.png.

How can I include a page from another group that contains an attached image?

Include the page in the normal way, ie (:include GroupName.Pagename:). In the page to be included (that contains the image) change Attach:filename.ext to Attach:{$Group}./filename.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.

Is it possible to disallow all images? I already disabled uploads but I also want to disallow external images from being shown on my wiki pages.

Yes, add to config.php

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

How can I make it so that when I place an image in a page, the block of text it is in is a <p> (paragraph) rather than a <div> (division)?

If you just want it to happen for a single image (instead of all), then try putting [==] at the beginning of the line, as in:

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

Having [==] at the beginning of a line forces whatever follows to be part of a paragraph.

Is there any way to use relative paths for images?

See Cookbook:RelativeLinks and $EnableLinkPageRelative.

Is there a way to attach a BMP and have it display rather than link?

Add to config.php the following line:
$ImgExtPattern = "\\.(?:gif|jpg|jpeg|png|bmp|GIF|JPG|JPEG|PNG|BMP)";
Note that BMP images are uncompressed and quite heavy. You may wish to convert them to PNG (lossless) or JPG (lossy) format, and thus reduce 5-20 times their filesizes.

Is there a way to have a table to the left or right of an image?

Yes, see TableAndImage.