Working with Images

First, before uploading your image, make sure it is 'Web Safe'

What makes an image 'Web Safe'? A web safe image is an image that is no larger than 800kb in size and 700 pixels in dimension. If you were to upload an image that was 3 MB (from a high quality camera) then not only would it take a long time for the browser to pull it up but it would be very large in dimension.

How to make an image 'Web Safe': If you do not have image editing software that allows you to resize an image then you can use a free image resizing website such as ResizeImage.org


Next, upload and insert the image into your content

  1. Go to the page in the administration (such as the article in the article manager) where you want to insert the image.
  2. At the bottom left of the text editor you will see the 'Image' button (see picture below)

    3. 3. Click 'Browse' to find the image on your computer and click 'Start Upload'
    4. Once you get an 'Upload Complete' notice your image has been uploaded to your website
    5. To insert the image into the page simply click the thumbnail of the image and click 'Insert' at the top right of the screen





Finally, if you may need to adjust the position of the image

By default, images that you insert will automatically have text positioned above and below the image, to change this (and for example, align the image to the right or left of the image):

  1. Click on the image so you get the resize boxes to show around the image (see picture below)

    2. 2. Click the 'Edit Image' button at the top of the text editor:

    3. You can edit the following fields:

  • Image Description: You can put a short description of the image for devices that may not be able to pull up your image
  • Alignment:

  • Border: If you want to add a solid border around your image you can enter a numeric value here, the higher the number, the thicker the border
  • Vertical Space: If you need more space around your image you can enter a numeric value here, the higher the number, the more of a vertical (up and down) space
  • Horizontal Space: If you need more space around your image you can enter a numeric value here, the higher the number, the more of a horizontal (left and right) space