Inserting an Image on a Page

When you use Add New-->Image to upload a photo, it only uploads the photo. It does not display it on a page on the Web site. To display that photo on a Web page, you then have to insert it into the page. To do that:

1. Go to the page where you wish to insert a photo and click the “Edit” button to enter editing mode.

2. In the Body Text box, place the cursor where you wish to insert the photo, and click the Insert/Edit Image icon in the toolbar.

A pop-up dialog box will then appear. There are three columns in this box:

Center column: This shows a list of all the folders and files in the folder you are currently in. Use this to navigate to where the image you wish to insert is stored on the site. If you click on a folder (on the name, not the circle in front of it), it goes into that folder and the list in the center column changes to show the items in that folder. Click the “Up One Level” link above the center column to go up one level in the site hierarchy.

When you find the image you want to insert, click the circle in front of it to select it, and it will be displayed in the right column.

Note the Upload button at the bottom of this column. If you have not yet uploaded the image you want to insert, you can use this button to do so without having to exit your page, do Add NewàImage, and then come back to this page to insert the picture. To do this:

1. Navigate in the center column of the popup dialog box to where you wish to store the image.
2. Click the Upload button. You’ll notice that the right column will display several fields.
3. Fill out the fields and click Browse to select the image. Then click the Upload button in the right column to upload the image.

Left column: This just contains a couple of quick links to help you navigate around the site in the center column.

• Home: Click this to go to the root folder of the School site.
• Current folder: If you’ve clicked your way to some other part of the site in the center column and now want to go back to the list of items in the folder that you are currently in, click this link.

Right column: This shows a preview of the image you’ve selected from the center column. There are several fields under this column.

• Image description: Give the image a name. This will appear in some browsers as mouseover text.
• Alignment: Select inline, left, or right. The text will automatically flow around the image depending on what you pick.
• Caption: Check this box if you wish to append a caption to the image. You will then be asked to enter the caption text.
• Dimensions: This is a list of preset dimensions for the image. Note that all these dimensions are square (32x32, 64x64, etc.). However, this does not actually mean it will compress the image to be square. What this means is that, for instance, if you pick 400x400, it will size down the photo proportionally by shrinking whichever side is longer to 400 pixels. Of course, you can always just pick Original Size and resize it later (which we cover in the next section).

Once you have selected your image and set its alignment and size, click the Insert button at the bottom of the popup dialog box. The box will disappear, and the image should now be inserted into the page at the location of your cursor.