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.fansubbers.org/trlogo.png"SubWiki Logo"
Behold our logo.
|
|
Behold our logo.
|
Images can also be specified as uploaded files (i.e., Attach:image.jpg) and using InterMap links. Any file that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image. (See Notes below for image files that lack extensions.)
To create a link to an image (like http://www.pmichaud.com/img/misc/pc.jpg as opposed to displaying the image itself), use double brackets to mark the link, as in [[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.fansubbers.org/trlogo.png"SubWiki Logo" | '''FansubWiki'''
|
 FansubWiki |
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 commands.
%lfloat% http://www.fansubbers.org/trlogo.png"SubWiki Logo" |
'''Captioned!'''
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.
|
Captioned!
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.
|
The [[<<]] markup breaks floating text, and the text continues at the bottom of the image.
%lfloat% http://www.fansubbers.org/trlogo.png"SubWiki Logo"
The image is left-aligned, and the text wraps on the right side of the
image. The text after the ''[@[[<<]]@]'' markup continues below 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.
|
|
The image is left-aligned, and the text wraps on the right side of the image. The text after the [[<<]] markup continues below 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.fansubbers.org/trlogo.png"SubWiki Logo" | [-The
FansubWiki logo, c.2006-]
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.
%cframe width=100px bgcolor=lightblue%
http://www.fansubbers.org/trlogo.png"centered in blue"
|
The FansubWiki logo, c.2006
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.fansubbers.org/trlogo.png"SubWiki Logo" | Paper clips
are fun to work with
%right% http://www.fansubbers.org/trlogo.png"SubWiki Logo"
|
Paper clips are fun to work with |
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.fansubbers.org/trlogo.png"SubWiki Logo" \
%height=50px% http://www.fansubbers.org/trlogo.png"SubWiki Logo" \
%thumb% http://www.fansubbers.org/trlogo.png"SubWiki Logo"
|
|
|
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.fansubbers.org/trlogo.png"SubWiki Logo" |
http://www.fansubbers.org/trlogo.png"SubWiki Logo"]] | [-1-]
%lframe thumb% http://www.fansubbers.org/trlogo.png"SubWiki Logo" | [-2-]
%lframe thumb% [[HomePage | http://www.fansubbers.org/trlogo.png"SubWiki
Logo"]] | [[HomePage | [-Home-]]]
|
1
2
|
Notes
- 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://www.example.com/script/tux, add a fake query string on the end with the desired extension (e.g., http://www.example.com/script/tux?format=.png). If query strings are unsuitable, a fragment identifier should work, e.g. http://www.example.com/script/tux#file.png.
See also
