Placing images in pages
To place an image into a page, enter the address (url) of the image into the markup text. Any alternate text (used for tooltips and for browsers that do not display images) is placed in double quotes immediately following the image url.
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.
|
|
Paper clips are fun to work with.
|
Images can also be specified using uploads (i.e., Attach:image.jpg) and InterMap links. Any location that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image.
* See Notes below about image files which lack an extension.
To create a link to an image (as opposed to displaying the image itself), use double brackets to mark the link [[http://www.pmichaud.com/img/misc/pc.jpg]] or [[Attach:image.jpg]].
To have an image link to another location, use the image as the link text as in [[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].
Captions and floating images
A caption can be added to an image using a vertical brace and the caption text.
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''
|
 Figure 1 |
Normally, images are displayed "in line" with the surrounding text. To left or right-align an image with text wrapping around it, use the %lfloat% or %rfloat% WikiStyles.
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is left-aligned, and the text wraps on the right side of the image.
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!
The image is left-aligned, and the text wraps on the right side of the image.
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.
|
Use the %lframe% or %rframe% styles to float an image and place a frame around the image and its caption:
%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is right-aligned, and the text wraps on the left side of the image.
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!
The image is right-aligned, and the text wraps on the left side of the image.
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.
|
Use %center% to center an image. Use %right% to right align an image, without floating it.
%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips are fun to work with
%right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on!
|
Paper clips are fun to work with
Rock on!
|
Resizing images
To resize an image, use %width=50px% or %height=50px% in front of an image. The %thumb% wikistyle is a helpful shortcut for %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
|
|
|
Resizing an image only affects how it is displayed in a browser; it does not reduce the transfer size of the image itself.
Resized images using %thumb% can also be floated with frames, as well as made into links.
%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg|http://www.pmichaud.com/img/misc/bubble.jpg]] | [-Bubble-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg | [-Paper Clips-]
%lframe thumb% [[DocumentationIndex| http://www.pmichaud.com/img/misc/gem.jpg]] | [[DocumentationIndex| [-Rock On-]]]
|
Bubble
Paper Clips
|
Notes
An image file that lacks an extension can be displayed by addition of a "false" extension to the URL. For example, if the url is http://www.pmwiki.org/pmwiki/uploads/Test/tux, add a fake query string on the end with the desired extension (e.g., http://www.pmwiki.org/pmwiki/uploads/Test/tux?format=.png) and Pm Wiki will render it as a .png. What's more, a .gif image with a .dat or .php file extension can be shown by adding the fake query string ?format=.gif. I'd love to see this reworked, but I hope you'll leave it in, somewhere. We have lots of images uploaded by users who forgot to include extensions - until PM posted this info, we thought those uploads were unusable. By the way, this doesn't work with the Attach syntax, from what I can see -- Tegan Dowling
To show a framed image it must be floated by using %lfloat% or %rfloat%.
See also
Credits
The images on this page were obtained from http://www.flickr.com(approve sites) and are redistributed under a Creative Commons License.
Category: Images
<< | Pm Wiki.Documentation Index | >>
