Many Q-Wikis can be improved by using images to help illustrate written instructions. Q-Wiki allows you to upload and store images on the Q-Wiki servers and then to insert those images in the Q-Wiki you’re working on.

Image Rights

Images that you upload to Q-Wiki must accord to the guidelines provided in the Quamut Wiki acceptable image policy. Images that don’t meet these criteria should not be uploaded to Quamut Wiki.

Image Format

When saving images that you’d like to upload to Q-Wiki, please follow these guidelines regarding file formats:

• Photographs and drawings: Save as JPG
• Screenshots: Save as PNG or JPG
• Animations: Save as GIF

Image Size

Please do not attempt to upload images that are any larger than 500 pixels wide, 500 pixels tall, or that are over 100k in file size.

How to Upload Images on Q-Wiki

Once you have an image ready to upload to Q-Wiki:

1. Make sure you know the folder in which the image file is saved on your computer.
2. Click on the Insert/Edit Image button .
3. The Insert/Edit Image window appears. Click the Browse icon at the right of the Image URL field.
   
4. The Image Manager window opens—this window shows all of the images that you’ve uploaded to Q-Wiki. If you haven’t yet uploaded any images, it will be blank.
   
5. To upload an image, click on the Upload button at the upper right hand corner of the window.
6. The Image Upload window opens.
   
7. Click the Browse button to browse your computer for the image you want to upload. When you select the image, its file path will appear in the File to Upload field. The file’s name will also appear in the As File Name field. You can edit the file name in this field if you wish. Press the Upload button—if all goes well, you will see a notification of “Upload Successful!”
8. The Image Upload window remains open after you’ve uploaded an image so that you can upload additional images if you choose.
9. When you’ve finished uploading images, close the Image Upload window. You should now see the images you’ve uploaded in the Image Manager window.
   
10. Close the Image Manager window.

How to Insert Images on Q-Wiki

To insert an image into a Q-Wiki, you first must have uploaded it to the Q-Wiki servers (see above). Once you have uploaded an image, you can insert it by following these steps:

1. Position your cursor at the location where you’d like the image to appear in the Q-Wiki.
2. Click on the Insert/Edit Image button .
3. The Insert/Edit Image window appears. Click on the Browse icon at the far right of the Image URL field.
4. The Image Manager window appears, showing all the images you’ve uploaded. If you’ve uploaded just a few images, you’ll be able to find the image you want to insert easily. If you’ve uploaded many images, the fastest way to find the image you want is to use the Filter field at the top left of the Image Manager window. Just type all or part of the image name you’re looking for into the Filter and press return. The Filter will show just the images that match the keyword you entered.
5. Click on the image you want to insert. The Image Manager window closes, revealing the Insert/Edit Image window. The Image URL field of this window will be filled in, as will the Dimensions field.
   
6. The Insert/Edit Image window provides a number of fields that allow you to control how your image will appear on the screen.
   1. Image description: Provide a detailed description of the image. Though this won’t affect how your image appears onscreen, it will improve the image’s ability to be found by search engines.
   2. Alignment: Lets you set how the image will align relative to the line on which your cursor is placed.
      1. Baseline aligns the bottom of the image with the baseline of the current line. The baseline is the line that runs along the bottom of most letters. The tail of a lowercase “y,” for instance, drops below the baseline.
      2. Top aligns the top of the image with the tallest item in the line.
      3. Middle aligns the middle of the image with the baseline of the current line.
      4. Bottom aligns the bottom of the image with the baseline of the line.
      5. TextTop aligns the top of the image with the tallest text in the line (which is not always the same thing as the tallest item in the line).
      6. Absolute Middle aligns the middle of the image with the middle of the current line.
      7. Absolute Bottom aligns the bottom of the image with the bottom most point on the current line (even if the bottommost point is below the baseline).
      8. Left drops the image down and into the next open space on the left margin. Any additional text will wrap around the right of the image.
      9. Right drops the image down and into the next open space on the Right margin. Any additional text will wrap around the left of the image.
   3. Dimensions: The Dimensions field will already be filled with the true size of the image. It’s generally best to allow this size to stand, though it’s also fine to make the image smaller. Please do not make the image bigger.
   4. Border: Lets you set a border around the image. The larger the number you enter, the thicker the border.
   5. Vertical space: Sets a vertical “buffer zone,” measured in pixels, above and below the image to separate the image from text or other content. 10 is a good vertical space for most images.
   6. Horizontal space: For images where text wraps to either side of the image, sets a horizontal “buffer zone,” measured in pixels, to the sides of the image. 10 is a good horizontal space for most images.

A Note on Placing Images into Bulleted or Numbered Lists

Often, writers or editors of Q-Wikis want to insert images into a bulleted or numbered list, so that an image follows each item in the list, as in the Q-Wiki that explains How to Whistle Using Two Hands. While it’s easy to accomplish this formatting task, it requires that you use a soft return, which simply involves hitting the Shift and Return keys at the same time. More specifically, when you come to the end of the bulleted or numbered list item beneath which you want the image to appear, hit a soft return. Then insert the image (using any Alignment but Left or Right). Now hit a hard return (which means hit just the Return key), and write the next list item.