Adding an image

Note before you begin placing images: Each image you place into a web page needs to be sized in a photo-editing program first.

Unfortunately some people use full-size/resolution photos from their digital cameras on their web pages, causing needless bandwidth demands and significant degredation of image quality on the page. If you don't have an image editor available, use the webteam's online photo editor>>

Image-adding steps

1. On the Smartbuilder Editor page, place your cursor where you'd like the photo to appear in the text box.
2. Click the Insert/Edit Image icon in the toolbar; the Image Properties window will open.
3. Click the “Browse Server” button that follows the URL text box; a new directory window will open showing you the files in the web server directory this page is located.
   
4. Click the “Browse…” button at the bottom; a File Upload window for your browser will open showing the last folder you uploaded from on your computer.
   
5. Navigate to your photo (The filename can not have any spaces in it or the # character. We recommend using all lowercase letters and only using the - (dash) or _ (underscore) to seperate words. If the image still isn't uploading try clearing your cache. Next close all browser windows and then open the page back up and try again.); select it and click the “Open” button at the bottom of the File Upload window. The window will close.
6. The location of your photo is now filled in the “Upload a new file in this folder” text box; click the “Upload” button at the far bottom right. The file name of your photo will appear in the directory list.
7. Click the file name (blue hyperlink) of your photo in the list. This directory window will close and you will be returned to the Image Properties window with the photo you’ve selected in the Preview window
8. Fill in the Alternative Text box with a short description of what the image shows.
   
9. If you would like to link your photo to a web page click the "Link" tab and enter a URL.
   
10. Click OK; the Image Properties window will close and return you to the Smartbuilder Editor page and display the photo in the text box.
11. If you want to make text flow around the photo, select the photo so you can see the “handles” on the corners and sides; then drop down the Style menu in the toolbar of the edit text box.
    
12. Select a style option. There are two options: "Float Image Right" or "Float Image Left." "Float Image Right" floats the picture to the right of the text and "Float Image Left" floats the picture to the left of the text. The photo won’t move to a new location in this edit text box; you’ll see placement when you click the Preview or Save button below the text box.
13. Finish other editing tasks and click Preview or Save to view your work.
14. NOTE: you will need to edit your photo in a photo editing program to size it correctly to fit in your web page. Using the handles to resize your photo will distort your photo and degrade your user’s experience of your site.