Editing Website Content

This help section contains advice on editing website content, for example in Forum Topics (all members), or in Meet and Tour descriptions (meet and tour leaders only) or in Pages and News Items (editors only).

Each content type has different fields which may either contain plain text or HTML (allowing a full range of rich content). Fields which allow HTML have an editor toolbar at the top of the field:

The buttons in the editor toolbar allow formatting to be applied to the text in a similar way to a word processor like Microsoft Word. For those people with the relevant skills, the “Source” button toggles the display, and allows HTML to be edited directly.

The meaning of the buttons in this toolbar are shown below. Most of these are fairly obvious and operate in a similar way to a word processor, but further explanation is given below for those buttons marked *:

Button Title
  Cut, Copy, Paste
  Format - Allows the HTML format to be specified (experienced users only).
  Bold, Italic, Underline
  Numbered List, Bullet List
  *Insert Image
  *Insert Table
  *Link, Unlink
  Anchor (experienced users only)
  Source - Toggles the editor to allow HTML to be entered directly (experienced users only).


Adding Tables

The Insert Table button is used to add a table. The website standard is to set the “Border size” to 0 as shown below:
Table Properties

Once the table has been added, further properties can be set, for example by right-clicking on a table cell and selecting Cell / Cell properties. This allows the horizontal and vertical alignment of the cell to be set, and also the width of a column to be set (by setting the width as a percentage of the total table, or in pixels).

Cell Properties

Adding Hyperlinks

To add a hyperlink, first type the text you want to see on the page, highlight it, and then select the "Link" button which allows a hyperlink to be added to the selected text.

Links to external websites should have the protocol set to “http://” and be of the form “www.example.com/home”.

Links to other documents or pages within the website (relative links) should have the protocol set to “<other>” and  start with a "/" - they shouldn't include "www.eagleskiclub.org.uk" It is easy to see the required URL by checking the browser address when on the relevant page, but examples include:

  • /low-carbon-travel - for the introductory page on Low Carbon Travel.
  • /tours/tour-grading - for the page describing tour grades.
  • /uk-meet/mar-lodge-braemar - for the description of this Scottish Meet.
  • /club-tours/2015/haute-route-ossola - for the description of this Club Tour in the 2015 programme.
  • /system/files/Tour%20Application%20Form.doc - for the Tour Application form (in Word format).
  • /system/files/xxx.doc - for the xxx.doc Word Document added as a page attachment.

Adding Images

Before adding an image into the page, the file should be attached to the page (see below) - note that these should be of a suitable resolution for display on a web page e.g. around 50kb in size - not the full resolution size downloaded from a camera. Click on the “Add Image” button, and in the URL field add the link to the image - this will be of the form "/system/files/xxx.jpg" where xxx.jpg is the name of the image file.

To change the size of the image displayed on the page  use the "Width" and Height" fields in the “Image Info” tab.To display tooltip text which appears when hovering over the image, use the "Advisory Title" field in the "Advanced" tab. To add a hyperlink to the image use the "URL" field in the "Link" tab - this can be used to create a link to a fullsize display of the image.

Attaching Files

It is possible to attach image files and documents to the page, which can then be referenced from within the page. This feature can be used to include photos on the page; to include a trip report in Word or PDF format; or to include a custom application form for a tour.

To add the document to the website, use the “File Attachments” section – just above the Save button, select the required file using "Choose File" and then "Upload" it. This will then display the file in the list of attached files:

If the "Display" option is ticked, the file appears in a list of attached files at the bottom of the page. A better method is to untick "Display" and include a reference to the file within the main page - either as an image display (see above), or as a hyperlink to the document. Images and documents saved using this method can be referenced from elsewhere on the page using a URL of the form “/system/files/xxx.doc” or “/system/files/xxx.jpg”.