In addition to adding and formatting your text, the WYSIWYG Editor can also be used to add images to your web page.
Quick Overview of how to add an image
Step 1: Go to Site Management > Manage Pages, which lists all of the pages on your site. To choose your page, simply click on the page name corresponding to that page.
Step 2: Scroll down to Main Content under the Page Content section. If text and images have already been added to your page they will be displayed here. Click in the WYSIWYG Editor's text area. Move your cursor to where you want the image to appear. Unless you know HTML and are able to float an image to the right or left of a block of text, it’s generally best to put images before or after a paragraph of text.
Step 3: Open the Image Manager by clicking on the 
icon
Step 4: Click the Browse button at the bottom of the Image Manager. From here you can choose an image that is already on your web server, or you can upload a file located on your computer.
Step 5: Upload the image by clicking the Upload button.
Step 6: Locate the image in the thumbnail viewer and select it by clicking on it.
Step 7: Use the options in the Image Manager to apply any settings necessary. For instance, align the image to the right or add a border.
Step 8: Click OK. This will return you to the WYSIWYG Editor where your image should now be displayed.
Tips for Images
Its best to use PNG, GIF, or JPG images on a web page. You can use most photo-editing software to convert TIF and BMP images to JPG or GIF. Even the basic Paint program that comes standard with Windows can be used to do this.
It is a good idea to keep the file size of your images as small as possible and keep the image size to a reasonable amount.
File size (kilobytes): The larger the image the longer it takes to download when your site is viewed. Try to keep your images under 30Kb if possible. More than 50Kb will take a long time to download if a client is using a slow Internet connection. Keeping images small is particularly important if you plan on having lots of images on the one page.
Image Size (width and height): Most programs talk about image size in terms of Pixels (px). In most templates, the main text area will be 500-600px wide so you should keep images smaller than this otherwise it might break your template. A good size for large images is 350px wide, and 200px wide for smaller images. If you have text beside an image, or more than one image side-by-side, then images should be under 220px in width. If you are using more than one image on the page it’s a good idea to have the images the same dimensions (purely for aesthetic reasons).
About the Image Manager
1. Current Directory:
Current Directory is a drop down that shows the current folder you are viewing. Selecting a different directory will change the view to the selected directory. You can also click the Up 
button to go up a directory level.
2. Create New Folder:
You can create a new folder to store your images. This is particularly useful if you plan to have a lot of images on your website. You might want to organise them into folders to make it easier to manage them. For example your company might have multiple store locations and you can set up a folder for each store. When you click on the Create New Folder 
icon, a new dialog box will open asking you to enter the name for your new folder. Type in the name and click OK.
3. Thumbnail Preview:
This area shows all images and folders in the current directory. Only images and folders will be shown. Any non-image files stored in this directory will be hidden. All temporary files and folders will also be hidden.
- Select an image by clicking on the thumbnail associated with that image. The image details such as width, height, filename, etc. will appear in the fields (above 5).
- Browse a folder by clicking on that folder.
- Delete Image or Folder by clicking on the trash can
icon underneath the corresponding thumbnail.
4. File Details, Upload and Browse:
This area of the Image Manager displays details about a selected file and allows you to locate and upload a new file.
To upload a new image to the current folder, click the Browse button. A file selection dialog box will appear showing the files on your computer. Select the file to upload and click Open (Mac), or OK (Windows). The dialog box will disappear and take you back to the Image Manager. Then click the Upload button. Your image should now appear in the Thumbnail Preview area. Depending on the file size and the connection speed, it may take a while to upload.
To insert an image once it's been uploaded, select the desired image and click OK to insert the image into the page. Before clicking OK it’s a good idea to double check the details of the image appear in the fields (marker 4). Once you have clicked OK, the Image Manager window will disappear and you should see the picture inserted in the text area of your website. If the image doesn’t appear, repeat the above steps.
The final step in adding an image to your page is clicking the Submit button at the bottom of the Edit page. This will publish the image to your website.
5. Image Settings:
Image Alignment
You can set the alignment of an image (left, right, centred, etc.) using the Image Manager or the WYSIWYG.
If you have already inserted the image, double click on the image to bring up the Image Manager. Click on the drop down field Align and select the correct alignment. Click OK.
Alternatively, you can set the alignment using the WYSIWYG. Once you have inserted an image using the Image Manager simply click on the image to select it and with the image still selected, click on the appropriate justification button in the WYSIWYG.
If you would like to have an image floating next to a block of text (i.e. the text wraps around it), you need to know some HTML.
Image Width and Height
You can change the height and width of an uploaded image using the Width and Height settings. The chain link icon next is active when you are constraining the relative size of the image. Generally you want to do this. Untick the Constrain Proportions box if you don't want to (ie you want to make the image skinnier but keep its original height).
Important
It's better to make sure the image is the right size before uploading however. Changing the Width and Height doesn't actually change the size of the file, just how its displayed. So if you upload a poster sized image and use this to make it small enough to fit on your page, anyone visiting this page will have to wait for a huge poster sized image that might be several meg in size if you use a decent quality camera to download, even though they are just viewing a little image. If their internet connection is slow this could take a very long time. So its better to resize before uploading.
If your image is just a tiny bit too big then its ok to change the size using this.
Making an image larger can result in a loss of image quality.
Border
Add a border to an image. You can set how big the border is by entering a number. By default the border colour is black. Many templates in [[cmsadvantage]] have border settings in the code. In some cases, your template will apply a border to every image on your website without you needing to manually set a border. In these cases a border colour will generally be specified as well. If your template does this and you don't want a border on a particular image you can enter zero into the Border option to take the border off the image. If you want a larger border than your template automatically displays you can also increase the border on that particular image here.
Replacing an Image
If you want to replace an image on your website with another image, you can do this using the Image Manager.
- Go to Site Management > Manage Pages. To choose your page simply click on the page name corresponding to that page. Scroll down to Main Content under the Page Content section.
- Select the image and double click on it to bring up the Image Manager.
- To replace the image, either upload another image or choose another image that is already uploaded. Select the new image in the Thumbnail View and click OK. The image should now be replaced on your page. You won’t see the changes on your website until you click Submit at the bottom of the Edit page and refresh your browser (Ctrl+R).
Removing an Image
To remove an image simply:
- Go to Site Management > Manage Pages. Choose the page the unwanted image is on by clicking on the page name corresponding to that page. Scroll down to Main Content under the Page Content section.
- Select the image by clicking on it once with your mouse.
- Hit the Delete key on your keyboard.
