Inserting Images using the Rich Text Editor

Images do not have to be inserted onto an item category page using the Browse button, the Rich Text Editor may be used instead.

The Rich Text Editor is a small application that works in a similar way to a word processor in that it enables you to add content, e.g. text, images, tables, hyperlinks, etc. to a Web page and format that content without needing to know html. It also enables more flexible insertion and management of the content elements in conjunction with one another than some of the other methods of image insertion within the system, e.g. the browse button.
Important: Before uploading and adding images to pages / components via the Rich Text Editor, please see here for important information

How to add an image with the Rich text editor

There are three steps to adding an image to a category page using the rich text editor:
  1. Locate the top level item category page to which you wish to add the image
  2. Upload the image
  3. Insert the image

Step 1: Locate the top level item category page to which you wish to add the image

  1. Click on the Items tab
  2. This will display the item tree by default. Click on the category name and this will highlight the category and display the actions that may be performed with regard to that category

Step 2: Upload the image

  1. Click on the Edit category link 
  2. This will display the category editor page as an editable form. Any details that already exist for the category will be displayed in the form. In the rich text editor, i.e the detailed description box, click your cursor where you wish the image to be inserted. Click on the Insert image icon
  3. This will display the insert image dialogue box. The dialogue box contains a row of folders. If you wish the image to be stored in one of the existing folders, select / open the folder by double clicking on it

    Please note: If you make a mistake, use the Up one level icon  in the toolbar to return to where you were, and reselect the correct folder
    Please note: If you wish to create a new folder, click on the create new folder icon . This will display the new folder dialogue box. Enter in the folder name and click on OK. This will add the folder to the dialogue box.  Also, ensure that the folder name does not contain spaces or special characters.  Only use underscores ("_"), dashes ("-"), numbers and letters in naming your new folder to avoid issues with the Rich text editor's file manager.  
  4. Open the folder by double clicking on it
  5. Click on the Browse button 
  6. This will display the choose file dialogue box. Locate the image you wish to insert. When you have found it, click on it to select it. Click Open
  7. The choose file dialogue box will close, displaying the insert image dialogue box again. In the input box labeled Upload, the pathway (address) to the image location will have been entered. Click on the Upload button to the right of the browse button
  8. This will upload the image into your selected folder – it will now be visible in the insert image dialogue box
    Please note: If you do not wish to add the image to the page at this stage, you may stop at this point and add it at another time. If so, click on the Cancel button to return to the item editor page. If you do wish to add the image to the page, continue on to step 3

Step 3. Insert the image

  1. Click on the image to select it
  2. This will enter the link to the image file into the Image File input box. The image alt tag is also automatically created and entered in the input box beneath. Click on the OK button

    Please note: The image Alt tag is the text that describes an image when it is not visible to a site user because for example they are using a text only browser or have their images set to not display – perhaps because they are using a very slow connection and the images would take too long to download
  3. The insert image dialogue box will disappear and the image will be inserted into the content input box. Click on the OK button to save the change to the item page
  4. Return to the front end and either navigate to the edited page or if already on it, hold down Ctrl + hit F5 on the keyboard to refresh the page and view / check the change