Most images and files that are displayed on the website are uploaded to the site's file browser.

The file browser can be accessed in a couple of ways:

  1. via the Administration menu under Content > Browse files
  2. via the WYSIWYG editor when inserting an image or link.

1. Upload via administration menu

To upload images or files to the File browser, follow the steps below.

Step 1

Hover over Content to expand the menu. Move the mouse pointer over Browse files and click it to open the file browser. 

File browser menu link

The file browser displays. Images and files are stored in 2 separate folders in File browser, viz. files and image

file browser

Step 2

Before uploading the image, ensure that the image tab is selected by clicking on it.  Click upload to upload the file from your computer.

Upload file

Step 3

The windows explorer window opens.  Navigate to the location where the image is stored.  

  1. Click on the image to select it
  2. Click open to upload the image.

Select image in windows explorer

Multiple images can be uploaded at one time. Select all images before clicking open.

Step 4

Upload finished displays if the image is successfully uploaded. Click close to close the File browser and return to the website.

image successfully uploaded
 

Top of page

2. Upload & insert an image via WYSIWYG editor

In-line images can be added to the file browser while creating content using the WYSIWYG editor ( What You See Is What You Get)

Step 1

  1. Position the cursor where the image should be inserted.
  2. On the WYSIWYG editor, click the image button, to insert an image via the Image properties window. 

Select image button on WYSISYG

Step 2

The image properties window displays. Click browse server to select an image.

Select browse server on Image properties

Step 3

The file browser image folder displays. Select the image if it is on the server or click upload to upload an image from your computer via windows explorer or Finder for Macs.

File browser upload

Step 4

The windows explorer window opens.  Navigate to the location where the image is stored.  

  1. Click on the image to select it
  2. Click open to upload the image.

Image upload

Multiple images can be uploaded at one time. Select all images before clicking open.

Step 4

Upload finished displays if the image is successfully uploaded. Proceed to Insert in-line image to insert the image.

Step 5

Click choose or double click the image to insert it in the body field where the cursor has been placed.

Insert image

Step 6

The image properties window opens.

  1. relative link to the image is inserted in the URL field.
  2. Insert alternative text to explain the image if a caption will not be used.
  3. Select the alignment of the image
  4. Select captioned image to explain the image if alternative text will not be used. Option to add the caption will only be available after OK is clicked.
  5. Click OK to save the image properties.

completed Image properties

You are returned to the body field to complete the rest of the content.
 

Top of page

3. Create a subfolder

A file structure can be created in file browser to organise the stored images and files.

Step 1

Access the file brower either via the administration menu or via the WYSIWYG editor if you are creating or editing content.

Step 2

  1. Select the parent folder and
  2. Click New subfolder.

Select new subfolder

Step 3

The new name pop-up displays.

  1. Enter a new folder name
  2. Click OK

Enter new folder name

The new subfolder is added.

new subfolder added
 

Top of page

4. Delete subfolders

Empty subfolders that are no longer required can be deleted.

Step 1

Access the file brower either via the administration menu or via the WYSIWYG editor if you are creating or editing content.

Step 2

Right-click on the folder to be deleted and click Delete.

Delete subfolder

Step 3

Confirm that the subfolder can be deleted by clicking OK. If you are certain that you would like to delete the folder, click the OK button and the folder will be permanently removed.

Confirm sub-folder deletion

The subfolder is deleted.
 

Top of page

5. Moving files

The location of an uploaded image can be moved without requiring the image to be re-uploaded.

Step 1

Access the file brower either via the administration menu or via the WYSIWYG editor if you are creating or editing content.

Step 2

  1. Click on the file to be moved
  2. Click move

Select move file

Step 3

Select the destination folder for the file.

Select the destination folder

The file is moved when the folder is selected.
 

Top of page

6. Rename a file

  • Uploaded images can be renamed. 
  • If the image has been linked to, renaming it will break the link. Therefore ensure that the link is updated on the relevant page after the image is renamed.

Step 1

Access the file brower either via the administration menu or via the WYSIWYG editor if you are creating or editing content.

Step 2

  1. Click on the file to be renamed
  2. Click Rename

Rename file

Step 3

Enter the new name and click OK

Rename file

The file name will be updated.
 

Top of page

7. Deleting files

When deleting single files or images within the File Browser, make sure the file you want to delete is properly selected so that it is highlighted blue.

If the file is not highlighted blue then the actions at the top such as ‘Delete’ are actions for the folder, not the file.

Depending on what you last clicked on, a file may have only a yellow border around it which makes it appear to be selected, although it is not. Clicking ‘delete’ when a file is not properly selected could delete the entire folder and all the files within it.

Example of a correctly selected image in blue:

Example of correctly selecting a file in the file browser

Top of page

8. Replacing existing files

You can replace an existing file so that the file ID remains the same and all links to it will continue to work.

  1. In the admin menu, go to Browse files
  2. Select the file you want to replace (it will turn blue when selected)
  3. Right click on the file and select Replace File, OR select the Replace File button at the top of the screen.
  4. Choose the file on your computer.
  5. Click Replace.

Note: The uploaded file must have the same file name and type as the original file.

How to replace files in the file browser

Top of page

9. Accepted file types

The File browser accepts the following file types:

asf,csv,doc,docx,ens,gz,gzip,mp3,ods,odt,pdf,ppt,pptx,rar,rtf,tar,tgz,txt,vsd,xml,xls,xlsx,zip,ics

The Image browser accepts the following file types:

png,jpg,gif,jpeg

Top of page