Add an Image
Adding an image to a page helps to diversify the content on your site and generally makes information more appealing and easier for a site visitor to digest.
Last updated: 09 May 2012, 15:55
To add an image, select the Image Manager tab when editing a page - 
.
The following window will open. Select the required image from the list at the left hand side and select 'Insert'.
If the image does not appear in the list of files, it means that it has not been uploaded. We recommend that all files are uploaded to the Resource Gallery using the Asset Uploader, prior to editing the page.
On inserting the image, the next step is to right-click on the image and select Set Image Properties, which will open the below window.
| Border Width | The required width, in pixels, of the image's border. |
| Border Colour | The colour of that border. |
| Image Alt Text | The text that describes the image if a screen reader or a text only browser is used. It must be more than one word in order to adhere to accessibility guidelines. This field must be completed as a mandatory requirement before the page can be saved. |
| Long Description | If an image is inserted that cannot be easily conveyed in the Alt Text, a URL can be entered in this field that will take the visitor to a page that contains a long description of the image i.e. the statistics of a graph. |
| Image Alignment | The required alignment of the image in relation to the text. |
| Horizontal Spacing | The amount of space to leave between the left and right edges of the image and the text. |
| Vertical Spacing | The amount of space between the top and bottom of the image and the text. |
| Width & Height | Images can be re-sized within the OneStopCMS solution, although we do recommend that images are sized correctly prior to upload. You keep the image proportional by selecting 'Constrain'. |
Scaled Images
To insert a small version of an image onto a page which can be clicked on to see the full size image, you can use a Scaled Image.
- Insert your image into the page in the normal way.
- Click on the Image, and then choose 'Scaled Image' from the CSS Class dropdown.
- Right click on the Image and choose 'Set Image Properties'. Click 'Constrain' and choose a smaller size for the image.
- When you save the page, the small version of the image will be embedded in the page, which can be clicked on to view the full size image.
