You will have several options available to you as you add images to your wiki. Images can derive from three types of sources: URL/external link, uploaded files attached to your wiki page, and the Flickr.com website. You can make use of the wiki's Image Wizard Tool, found in the toolbar above your editing box, or you can manually enter code. In either case you will have the ability to specify the size and placement of the images on your wiki page, as described in the following sections.
Using The Wiki's Image Wizard Tool
The "Image Wizard" tool can be accessed by clicking the button on your editing toolbar shown below:
See this page for instructions on how to insert images using the wizard, and how to determine their size and placement on your wiki page.
Manual Specification of Size and Placement
When you insert an image into your wiki, you can either use the Image Wizard tool (as described above and on this page) or manually enter the code into your editing box. Depending on the source of your image (an attached file, a URL address, or Flickr) your code will look something like one of the following, respectively:
[[image example.png]]
[[image http://example.com]]
[[image flickr=1234567890]]
The image wizard can also help you determine the size and placement of your images, again as described on this page. However, you can also manually specify these designations, which will give you further customization capabilities as described below.
Placement
You can choose to place your image on the left, center, or right of the page, as well as on the left or right with text wrapping (called "floating" the image). What follows are examples of each of these, with the related code.
Align Left:
[[<image imagename.jpg]]
Align Right:
[[>image imagename.jpg]]
Align Center:
[[=image imagename.jpg]]
Left Float:
[[f<image imagename.jpg]]
Right Float:
[[f>image imagename.jpg]]
Size
You can add certain size specifications to this same line of code as explained below. Note that should you insert your image with the Image Wizard, it too can help you select sizes (see this page). Either way, the text in your editing box will appear like one of the following examples. Each of these is accompanied by an image that gives some idea of the relative size of these options.
Here the image displays at its native size:
[[image imagename.jpg]]
In each of the following instances, the size of the image is determined by the word in quotations in the accompanying line of code. If you click on this picture, you will open the photograph at its original size.
Square
[[image imagename.jpg size="square"]]
Thumbnail
[[image imagename.jpg size="thumbnail"]]
Small
[[image imagename.jpg size="small"]]
Medium
[[image imagename.jpg size="medium"]]
If you wish, you can also designate more specific sizes by stipulating the number of pixels. For example, you might wish your image to be 300 pixels wide. You would type in the following code:
[[image imagename.jpg width="300px"]]
and your image would appear like so:
Alternately, you might want your image to be only 25 pixels tall. In such a case, you would type the following code:
[[image imagename.jpg height="25px"]]
and your image would appear like this:
In both cases, the image is automatically readjusted so that either the height or width, respectively, will remain proportional to your dictated parameters. Note, however, that if you specify the height or width the image will no longer open at its native size when clicked.
You might also be interested in creating a gallery of images. To see an example and instructions, see this page.
