Adding and Positioning Images

From PikaDocs

By Brian Lawlor
Legal Services of Northern California (http://www.lsnc.net/)

Thinking about adding images to your wiki article? There are three basic things to keep in mind:

• Uploading the image
• Basic image syntax options
• "Clearing" embedded images

Uploading the image

You can add images to any wiki page, but first you must upload the images to the PikaDocs server at the Upload file page. You will see a page confirming the image upload, with an explanation of the default wiki image syntax, i.e., the image file name followed by the parameters for displaying the image as a thumbnail with alternative text (akin to the alt attribute used in HTML markup).

For example, I uploaded a 480px x 360px picture of my young niece Grace. The file name is green_hat_smile.jpg. Confirming the upload, the wiki displays the default syntax using the file name:

[[Image:Green_hat_smile.jpg|thumb|Description]]

The uploaded image is assigned its own image page, e.g., Image:Green hat smile.jpg (http://pikasoftware.net/docs/index.php/Image:Green_hat_smile.jpg) which includes a handy list of all the versions of the same image file that have been uploaded (e.g., if you look at earlier version's of Grace's picture, you'll see a darker image before the color and contrast levels were adjusted), plus a link to any wiki pages that use that image file. Handy info. You can always locate the "image page" by clicking on the image wherever it is displayed in a wiki page. You can also find a comprehensive list of wiki images at the New images gallery.

Basic image syntax options

There are five image syntax parameters you are likely to use:

• thumbnail or thumb - generates an automatically resized thumbnail image that by default displays to the right, with the caption text displayed directly underneath; includes an "enlarge"-icon.
• right - makes the image right-aligned; can be used with and without specifying thumb.
• left - same as above, but left-aligned.
• frame - the image will have a frame, regardless of whether it is a thumb, and alternative text will be included as a visible caption.
• sizepx - renders a thumbnail version of the image that uses the declared width in pixels to resize the image, e.g. "150px"; height is then computed to keep the image's aspect ratio, i.e. the shape of the image; images can be resized smaller but not larger; cannot use frame or caption paramenters, but can use alternative text.

As they say, a picture is worth a thousand words. Using the photogenic Grace Mae Lawlor as our wiki image poster child, here are examples of several wiki image options:

• Full-size image only: (defaults to left; no captions; file name displays as alternative text)

[[Image:Green_hat_smile.jpg]] displays as:

• Full-size image with frame and caption: (defaults to right and uses alternative text for caption)

[[Image:Green_hat_smile.jpg|frame|Grace Mae Lawlor]] displays as:

• Thumbnail image with caption: (defaults to right with a frame and uses alternative text for caption)

[[Image:Green_hat_smile.jpg|thumb|Grace Mae Lawlor]] displays as:

• Left-side thumbnail image with caption: (resets thumbnail image to left with a frame and uses alternative text for caption)

[[Image:Green_hat_smile.jpg|left|thumb|Grace Mae Lawlor]] displays as:

• Centered thumbnail image with caption: (resets thumbnail image to center with a frame and uses alternative text for caption)

[[Image:Green_hat_smile.jpg|center|thumb|Grace Mae Lawlor]] displays as:

• Resized image (image resized to declared width, and height is automatically adjusted to maintain aspect ratio)

[[Image:Green_hat_smile.jpg|center|300px|Grace Mae Lawlor]] displays as:

"Clearing" embedded images

By default, wiki images display as floated objects allowing images or text that follows them to display to the immediate right. With full-size images, simply adding a line break or two after the image code will assure that a subsequent image or text displays "full width" in a line below the original image. But if you use thumbnails, set the display as "left" or "right," or set the display to "resize" the image, there may be unintended results.

After inserting a image, if you want to assure that the wiki page resumes displaying subsequent text or another image "full width," i.e., on a line below the image, in the wiki editing page add the following code after the image:

<br style="clear: both;" />

... and you're good to go! If you view the editing page for this page, you can see how it was done to control display of the images and accompanying text, above.

One final tip: If your embedded pictures seem a bit "crowded" on the top or bottom by other images or text, consider adding additional line breaks in the editing page to add additional space. (Personally, at the wiki I often use triple-spacing between images and the text above or below it.) Don't underestimate the value of extra space to make the wiki page easier to scan and read.