Images In Wiki Pages

Documentation ToDo -- The newer portions at the foot of this page need to be rewritten in a more "tutorial" style rather than a simple list of examples. --Pm ?

Image inline in page

Key the full address of the image file

http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif

NOTES:

This works for images on another site as well as for images on your own, but it is considered very bad manners to link directly in this way to an image on another site. The example here is an exception, made by the author of the PmWiki wiki-engine for illustration purposes.
To limit the size of the image as it is displayed, preface the link with scaling or size-restriction markup - e.g. %width=100% or %height=200%. Experiment with the number of pixels specified to get the image size that you want.

A nice feature would be to be able to set the resizing as a percentage of the page width instead of pixels (as it is already for tables). This would allow to display multiple images on a same line independently of the screen resolution. jmi ? May 28, 2005, at 05:40 PM

Image centered using table

||align='center'
||http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif||

|| http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif ||

 
 (:table width=200%:)
 (:cell align=center:)
 http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif
 (:tableend:)

Link to image

In the first example (above), we saw that simply keying the image's full address causes the image to be shown.

How then do we prevent the address from being rendered as an image, if we want to provide the address of the image?

Put double square brackets around the address.

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

http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif

Image linking to image

Use the image as a clickable link - linking to the image itself, or to a different image. Use the [[Go | Show]] convention: the first half is a link to the image file (or to any other linkable location); the second half is what will be displayed.

[[http://www.pmichaud.com/img/wiki/pmichaud.com-40.gif |
http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif]]

(approve sites)

Image as thumbnail linking to full-sized image

To display a Thumbnail version of an image, which when clicked opens the full image onscreen,

Use the image as a clickable link - linking to the image itself. Use the [[Go | Show]] convention: the first half is a link to the image file; the second half is what will be displayed.
Preface the link's opening pair of double square brackets with scaling or size restriction markup - e.g. %width=100% or %height=200%. Experiment with the number of pixels specified to get the thumbnail size that you want.

%width=50%[[http://www.pmichaud.com/grape/in-grape2.gif |
http://www.pmichaud.com/grape/in-grape2.gif ]]

http://www.pmichaud.com/grape/in-grape2.gif(approve sites)(approve sites)

Image linking to link

Use the image as a clickable link - linking to another location. Use the [[Go | Show]] convention - the first half is a link to the other linkable location; the second half is what will be displayed.

[[http://www.pmichaud.com |
http://www.pmichaud.com/img/wiki/pmichaud.com-40.gif]]

http://www.pmichaud.com/img/wiki/pmichaud.com-40.gif(approve sites)(approve sites)

Image scaled

%define=scaled width:120%
%scaled% http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif

Float right image

%align=right%http://www.pmichaud.com/grape/in-grape2.gif [[<<]]

http://www.pmichaud.com/grape/in-grape2.gif(approve sites)

Float right image followed by text

%align=right%http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif
[[<<]] The text should follow the image with a line break between the
text and the image

The text should follow the image with a line break between the text and the image

Floating image with text wrapping around it

You can include an image near some text and have the text wrap around the image with a bit of open space between the image and the text. Adjust the hspace and vspace values to suit your own taste.

%align=left hspace=8 vspace=2%
http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif%%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae purus
non mauris dapibus congue. Nulla facilisi. Curabitur non quam. Vivamus sem
orci, euismod sed, faucibus vitae, tristique vel, orci. Donec elementum.
Curabitur id dui. Aenean imperdiet, arcu in pulvinar luctus, sapien eros
pulvinar elit, vel mattis felis dolor ut nunc. Ut viverra. Sed scelerisque
vulputate pede. Duis elit purus, porttitor quis, accumsan ac, tincidunt
luctus, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae purus non mauris dapibus congue. Nulla facilisi. Curabitur non quam. Vivamus sem orci, euismod sed, faucibus vitae, tristique vel, orci. Donec elementum. Curabitur id dui. Aenean imperdiet, arcu in pulvinar luctus, sapien eros pulvinar elit, vel mattis felis dolor ut nunc. Ut viverra. Sed scelerisque vulputate pede. Duis elit purus, porttitor quis, accumsan ac, tincidunt luctus, pede.

%align=right hspace=8 vspace=2%
http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif%%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae purus
non mauris dapibus congue. Nulla facilisi. Curabitur non quam. Vivamus sem
orci, euismod sed, faucibus vitae, tristique vel, orci. Donec elementum.
Curabitur id dui. Aenean imperdiet, arcu in pulvinar luctus, sapien eros
pulvinar elit, vel mattis felis dolor ut nunc. Ut viverra. Sed scelerisque
vulputate pede. Duis elit purus, porttitor quis, accumsan ac, tincidunt
luctus, pede.

Image with alt tag

http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif"PmWiki is built
with PHP"

About alt tag, it might be interesting to also populate the title Isidor ?

It would be good to populate the title, since Firefox doesn't normally show the alt text, in recognition that the purpose of the alt tag is to provide text when an image fails to render, where-as the title is intended to provide the "tool-tip" that many users expect from an alt tag. Discussion here(approve sites).

Image with spacing

%vspace=30 hspace=30%
http://www.pmwiki.org/pmwiki/pub/skins/pmwiki/pmwiki-32.gif

Discussion

Why not use

...

...

directive for all the above?? - Klonk ?

: doesn't work for (: ... :)

Is it possible to specify a padding or margin for the image?

http://www.pmichaud.com/grape/in-grape2.gif(approve sites)

At the moment (pmwiki2 beta26) it is not possible to specify padding for images directly. It could be done in the css style sheet. the image to the left is wrapped in a table with cellpadding=10px

Is it possible to specify an uploaded image (Attachment) to be displayed inline? Can I use [[go|Attach:OtherGroup/Image.gif]] ?

Answer: you can now! It will depend on your version of PmWiki. If it doesn't work for your version, then just use the image's full url, as if it were on another site, e.g. (for a site with "clean urls") http://www.sitename.com/uploads/Main/Image.gif

%align=left height=80
margin=4em%http://www.pmichaud.com/grape/in-grape2.gif Text to be
associated with first image [[<<]]

http://www.pmichaud.com/grape/in-grape2.gif(approve sites) Text to be associated with first image

%align=left height=80%http://www.pmichaud.com/grape/in-grape2.gif Text to
be associated with second image [[<<]]

http://www.pmichaud.com/grape/in-grape2.gif(approve sites) Text to be associated with second image

How to display an image that does not have an image extension (like .gif). I have this case because I would like to display a page counter which is generated, and it has a .dat file extension. (the same with .php images?)

Thanks

Add a "false" extension to the URL. For example, if the url is http://www.example.com/cgi-bin/counter.php, just add a fake query string on the end with the desired extension (e.g., http://www.example.com/cgi-bin/counter.php?dummy=.gif) and PmWiki will assume it's a .gif. --Pm ?

<< | PmWiki.Documentation Index ? | >>

Categories: Images, Layout

Back to the very top