Members Login

Uploading and Using the Image Library

Add/Upload, Resize, Delete and Edit Images

To edit, upload, resize or delete an image from a website page you will need to go to the Content Editor screen for the page that you wish to edit.

Adding & Uploading an Image

  1. To add an image you to your page click on the Images Icon  in the Content Editor (See Using the Editor). 
  2. The Image Library will appear in a popup window (as shown on the right) which will feature any images that you already have in your library plus give you the option to upload a new image.
  3. Before uploading your image ensure that it is already optimised for the website i.e. 
    • Ensure the images dpi (dots per inch) is at 72.
    • Ensure that the image is cropped, that is any unnecessary background has been removed.
    • And that the image is approximately the size that you want to use on the page. The maximum size image that you should upload to your PowerSite is 650 x 450 however the smaller the image the quicker it will upload to your site.
  4. Once your image is ready, click on the Upload icon to add a new image. Please note only .gif .jpg and .png image files will be allowed. 
  5. A pop-up window will appear that will allow you to browse your computer to find the image that you wish to upload. 
  6. Use the Select File field to locate the image you wish to use on you local computer. 
  7. Give the Image a name with the Document Name field.
  8. If you wish to resize the new image tick the New Width box and enter the required pixel size that you would like your image to be. (You can also resize your image at a later stage (See Resizing an image).
  9. Select the Image Availability option to specify whether the image is available site wide or only on the page you are editing. (Unless you intend to use the ue the image on multiple pages just upload your image to This Page Only.) Once this is done press the Upload button this will upload a copy of the image from your local computer to your PowerSite image library.
  10. Once your image has been uploaded the Image Library Pop-up window will appear with a message telling you that your image was successfully loaded. 
  11. Click on the thumbnail of the image to insert it onto your page, or alternatively, you can enter the image into your page as a 100 x 100 pixel or 200 x 200 pixel thumbnail of the actual image size. This feature allows the user to click on the smaller image to view a larger pop up of the image. 

Resizing an Image 

  1. To resize an image that is already in your Image Library click on the Image Library Icon in the Content Editor. (See Using the Editor) 
  2. Located next to the Image is the current pixel size and a field that allows you to resize the image width. Enter the required pixels and click Submit.
  3. A pop-up window will appear with a preview of the new resized image. Click Accept if you are happy with the size. 
  4. Your newly sized image will now appear on the Image Library along with the old image. Click on the image thumbnail that you wish to use in your page content. Note: the Image size appears to the right of each thumbnail.

Deleting an Image from Image Library

Note: This deletes images from your library, not from the content in your page. Use it where you have images in your library that you are not using. 

  1. To delete an image from your Image Library click on the Image Library Icon in the Content Editor. (See Using the Editor)
  2. Click on the Delete link located to the right of the required image. 
  3. A new pop-up window will appear that will show a preview of the image with a Delete link in the bottom centre of the page.
  4. Click this link to remove the selected image from your Image Library. Your screen will return to the Image Library with the image removed. 

Deleting an Image from page content

  1. To delete an image from your page content click on the desired image in the Content Editor until handles appear as shown on the right and press the delete button on your keyboard.

Editing an Image in your Page Content

  1. To edit the image properties click on the desired image in the Content Editor until handles appear as shown on the right. 
  2. Right click on the Image to produce the Image editing list. Select Image Properties.
  3. A pop-up window will appear containing a number of different fields with information about the selected image.
    • URL: disregard this field
    • Alternative Text: Any text entered in this field will appear when a website visitor holds their cursor on the selected image. You can enter a short description of the image here.
    • Width: This field allows you to determine the size of the image via the width. To scale height and width independently click the lock icon to the right to unlock ratio scaling.
    • Height: This field allows you to determine the size of the image via the height. To scale height and width independently click the lock icon to the right to unlock ratio scaling.
    • Border: This field allows you to enter the width of the border around your image. (0= no border & 9 = wide)
    • HSpace: This field allows you to edit the horizontal  padding around the image (left & right)
    • VSpace: This field allows you to enter the vertical space around the image (above and below)
    • Align: Choose from a dropdown box as to where you would like to align the image in regards to the rest of the page i.e. left, right, top, and bottom. 
  4. Once you have completed editing the image click on the Ok button and you will be returned to the Content Editor.