How to Add Images to Your Wiki Page
The Wiki Rich Editor has an easy looking 'Insert Image' button. In practice, it's not as easy as pushing the button. Here's how it works:
The Insert Image' button will insert an image in your page, but all it does is insert an HTML image link in the code for your page. In order to do this, the image has to exist someplace on the web, where you can reference it by a URL. When you push the 'Add Image' button, it will have 2 inputs, the description and the URL, so you need to be able tell it where on the Web you've put your image.
So before you get here, you need to put your image someplace on the web where you can reference it. For the SeaHorse Dive Club site, we have an image library called 'Site Images' where we stash things like logos and photos. For web pages that are going to be part of the site and be around for awhile, we discourage using images from the Club Pictures library, because anybody can edit that library, and if your image is moved or deleted, your link will be broken.
So the first step is to go to the Site Images library and make sure you have a place to put your images. Make a new folder for yourself if you need to, then upload your image to the Site Images library. When editing your wiki page, it helps to have two browser windows open; one for your wiki editor, and one for your image in the library.
To put the an image in your page, here's what you need to do:
- Place your cursor where you want the image on your page. Press the 'Add Image' button. Fill-in the Alternative Text with what you want shown if the image is unavailable.
To fill-in the Address field you need to get to the actual URL of the image, not it's location in the image library, so in your library browser window:
- Click on the image thumbnail in the library. This will take you to the Image Properties page with a slightly larger version of the image, but it still isn't the source image.
- Click on the image again. This will take you to a page that is the actual source image. This URL should end in .png, or .jpg, or some other image file format.
- Copy the URL from the Address bar of your browser.
- Go back to the editing page and paste the URL into the address field of the 'Insert Image' dialog.
- Press OK
The image will now appear in your wiki page.
Image Size
By default, the image is shown in your page at full size. You can resize by clicking the image and dragging the resize handles. Holding down the Shift-Key and dragging the corner does not preserve the aspect ratio. So you'll have to eyeball it to make sure your image isn't distorted. If you want to resize it precisely, you can press the 'Edit HTML Source' button, and edit the image size directly in the IMG tag. Of course, you need to know HTML to do this.
Image Alignment
All images come into the page with their default HTML alignment. There is not easy way to float images, right or left align images on the page etc. There's no Image Properties button that makes this simple. You CAN change those settings, but you need to directly edit the page HTML coding via the 'Edit HTML Source' button. Again, you need to know some HTML coding to do this.
Hopefully this will get through the process of inserting images into your page with the least amount of pain and suffering. Good luck.