How do I add pictures to my articles

Please Note

All the images in this answer can be opened larger, in a new popup window, by clicking on them.

Inserting Images into a Post

1. Start the 'Add Image' screen

At the bottom of the text box where you type in the article is a little image with a plus sign icon. Put your cursor in the text box where you want the image to appear, then click on the icon (see 1).

2. Click 'Upload' on the popup

You need to click the upload button (see 2) to get to the image upload screen (see 3).

Now you will get a pop-up window that allows you to enter a title for the image and choose a file off your PC hard drive.

3. Browse your hard-drive to find the image

The image must be on your PC so that you can find it here and upload it to the website. Also make sure it has a filesize of less than 800kB. Click 'upload' to go and find the image (see 4).

4. Choose the image file on your PC

Then click OK or 'Open' on the 'find file' window (see 4), so that it closes and the name of your image file is left in the text field next to the 'Browse...' button (see 5)

You should end up with a screen that looks like 5.

5. After choosing the image to upload, enter the title

Now, you must scroll to the bottom of the popup window. Ignore all the detail and focus only on the buttons at the bottom (see 6).

6. Scroll to the bottom to click 'Submit'

Now, you get to set the display properties of the image in your post. If you don't select the properties, you will get the default settings, which are a half-screen width image, floating left in your text, that will popup a full-size image in a new window if you click on it.

The properties screen is shown in 7.

7. Setting image display properties

The New screen looks like this

With the new screen, sensible defaults have been set and all you need to do is click the 'insert' button. The detail below is not recommended unless you have good reason to change the defaults by clicking on the advanced options line.

The controls on this screen work like this (follow the numbers):

1. Title defaults to the title you entered on the previous screen, but you can delete it or change it. This becomes a bold caption under the image.
2. Description becomes some centered text under the image - leave it blank if you want
3. Size has some preset dimensions that it will automatically resize your image to:
4. # Thumbnail is 100 pixels wide, (about a sixth of the width of the white area on this site's pages.
5. # Preview is 200 pixels wide,
6. # Half300 is 300 pixels wide, which is half the width of the text area. This size is ideal for adding pictures to your post if you set the picture to float left or right and have the text wrap around it.
7. # Full600 is the full width of the text area. This size should be centered. Be aware that filling your post with fullsize pictures will make it load slower - it is better to use half-size pictures so that readers can choose which ones they want to see full size and can click on them.
8. Alignment tells the system if the image should align left, right, centered, or not at all. Fullsize images should be centered, and smaller images should be left- or right-aligned.
9. Link decides what happens if a user clicks on the displayed image. The default is to open a fullsize image in a popup window. But you can set it to:
10. # Not a Link which does nothing when clicked
11. # Link to Image Page which opens the image in the same browser window on its own page within the site,
12. # Open in Popup Window which opens a fullsize image in a popup window, or
13. # Go to URL which lets you link the image to something else entirely (for e.g. a site where you can buy the bike shown in the image)
14. Insert mode - leave as is
15. Click Insert to insert the image into your post

You will end up with the following image placeholder inside your post:

8. The image placeholder

This placeholder is ordinary text. You can edit it if you know what you are doing, to change properties of the image that is displayed. You can also move it around in your post by cutting and pasting it to a different part of the text.