CMS User's Manual With COIN Content Management System (CMS) all FAO Representation offices are provided with a basic Website structure which can be updated by each office directly without prior technical knowledge. This new technology replaces the use of the old html templates which only few offices had used until today.

This default Website contains pre-loaded information of general nature and also information extracted dynamically from the COIN database. This ensures that data is always kept updated and the website can stand on its own before it is edited and expanded by each individual office.

Please be aware that all pages must be edited locally by each country office and the pre-loaded information must be deleted, with the exception of the following:

"Right-End section": this section cannot be deteleted or changed, but new items can be added to it.

"Contacts page": This page cannot be deteleted or changed, since its data is dynamic and it is kept updated by COIN. Additional Staff can be added if required.

Contents Guidelines

These guidelines suggest what type of content should be inserted in each page of the website:

Home: General introduction on FAO's role and activities in the country Projects: List of Local projects, Regional and TeleFood projects linked to

their individual pages New & Events: List of Local News and Events linked to their individual pages Country Information: Description of Country main agricultural production and

problematic Virtual Library: List of Local publications linked to their individual pages Links: List of useful Local and International external links Vacancies: List of Local vacancies if any, if the text is too long, make a link to

another page. Contacts: Additional Staff can be added to the pre-loaded information, but it

must be kept updated by your office. It is strongly suggested for security reasons not to insert staff personal e-mail addresses.

Important Notes:

Before a link is created to an Internal page, the page must be created and published first (refer to the Back-End Environment).

If a country office is in charge or is responsible for another country, a separate website for the other country must be requested. (In the example of Jamaica,

two more website must be created for Bahamas and Belize). For this reason the information inserted in the "Projects", "News and Events" and "Country Information" pages must be Country Specific.

New Folders, Pages and Menu items can be created and added to the Website as per Office requirements.

How to get there

The COIN CMS is accessible from COIN at the following address: http://coin.fao.org or https://coin.fao.org

After login with your COIN user's name & password, click on "Global Functions" on the top navigation bar, then select “CMS”.

In the COIN CMS access page, click on the "Open CMS" button.

CMS working environments

COIN CMS is divided into two working environments: the Front-End and the Back-End Environments.

The Back-End environment is used to create website structures from predefined templates, language setup and all File management activities (new folders and pages).

The Front-End environment This can be accessed in two modes:

the “Edit” mode which allows you to insert content on the website and the “View” mode which is the actual website published on the internet

available at the following address: http://coin.fao.org/cms/world/jamaica/Home.html (if accessed from the intranet) otherwise https://coin.fao.org/cms/world/jamaica/Home.html

Please note that this example refers to "jamaica", you must change the name to your own country (with no space in between words).

After login you are automatically in the Back-End environment and in order to view/edit the website you need to access the Front-End environment.

The FRONT END Environment

The Front End environment is made of two modes:

the “Edit” mode which allows you to insert content on the website and the “View” mode which is the actual website published on the internet at

the following address: http://coin.fao.org/cms/world/jamaica/Home.html (if accessed from the intranet) otherwise https://coin.fao.org/cms/world/jamaica/Home.html Please note that this example refers to "jamaica", you must change the name to your own country (with no space in between words).

How to get there

After login you are automatically in the Back-End environment and in order to edit the website you need to access the Front-End environment. To do this click on the “Sitemap” section.

Click on your "Country", in this example we have used Jamaica.

COIN CMS Sitemap view

Website Main Screen

To view/edit the contents of the pre-loaded pages click on the "Goto Page" icon next to the chosen page.

This action will open the selected page in a new window (Front-End environment) ready for editing. In this example we have clicked on the "Home" page.

If you are logged in the COIN CMS you are automatically in "Edit" Mode, this is easily detectable since you will have the CMS Edit Toolbar on the right hand side of the screen as in the image below.

Website Home page

Toolbar Functions Front-End Environment

With the Riot toolbar you can "Edit" an existing component or "Add" a new component using the following functions:

Add a New Component Front-End Environment

Click the "Add" icon on the toolbar to add a new component.

This action will create an "Insert box" in the "Main" and on the "Right-hand" sections.

Select the insert box in the location where you need to insert the component. A pop-up window will display all selectable components. Component will differ depending on the "Insert box" selected.

Main Section The main section has the following main components to select from:

Headline Subheader Paragraph Image Upload Image Link Table Advanced Table Extra Components

Headline

Click to insert an Headline, this is edited directly on the page by clicking on the "Text Editor" icon.

Subheader

Click to insert a Subheader, this is edited directly on the page by clicking on the "Text Editor" icon.

Paragraph

Click to insert a Paragraph. The new paragraph can be edited by clicking on the "Text Editor" icon. This action will open the text Editor window where text can be inserted.

Important Information: Please note that each paragraph must be inserted individually to allow the placement of pictures or tables in between.

Text can be changed just by typing over it or using the copy/paste function available with the mouse right click.

Text can be further edited by highlighting an area and clicking on one of the available editing tools in the "Text Editor Toolbar" described below:

Important Information:

When you copy/paste a link, test the link afterwards. If it is not working click on the link function in the text editor to enter the correct URL.

Before placing a link to an internal page, the page must be created and published first in the Back-End Environment. Same thing is required to place a link to a document, this needs to be uploaded first in the Upload documents section of the Back-End Environment.

Image Upload

Click to insert a container for an image. Images can also be inserted in the Right Hand section of the website.

Important Information: Before inserting an image, make sure that the image has been reduced to its final size you need for the website. The maximum width allowed for an image is 400 pixels. This can be done using a Photo Editing Software.

To insert the actual image, click on the "Properties" icon on the toolbar, then click on the container for the image and select the image to upload from your hard drive by clicking on the "Browse" button.

Once the image is in place, click on the horizzontal bar to zoom In or Out, reposition the picture by moving it within the space and to resize the picture, use the triangle on the bottom right-hand side.

Once you are happy with the picture click the ok button.

If you need the text to be wrapped around the image, click the "Properties" link, select the image and choose Class“ Left or Right” from the drop-down menu.

Insert an Image

If you need the picture to be on the right hand side, without the text wrapping around it, Class should be set to "Right" and select the “Clear” check box.

You can also insert a caption on the picture which will be displayed underneath the picture.

Click HERE for a simulation on how to insert a picture.

Image Link

This function is very similar to the image upload function, but it allows not only to upload an image but also to link the image to a url.

In addition to the standard image upload fields if you keep scrolling down the pop up window there are two additional fields: the "Alt" and the "Link*" fields.

"Alt" stands for alternative text which will appear when the mouse rolls over the image. Enter here a description of the url you want to link.

The "Link*" field is mandatory, in this field you must enter the url you want the image to link to. Enter the full path of the url as per the above example.

Edit an Existing Component Front-End Environment

The Following Components can be edited using the Toolbar Functions:

Edit Headings Edit Paragraphs

o Text Editor Toobar Edit Images Remove components Change Component Properties Publish Changes

Edit Headings

Headings are editable directly on screen, click on the "Edit Text" icon on the toolbar and the click on the text.

Edit Paragraphs

To edit an existing component click on the “Edit Text” icon on the toolbar and then select the paragraph you need to change. This action will open the Text Editor as per the image below:

Text Editor

Text can be changed just by typing over it or using the copy/paste function available with the mouse right click. Text can be further edited by highlighting an area and clicking on one of the available editing tools in the "Text Editor Toolbar" described below.

Text Editor Toolbar

Once all changes have been made, click the "OK" button to confirm.

Important Information: Before placing a link to an internal page or document, it must be created or uploaded (in the case of a document) and then published in the Back-End Environment.

Click HERE for a simulation on how link text to a file (previously uploaded).

Edit Images

Images can be Replaced, Edited or Moved

To Replace the image, click on the "Properties" icon on the toolbar, then click on the existing image an select the new image to upload from your hard drive by clicking the "Browse" button.

To Edit the image, click on horizzontal bar to zoom In or Out, reposition the picture by moving it within the space and resize the picture clicking on the triangle on the bottom right-hand side. If you need the text to be wrapped around the image, select the image and choose Class“ Left or Right” from the drop-down menu. If you need the picture to be on the right hand side, without the text wrapping around it, Class should be set to "Right" and the “Clear” check box selected. You can also insert a "Caption" underneath the picture by typing text in the Caption text area. Once you are happy with all of the above click the "OK" button.

To Move the picture to another location click on the "Move" icon on the toolbar, the click on the picture and drag it to a new position in between paragraphs.

Click HERE for a simulation on how to insert a picture.

Remove Components

To remove components, click on the "Remove" icon on the toolbar and then place the mouse over the the component you want to remove, the component will be highlighted. Click on it to remove it.

Important Note: As soon as you have removed a component, click on another function on the toolbar to prevent removing other components by selecting them unintentionally.

Change Component Properties

It is possible to change Tables properties and Images by clicking the "Properties" icon on the toolbar and then select either the "Table" or the "Image".

If Table is selected, there will be a pop-up allowing you to change the number of Columns or Rows. If the table selected is a simple table (not an advanced table) then it is possible to "Show" or "Hide" Headings by clicking on the selection box.

If Image is selected the floating properties of the image can be changed as well as adding a text caption as in the image below.

If you need the picture to be on the right hand side, without the text wrapping around it, select the “Force new line” check box. You can also insert a caption on the picture which will be displayed underneath the picture.

If the image has a link, the "Alt" and "Link*" fields can also be changed.

Publish Changes

*Function available only to restricted users, please make an e-mail request to coin@fao.org if you want to publish one or more pages!

After having made the appropriate changes, the page must be published again. If you do not publish the changes, they will not be visible on the website, but they will be saved for further editing.

To publish the page, click the “Publish” icon on on the toolbar.

Click the “Apply” icon to confirm the publish action

Publish a page* *Function available only to restricted users, please make an e-mail request to coin@fao.org if you want to publish one or more pages!

To publish the page, click the “Publish” icon on on the toolbar.

Click the “Apply” icon to confirm the publish action

The Back-End Environment

The Back End Environment is used to create "Website structures", "Language setup" and all File management activities "New Folders and Pages".

How to get there

After login you are automatically in the Back-End environment, select the “Sitemap” section.

Click on your "Country", in this example we have used Jamaica.

COIN CMS Sitemap view

Website Main Screen

To view the pages click on the "Jump to nested list" icon next to the chosen page.

This action will open the selected page ready for editing. In this example we have clicked on the "News & Events" page.

Create New Folders and Pages Back-End Environment

Additional Pages or Folders structures are created in the Back End environment.

Create a New Page & Sub-menu Item

To create a Sub-menu item in the "News & Events" page, called "Archives 2007", select “NewsAndEvents”.

Click on the “+ Add” icon on the top right hand side of the screen and the following screen will appear:

Add a new page which will be visible in the left-hand navigation menu

In order to archive information a page folder must be created first. Enter the name of the folder in the Path component field.

Important Note! When entering a Path Component name, this must be continuous text (no space in between) so if the name has a space the letter following the first word must be in "Capital letters", for Example: “NewsArchives2007” or “EventsArchives2007” .

Keep the "Folder" check box unselected if you want this folder to appear as a sub-menu item on the left hand navigation bar under "News and Events" and leave the "Hidden" check box unselected. Click on the "Save" button.

Important Note! If you want this Path component to be a folder (Container) and not a Sub-menu item or Page, select the "Folder" check box and also the the "Hidden" check box. This is usually used to store extra pages which are recalled by links placed on "Visible" pages.

Authorised Users: To publish the "New Page & Sub-menu item" click on the “NewsAndEvents” link on the top navigation bar and then click on the "Publish" icon next to "NewsArchives2007".

Non Authorised users, please make a request by e-mail to: coin@fao.org

Create a New Page inside the New Sub-menu item

Now we can start creating the pages inside this new folder, so just click on the “NewsAndEvents” link on the top navigation bar and then on “NewsArchives2007”. Click on the “+ Add” icon on the top right hand side of the screen and the following screen will appear:

Enter the path component name “January2007” and select the Hidden check box. By selecting "hidden" the name of the page will not be displayed in the website main navigation menu (under News Archives 2007).

Click on “Save”.

To publish the new page click on the “NewsArchives2007” folder and then click on the Publish icon next to "January2007".

If you want to edit this page now click on the "Goto Page" icon which will open the selected page on a new window ready for editing using the Front End Environment.

Important Note: This new page does not show on the navigation menus therefore in order to access them you must create links in the "Archives 2007" page using the Front-End environment.

Important Note! COIN is still developing the “CMS document upload function” so for the time being if you have documents to be uploaded like .pdf, .doc or .xls just store them until the development is completed.

Manage Folders and Pages Back-End Environment

After pages have been created, their structure can be edited in the Back-End Environment.

Site Editing Functions

The picture below lists all the pages of the Jamaica's site.

At this level only fewer actions can be performed, the ones in light gray are not available because they are connected to the Master template created by COIN.

Click on the "News and Events", here most actions are available since the pages inside this directory has been created by the user.

The Site editing functions are described below:

Upload Documents Back-End Environment

To upload documents from your computer select the “Documents” section.

Click on the Add icon on the right hand side of the screen.

Here you can choose to create a folder or just upload a file. It is recommended that you place your files in different folders for easy referencing.

Create a Folder

If you want to create a Folder, enter the folder name and click on the save button.

Edit Folders

It is possible to change the name of the folders without breaking the link to it. To do this, click on the "Edit" icon next to the selected folder, change its name and then click on the "Save" button.

Upload a Document inside the new folder

Click on the black arrow next to the selected folder.

You are now inside the new folder. Select "Item" form the drop down list and click on the "Browse" button to select the file you want to upload.

Please note that if you use MS Office 2007, always save the file as Office version 97 - 2003 or earlier ending with .doc .xls .ppt (and not .docx, .xlsx .pptx).

Name the file with the same or a different name and click on the "Save" button.

The new file has been loaded.

To make a link to this new file please refer to the Front-End Environment: How to Add a New Component.

Click HERE for a simulation on how to upload a file.

Edit documents

If you make changes to the document and you want to update the file on your website without breaking the link to it you must replace the document. To do this, click on the "Edit" icon next to the selected document, click on the "Browse" button and select the new document from your hard drive, then click on the "Save" button twice. This action will overwrite the uploaded document with the new one.

It is important to retain the same name and file extention of the document previously uploaded.

Duplicate the Website into another Language* Back-End Environment

*Function available only to restricted users, please contact coin@fao.org if you need your site to be translated into another language!