If you are writing an article or blog, or just creating a basic "My Page", you will often need to insert an image into the page in a certain location.  This may be accomplished through the image button on the Visual HTML editor in the CMS (highlighted below with red box).

If you click this button, it will open up a window that gives three options for inserting an image. There are three tabs that you can select:

1. From Computer: find an image on your computer and upload it directly.
2. Image Library: browse your image library for previously uploaded images.
3. From URL: enter a URL to an image located on another website.

Once you upload or choose an image from your library you will be presented with some options for size, alignment, title, etc. Remember, if you upload an image, you must be patient for it to upload. This may take a while if you are uploading a large image or your internet connection is slow. Unfortunately we currently don't have a progress bar to give feedback. So wait a minute and if it still hasn't uploaded you may need to hit the "upload" button again.

Options Explanation

IMAGE LINK

If you insert a small thumbnail of the image, you can choose to link to the full-sized version of the image. This will put a link on the image so that a "lightbox" appears that displays the full sized image without the page reloading. It's a very popular affect that makes it easier for people to view the details of an image. For example, click image above to see the full sized image.

SPECIFYING SIZE

You will be given several size options to choose from, based on the image sizes that are available for the image you selected. Choose the size that's best for you: Small (150px), Medium (250px), Large (400px) or XL (600px). Be careful not to insert an image that is wider than the area you are inserting it into, or it could break the layout of your page.

ALIGNMENT

You can choose to make the image float left or right with the text flowing around it, or have it centered on it's own line.

STYLING

Some websites have specific styles that apply to images, e.g. a drop shadow that makes it look like a photograph, or a special border. If you want this special style to apply to the image, you can check this box. Otherwise if you leave it unchecked, the image will not have any special styles applied to it.

ADVANCED CSS

When you choose to align your image "left", "right" or "center", you will notice that some CSS style information appears in the "CSS Style" field. You can edit this if you want to add some special styling of your own. Note the code in the Style field at the bottom, we have specified that the image will float to the left and will have 10px of margin on the right and 5px of margin on the bottom:

float: left; margin-right: 10px; margin-bottom: 5px;

This requires some basic knowledge of CSS, but it is very easy for advanced users to learn. If you wish to learn more CSS we recommend www.w3schools.com, they have great tutorials and reference.