D4D Website Editor Guide

This guide describes how to add news articles to  a Bathcomms website. 

News stories are created as Articles within the Joomla! Content Management System. The process for doing this is described below:

XStandard Editor

In order to add/modify news articles you'll need to equip your computer with the WYSIWYG browser based editor we use.

It's called XStandard Lite and you can get a free copy for: PCs at http://xstandard.com/download/x-lite.exe and for MACs at: http://xstandard.com/download/x-lite.dmg. Instructions for using XStandard Lite (if you need them) can be found at: http://www.xstandard.com/en/documentation/xstandard-end-user-guide/interface/

Creating New Articles

To create a new article:

1. With your web browser open a new tab and go to http://www.yourwebsitename/administrator
2. Perform the 2 stage login (details are supplied seperately)
3. Click on Content on the top horizontal menu, then click on the Article Manager dropbown.
4. Click on the New Icon (a white cross on a green background)
5. An editor page should be displayed (see below). Enter the article's title in the field above the tool bar (not in the body of the editor). These will be automatically styled with the H1 (Heading 1) html tag
   
   
   
   
   
6. In the Section and Category drop down fields select the appropriate location for your article.
7. Add content to the edit box (see below) and regularly click "Apply".
8. If/when you are happy for the News Article to appear on the site, select the "Yes" radio button for the "Published" field. you can then open a new brouser tab and use this to check how your changes have affected the live site,
9. To finish editing a particular article click "Save"
10. To close the Joomla! part of the site click on "Logout"

Editor time outs ... a word to the wise

Editing is done over the internet with all it's propensity to disconnect when least expecting it. Also, for security purposes a session timeout has been applied. For these reasons you should regularly back up your editing work. Use the 'apply' button (green tick to do this) - this saves the document but does not close it, allowing you to carry on working. Alternatively you can complete your editing offline and paste from a Word document - but beware to only use 3 levels of header (nb. images can not be pasted from Word).

Note too that with some browsers the editor may jam and then shut down the browser.... so it's best to be prepared by regularly clicking "Apply".

Adding Text

Text to appear in an article can be pasted or typed into the xstandard editor box (the large box on the bottom left of the page).

Editor styles

The font size and style can be modified by selecting the text and then clicking on the appropriate style found in the dropdown menu above the rleft of the edit space (below the "Section" select box). For News items, Header 1, Header 2 and Hearder 3 styles may also be useful.

Links (hypertext)

To create a link select some text and/or an image and click on the chain-link button on the editor toolbar. To link to another page open another browser window, browse to the page and cut and paste the page's URL into the location field link pop up window. Add a link description and select whether the link should open in a new window.

News Article Images

News items can contain images.

It is recommended that images are a standard size in order to look consistent across the site (although this is not essential). You should pre-prepare images to this size using an image editor prior to uploading. A good on-line image editor which is ready to go right away is: www.pixlr.com. Downloadable editors included: Picasa and Gimp.

As you are preparing images, crop them so as to 'tell the best story' removing unwanted sky etc. to focus in on the subject. It you are able to, it's good to also use colour balancing/contrast and sharpening to get the most professional look possilbe.

File formats for photos should be jpeg (compression setting: 80) with a resolution of 72 pixels per inch.

Recommended image sizes are:

Uploading News Images

To upload an image, click on the 'Image' button below the content editor, then:

1. Click on the relevant destination folder displayed as a folder icon in the popup (or via the "Destination" dropdown). For Bath Stories or Vienna Stories, images are uploaded until the News folder. The Images Popup is shown below:
   
   
   
   
2. Click on the 'Browse' or 'Browse Files' button at the bottom of the pop-up.
3. Find, on your local computer, the image that you want to upload.
4. If you have the Flash plug-in installed and enabled in your browser (you will see a 'Browse Files' and not a 'Browse' button) then you can repeat all of the above as many times as you like, i.e. upload multiple images in one go (as long as you want them to all be uploaded to the same destination directory).
5. Click on the 'Start Upload' button. At this point you may be promoted for a username and password. If this is the case then enter the first stage login username and password as shown above. This is NOT your personal account login. If you allow your browser to save the username and password then it shouldn't ask for it again the next time you upload an image.
6. Once the upload process is complete the image(s) should appear in the browse area of the images popup.

Important Note: For security reasons it is currently not possible to delete or overwrite images using this method. This can only be done using the Media Manager which is a site administrator facility.

Inserting News Images

To insert images into your content, use the 'Image' button below the content editor, then:

• Click on the image that you would like to insert (selecting the appropriate directory)
• Enter a brief description of the image in 'Image Description'. This is a mandatory field (good for accessibility and the search engines).
• If you would like some tool-tip text to show when a visitor hovers the mouse over the image then put this text in the 'Image Title' field.
• If you would like a caption to appear underneath the image, then go to the 'Advanced' tab and choose 'caption' from the dropdown menu next to the 'class' at the top of the popup window. You should then enter the text for the caption in the 'Description' field. If you are unable to enter text into the Description field then go to the first tab, called 'General', and ensure that 'Decorative image' is set to 'No'.

Positioning Your Image

 The standard image position is left on the page. This can be varied when there are multiple images. Also unless for large images or for artistic effect, images should have text wrapped around them to save space on the page and look better generally.

To acheive this click on the image in the editor window and then select Alignment and Left or Alignment and Right using the select box above the top left of the editor box.

For example the Bath Bridge Image has Aligment-Left set and the Vienna Statue image has Alignment-Right set