Adding an image to a page is simple. It does require a bit of planning to create a specific layout or look. With these simple tools you can create a very attractive page with relatively little effort.

While adding the page, click on the image icon to begin the process to add an image.

The image URL screen pops up and you may either type or paste an address for an image already online or click on the file manager link to upload an image from your computer.

The file manager is simple. You can choose an existing file or upload a new file.

NOTE: If you know the new file has a height or width of more than 800 pixels, and do not want it to automatically resize the image, unclick the "Scale if necessary" box which is selected by default. You will receive an error if your image file is not a jpg file. The auto-resize tool does not work on other formats which may be fine for web use. For example, if you are uploading a png or gif file, the resize tool will not work. You will need to use another tool on your computer to resize the image before you upload it.

To upload a file from your computer, click on Browse.

When you click on Browse, a local file manager will pop up on your screen so you may choose a file to upload. You will need to know where your image is on your computer.

NOTE: If you don't know how to locate your images on your computer, find it before you start this process. This is a basic computer skill, and there are tutorials on this site to help you develop such skills you don't already possess. For Windows, it's easiest to simply copy the files you will work with onto your Dekstop. The Windows manager will give you Desktop as a file resource option and you can always easily find the image file that way.

Once you select your image, click on Open.

Once the local file is selected, click on Upload File.

NOTE: Remember, you may see an error if the Scale option is selected, the file is more than 800 pixels in height or width and it is a file type other than jpg. To avoid this, simply unclick the box next to Scale.

Once the file is uploaded, you may see a preview and a notice that the file is uploaded successfully. Simply click on the image to proceed to add it to your page.

If your image is too large, you may resize it. The file manager will auto-adjust the height if you select the width and vice versa. You will need to click your mouse in the alternate box. For example, if you wanted the image to resize to 100 pixels width, type in 100 and place your mouse into the height box. It should automatically calculate the appropriate height to retain the aspect ratio (to avoid deforming the image). Some browsers may fail to do the calculation for you. If this happens, the new image will look strange. Pay attention to see if this calculation is performed before you click Resize.

NOTE: It is also a good idea to save your resized image as a copy. By default, it will rename the image by the original name and add _0 or _1, etc.

Once the file is resized, you will see the new filename highlighted and the notice of Resizing successful. Click on the image to begin the process to add it to the page.

You will need to name the image and add a description. This is required so that browsers that don't view images have alternative text to display for their users.

In the Appearance tab, you acn set the alignment to adjust the image to left or right. Some website styles allow for more detailed alignment options, but typically left and right are all you will use. The proportions are automatically set and constrained to match the actual image size.

NOTE: though you can set a different height and width from the actual image, browser resizing is messy. It's best to size the image to the height and width you wish it to display.

Vertical space and Horizontal space are exactly as they sound. This is the number of pixels that will buffer the image to the left and right, top and bottom. The reason to use such detailed image options is to allow some space between your text and image.

In the picture above, we choose to align the image to the right. This will allow the text surrounding the image to wrap the image while the image itself rests on the right side of the page.

This is the end result, after the resize, image align and image hspace choices.

NOTE: To non-admins, this page will not have the edit options seen on the right or, the view and edit tabes above the content of the page or the notice that the page has been updated. These are for site content contributors (you, the owner or anyone that mages site pages).