ImageLines

Placing images in wiki 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.

To create a link ? to an image (as opposed to displaying the image itself), use [[http://www.pmichaud.com/img/misc/pc.jpg]] or [[Attach:image.jpg]].

To have an image link to another location, use [[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.

⚠ %lfloat% | 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!'''
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.

⚠ %rframe% | Rock on! 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 %center% to center an image.

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

⚠ %width=50px% %height=50px% %thumb%

Resizing an image only affects how it is displayed in a browser; it does not reduce the transfer size of the image itself.

Images in a table always have borders
(:table width=50% border=0 cellspacing=0 bgcolor=red:)
(:cellnr:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cell:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cellnr colspan=2 bgcolor=white:)
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.
(:tableend:)

(:table width=50% border=0 cellspacing=0 bgcolor=red:)
(:cellnr:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cell:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cellnr colspan=2 bgcolor=red:)
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.
(:tableend:)

Images in a table always have borders

`⚠`	`⚠`
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.

I think Tom got it, below; normally, I'd have no background color, and then the page color (whatever it might be) would show between images. I set the table's bgcolor=red as a proxy for that page color, to make it very noticeable when there's a gap between cells. Setting cellspacing=0 didn't put the images right up next to each other, but Tom shows that by having both cellspacing=0 and cellpadding=0, no background shows. Now to figure out where this belongs in the docs - tables, I guess, but maybe with a mention on the images page? Thanks for playing! -- TeganDowling

Let me try something:

Images in a table ''don't'' always have borders
(:table width=50% border=0 cellspacing=0 cellpadding=0 bgcolor=red:)
(:cellnr:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cell:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cellnr colspan=2 bgcolor=white:)
By setting cellpadding=0, Tom figured out how to keep the background from appearing between images; this could create a problem with text, though.
(:tableend:)

Images in a table, without borders, with text-padding
(:table width=50% border=0 cellspacing=0 cellpadding=0 bgcolor=red:)
(:cellnr:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cell:)
http://www.pmichaud.com/img/misc/bubble.jpg
(:cellnr colspan=2 bgcolor=white:)
%p padding=10px%By setting cellpadding=0 on the [@(:table...:)@] definition line, Tom figured out how to keep the background from appearing between images; this could create a problem with text, though.  To provide some padding/space around the text, you can apply the css padding to the text alone.%%
(:tableend:)

Images in a table don't always have borders

`⚠`	`⚠`
By setting cellpadding=0, Tom figured out how to keep the background from appearing between images; this could create a problem with text, though.

Images in a table, without borders, with text-padding

`⚠`	`⚠`
By setting cellpadding=0 on the `(:table...:)` definition line, Tom figured out how to keep the background from appearing between images; this could create a problem with text, though. To provide some padding/space around the text, you can apply the css padding to the text alone.

Just a try. celok

cellpadding=0: That's it! Even though there's a red background, you can't see any of it (which is what I was trying to achieve). Thanks! -- TeganDowling