You can insert images into your pages quickly using the image icon and you can also use the image window to format it.

To insert a picture within a page, place your cursor where you want the image to be placed. Then click the "Image" icon, this will open a new window where you can select the picture you want displayed and setup some settings for the picture.

The General Tab: (Image URL, Image Description, Title)

Image URL:
The Image URL setting is where you select the graphic to be displayed. In the "Image URL" section click the folder icon on the very right. This will open the "Asset Manager" window. In this window you will see a list of all the graphics you have uploaded. Once you have selected your image click the "ok" in the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)

Once you have selected the graphic, you can add a title, change the alignment; add a border, and set the spacing for the image. Any changes you make you will be able to see in the preview box at the bottom of that window.

Image Description:
The image description is there to help you keep track of your images when editing your graphics. The Image Description is not displayed on the site.

Title:
The Title setting is an optional setting that allows you to add an "alt" attribute to your picture. The alt attribute creates a small text window when someone mouses over the link. The alt attribute also is able to be read by screen reader software which is software used by visually impaired people to have a web page read to them. The alt attribute can describe the page/file that the link is for. This is especially helpful for visually impaired visitors who would not know what the picture was unless you describe it to them in the Title setting.

The Appearance Tab: (alignment, borders, dimensions, spacing)

Alignment:
You have a wide variety of alignment options from simple left or right alignment to aligning the picture with the top or bottom of the text. Feel free to experiment with the alignment. As you try different settings, you will see an example in the preview box to the right of that window. (Note: After inserting the graphic, you will be able to select it in the page editor and move it around the page with your mouse; however, you will be restricted by the choice you make for the alignment. So, if you choose a left alignment, you will be able to move the picture up and down on the page, but it will remain aligned to the left. You would not be able to move the picture to the right side of the page. You are, however, able to edit the alignment at any time and thus more the picture to the right by changing the alignment of the picture)

Dimensions:
The dimensions settings allow you to determine the specific width and height for the graphic in pixels. Enter the width in the left box and the height in the right box. You also have the option to "Constrain the Proportions" of the graphic. This means that if you change the width of the picture, then height will automatically be adjusted as well to keep the picture's proportions the same. This is selected by default. If you unselect the "Constrain Proportions" option, then the picture's width and height can be adjusted independently, but keep in mind, this can cause the picture to look distorted.

Spacing:
The Vertical and Horizontal spacing settings allows you to add additional blank space (or a buffer) around the graphic. You can adjust the spacing on the top and bottom (vertical) or left and right (horizontal) independently. Enter the number of pixels you want for the spacing.

Border:
The border feature allows you to add a border to a graphic. Enter the number of pixels to set the thickness of the border. The border is set as black by default.

Style:
As you change appearance settings, CSS style code will be automatically entered into the "Style" feature. You can also use the Style feature to modify the CSS settings or enter your own CSS settings. CSS can be pretty complicated, so we recommend that only people with experience using CSS use the Style feature.

The Advanced Tab: (Swap Image and Miscellaneous settings)

Swap Image:
If you would like the image to change when someone puts their cursor over the image or when someone removes their cursor from an image, you can do that with the Swap Image feature. This is most often used with graphical links where a second image is used when a visitor mouses over the graphic to indicate to them that they are over the link. The mouse out option changes the graphic after a visitor has put their cursor over the original image and then removes their cursor from the image.

To use the Swap Image feature, select the "Swap Image" check box. You will see folder icons appear to the right of the "For mouse over" and "For mouse out" options. Click the folder icon for the option you want to use (or both). This will open your Asset Manager. Select the graphic you want displayed for a mouse over or mouse out and click the "Ok" button in the bottom, right of the Asset Manager window.

Miscellaneous:
The Miscellaneous options under the Advance Tab of the Insert Image window are rarely used. You can give a picture an ID, select the language direction of the Title and Image Description, indicate a language code for non-English languages, setup an image map, and set a long description link. Due to the complexity of these features and the infrequency of their use, we will not be discussing them in these help pages.

When you have selected the source graphic file and entered the settings, click the "Insert" button at the bottom left of the window. Then click the "Save" icon in the top, left corner of the Page Editor.

*Tip: If you are not sure what dimensions you want, you can leave the width and height settings blank. Once the graphic is inserted, you can select the graphic with your mouse and adjust its size by clicking on one of the resize boxes around the picture and dragging your mouse. You can also move the picture around the page this way.

The logo feature allows you to display a graphical logo for your website title and slogan instead of the text version of the title and slogan. To setup your own logo click on the "Config" button either on the top menu or the center icon on your main admin page. Under the "Configuration tab, click on the "Upload" button to the right of the "Website" Logo field. This will open your Asset Manager. Select the graphic you wish to use from the list on the right and click the "ok" button at the bottom, right of the window. Then click the "Save Changes" button.

The graphic you are going to use for your logo must first be uploaded to your website before you can set it up as the logo. If you do not see the graphic you want to use in your Asset Manager, then you will need to upload it. You can do that using the "Browse" and "Upload" buttons in the Asset Manager. For more information about the Asset Manager and uploading files, please visit the "Asset Manager" help pages.

To upload graphics (or audio, videos, documents, or Flash objects) to your Asset manager click "browse". Find the file on your computer, select it, and click "open".

Next, click the "upload" button to add your file. You can click on the title of your graphic on the right side to preview your file.

For more information about the Asset Manager and uploading files, please visit the "Asset Manager" (link) help pages.

*Note: Free and Starter sites are limited to MIDI audio files and graphic files (.jpg, .jpeg, .gif). Gold, Silver, and Bronze accounts can upload all file types including recorded audio and video.