UXELLO : CMS Help

Adding and Deleting Images

There are two main ways to add images to a webpage.

  1. Using the gallary system or page embedded gallery. See using the gallery for more information. This is a more simple method and requires no knowledge of scaling images, recommended for the beginner!
  2. Rescaling and including the image into the text content. This is more involved but will give more flexibility on location and size of the image. The following sections describe this second method.

Images can be added to any web page. This is a multi-stage process as the images first have to be small enough to load onto the website. Then it can be uploaded to the website, and finally it can be used and positioned on the page. Please remember images are stored on the website in a central location, every website manager has access to these files, so please keep the resource area tidy and do not delete someone elses images!

NOTE: Using this system images MUST be scaled for the website and so images SHOULD NOT be used straight from a camera or you will cause usability issues for visitors to the site as these images will be very slow to load.

Resize the image

  1. Locate the image on your computer. The image will need resizing. This will have to be accomplished with photo editing software. I currently recommend Pixlr which is a free online image editor requiring no installation to your PC. It can be found here: http://www.pixlr.com/editor/ 
    Picasa is free and another very good editor for this process as it can resize multiple images in one go.
  2. Using your photo editing software, resize the image. A guide is no more than 500px across for a full width. This is approximately the maximum width that will fit on the website. A .jpg file is normal for photos. If the image is to be used at the side of a paragraph, then the maximum with should be around 200px-250px to allow text to wrap around the image.

Insert the new image

  1. Open the website manager and edit the page you require to add the image to.
  2. Place the cursor in the 'Document Content' area. It is usual to place the cursor at the first character in a paragraph.
  3. Click the 'Insert/edit image' icon (icon of a tree).
  4. In the new window click the 'Browse' icon for the 'Image URL'.
  5. A resource browser window will display. Images for different sections of the website are usually stored in distinct sub-folders. Click on the folder for the section you require.
  6. To load the image into the folder click the 'browse' button near the bottom right corner of the page.
  7. Choose the resized image located on your PC drive and close the select window. The path will be displayed in the resource browser.
  8. Click the 'Upload' button in the bottom right corner of the window and the image will be uploaded to the website. Note, if the image is too large (50K is guide to the recommended maimum) then there will be a failure.
  9. The uploaded file will then be displayed in the resource browser.
  10. Select this image and the resource browser will close.
  11. Enter an 'Image Description' and 'Title' (usually the same text) to label the image.
  12. Click 'Insert' to add the image. to the page.

Position the image

  1. The image can be left, center or right aligned using the appropriate button on the editor toolbar.

Deleting an image

Images can be deleted from the page as follows.

  1. Open the website manager and edit the page you require to add the image to. 
  2. Select the image in the 'Document content' with the left mouse button.
  3. Use the 'Delete' key on the keyboard.

Note that this will not remove the image from the file system on the website. You can always return to the Resourse Browser (as in steps B) to add the image back in. It is not necessary to upload the image again. If you wish to remove the image from the resource browser as well then perform the following:

  1. Place the cursor in the 'Document content'. It is not important where the cursor is in the Document Content.
  2. Click the 'Insert/edit image' icon (icon of a tree).
  3. In the new window click the 'Browse' icon for the 'Image URL'.
  4. A resource browser window will display. Images for different sections of the website are usually stored in distinct sub-folders. Click on the folder for the section containing the image you wish to delete.
  5. To delete a particular image from the Resource Browser and hence the whole website click the 'Delete Image' icon (a red cross) underneath the image you wish to delete.
  6. You will be asked to confirm the deletion. 
  7. You can then close the resource browser by clicking the close window cross in the top right corner of the window (as you would to close any desktop window).

Important note: Be aware other sections and pages of the website may be using the same image. As the image resource is shared accross the whole site be confident that the image has not been used on another page before deleting it from the Resource Browser. If it is deleted other pages using the image will display a blank spot on the page where the image would have been. Also it would be prudent only to delete images you have uploaded!

Help and FAQ Overview

Glossary - Common terms used in these help pages.

Best Practice - Some golden rules for creating website content.

Help Topics

Using the Diary - (if installed)

Using the Headline Ticker - (if installed)

Using the Gallery - (if installed)

Using the NEW Gallery - (if installed)

Using the eNewsletter - (if installed)

Using the NEW eNewsletter - (if installed)

Using the Noticeboards - (if installed)

Using the Upload/Download Table - How to load files such as PDFs to the website and link text to the file.

Creating and Editing Webpages - Basic instructions on create pages.

Formatting Content - Good practice for formatting text content, headings and tables

Adding Text from an Existing Document (e.g. MS Word) - Instructions on including external text.

Uploading and linking files - How to load files such as PDFs to the website and link text to the file.

Linking to other pages - Link text to an external page or other page on the website.

Linking to sections on the same page - Link text to a paragraph on the same page using 'Anchors'.

Adding and Deleting Images - Embedding images in your text.

Managing Member Accounts - (if installed)

FAQ

I have forgotten my password - How to reset it.