The guide starts out by highlighting the basics of producing content with the editor, and then moves onto more advanced topics about how to go about contributing various types of content to this site. Use the contents menu on the right hand side of this page to navigate your way through sections that are of most interest to you.
Introducing the Editor
The editor used on this site was chosen so that it behaves as close to editors we use in everyday life as possible (such as Microsoft's Word) just in a web browser and not a standalone desktop application, for most cases submitting web content to this site need not be more complicated than constructing a well formatted document. The idea behind choosing this way of working is so that well formatted pages can be constructed with next to no knowledge of the underlying HTML code, hopefully this will save management members time and also enable those not fluent in HTML to contribute. So lets take a look at the editor, the image below is the sort of thing you will see embedded into what ever page you have decided to create, this is the editor.
To the top of the editor pane you will see the toolbar, as with popular desktop word processing software this is where the core functionality of the editor can be controlled. Just below the toolbar is the main content area, this is where the actual content will be entered and styled etc (just as with word processing software). Below that is a status bar and some short cut buttons that add extra functionality. There are a lot of options on the toolbar and these will assist in producing high quality content, below shows the functionality that can be found on the editor toolbar.
Starting with the top row of the toolbar the following image and table show what each of the buttons do:
Open the editor help dialog
|2. New Document
This will clear the editor workspace
Undo the last action
Redo the last action
Apply/Remove bold style on selected text
Apply/Remove italic style on selected text
Apply/Remove the underline style on selected text
Apply/Remove strikethough style on selected text
Format selected text to be flush with both margins
|10. Centre Align
Format selected text/object to be centred
|11. Left Align
Format selected text/object to be flush with the left hand margin
|12. Right Align
Format selected text/object to be flush with the right hand margin
| 13. Style
Select a format style, it is better to use these where possible so that formatting is done based on the website style sheets
|14. Font Family
Set the font-family on selected text eg: ArialSet the font-family on selected text eg: Arial
|15. Font Size
Set the font-size on selected text eg: 10px
|16. Text Colour
Change the colour of the selected text
|17. Background Colour
Change the background colour of selected text
Toggle the spellchecker
|19. Remove Formatting
Remove formatting of selected text, this is useful and should be used for text that has been pasted in from another source.
|20. Code Cleanup
Clean up HTML code, this is for tidying up the HTML of a heavily edited document/markup.
The middle row of the toolbar contains the following functionality:
Cut selected text to the clipboard for pasting
Copy selected text to the clipboard for pasting
Paste from the clipboard
|4. Paste Plain Text
Paste clipboard contents as plain text (useful for pasting from microsoft word or other websites)
Search within content
|6. Find and Replace
Find a matching text string and replace it
Increase indentation of selected text or element
Decrease indentation of selected text or element
|9. Ordered List
Create a number/label ordered list
|10. Bullet List
Create a bulleted list
|11. Block Quote
Insert or remove a block quote (useful for highlighting text snippets)
Apply or remove subscript styling to selected text
Apply or remove superscript styling to selected text
|14. Case Changer
Change the case of the selected text, options include uppercase, lowercase, sentence case and camel case
|15. Insert Custom Character
Insert a character from a selection of special characters
|16. Insert Horizontal Line
Insert a horizontal line at the position of the text cursor
|17. Insert Table
Insert a table at the position of the text cursor. Clicking the arrow allows quick insertion which clicking the main button allows many parameters to be set
|18. Delete Table
Delete currently selected table
|19. Table Row Properties
Set properties for selected table row
|20. Table Cell Properties
Set properties for table cell (this can be used to set column widths)
|21. Insert Row Above
Insert a new table row above the cursor position
|22. Insert Row Below
Insert a new table row below the cursor position
|23. Delete Row
Delete the row that the cursor is in
|24. Insert Column to the Left
Insert a new table column to the left of the cursor position
|25. Insert Column to the Right
Insert a new table column to the right of the cursor position
|26. Delete Column
Delete the column that the cursor is in
|27. Split Table Merged Table Cell
Split a table cell that has been previously merged
|28. Merge Table Cells
Merge selected table cells
The bottom row of the toobar contains the following functionality (generally this is more advanced editing features):
|1. Text Direction Left
Set text direction on selected element to left
|2. Text Direction Right
Set text direction on selected element to right
|3. Toggle Guidelines/Invisible Elements
Show invisible lines/elements (useful for tables and divs)
|4. Toggle Visual Control Characters
Show control characters
|5. Source Code Editor
Edit the HTML code directly (advanced users only)
6. Toggle Block Elements
Show a visual representation of block elements
|7. Insert non-breaking Space
Insert a non breaking space
|8. Edit CSS
Edit the CSS code directly (advanced users only)
XHTML citations (advanced users only)
XHTML abbreviation (advanced users only)
XHTML acronym (advanced users only)
XHTML deletion (advanced users only)
XHTML insertion (advanced users only)
|14. Insert/Edit Attributes
Edit XHTML attributes (advanced users only)
|15. Insert/Edit Anchor
Insert an anchor point, this can then be used with links to link to specific parts of text
|16. Delete Link
Delete a link from the currently selected text
|17. Insert/Edit Link
Insert a link on either selected text or at cursor position
|18. Insert Edit Image
Insert/upload an image at the cursor position or edit selected image
|19. Insert Read More
Insert a read more element, this is used to split content into two sections (a preview and full article), this is useful for news articles and should not be used for events.
|20. Insert/Edit Pagebreak
Insert a page break, this is useful for making multi page articles in one articles (this is useful for workshop material)
Print out the content area
|22. Toggle Fullscreen Mode
Make the editor occupy the full screen
|23. Preview Mode
Preview the output (good for formatting but won't look like the fully formatted site version, it is best to always save and check the real thing)
This article sums up the basic functionality of the editor, the following pages deal with how to use it to actually produce certain types of content.
Dealing with Images
Making any web content is fairly straight forward with the tools we have seen so far. However making web content that actually looks good is slightly more tricky, this article describes how to upload, insert and make the most out of using images on this website. This is quite a long guide as it contains steps that show how to do things, the following links should allow you to navigate to the relevant section.
- Single Image Lightbox
- Lightbox Image Gallery
Whilst it is possible to link to externally hosted images, this is discouraged since any downtime/deletions that occur externally to this site will have an impact upon content served by us. So to get around that it is possible to upload your images to the server directly. We would also encourage contributors to help keep the images directory tidy, there are a number of directories already present that match content contribution types so please could you make every effort to upload your images into one that matches the content you are creating.
So to begin uploading images click the following button on the toolbar of the editor (highlighted in red in the image below):
You will then be presented with the following dialog box (click to enlarge):
Inside this dialog box is everything you will need for uploading and inserting images, for the time being we are only uploading images to the server so we are only concerned with the bottom half of that window (highlighted red in the image below, click to enlarge):
In the highlighted area, the file and directory structure of the image upload area is shown, before uploading any images you should navigate into the correct directory where you wish to upload your image, you can do this by clicking on the directory you wish to enter. You can create a directory should you have a lot of images that you wish remain separate to the others by clicking on the icon that shows a folder with a green plus just above and to the right hand side of the pane highlighted in red in the image above. Once you are in the correct directory you can click on the upload button (highlighted red in the image below, click to enlarge):
You will then be presented with the upload dialog box (shown in the image below, click to enlarge):
This dialog is where you will upload your files to, to select your files you can either just drag your files into the dialog, or you can click upload and navigate to the files you wish to upload in the conventional way. Once you have selected the file/s to upload, you will see them listed in the upload dialog (shown in the image below, click to enlarge):
You will notice that you can rename or delete any of those files in the upload dialog using the buttons to the right of each entry, if you are happy then you can then click upload and the files will be transferred to the server. Once this is done you will see green ticks next to each file, at this point the dialog will either close by itself after a short delay or you can click the close button manually. This will then return you to the following dialog, where you can now see the files you have uploaded marked in bold (click to enlarge):
This is all that you need to do to upload images to the CCPBioSim server. That next section deals with how to then insert these images into your content.
The part of the guide deals with inserting an image into your content article, if you want to learn how to place an image onto the server ready for inclusion in your content then please read the previous section. Inserting images is straight forward, you start by placing the text cursor on the line in the editor where you would like the image to be inserted, followed by clicking the "insert/edit image" button on the editor toolbar (shown in the image below):
Clicking on the "insert/edit image" button brings up the image manager dialog, once in this dialog you can use the bottom section of the dialog to navigate the filesystem to find your image. Once you have located your image, if you click on it in the file browser then it will fill in the "URL" section in the top section of the dialog (click to enlarge).
Once you have done this, you can also adjust some of the styling parameters before hitting the "insert" button on the bottom right of the dialog. Once the "insert" button has been clicked, the dialog will close and the editor will insert the image in the text where you placed your cursor. Inserting images is a simply process where you don't have to worry about formatting HTML code. The next section will discuss some of those styling options and what they do.
Styling images is quite easy in this editor, some styling functions are available in the top bar whilst others are only available in the media manager dialog. The only functions that are on the main toolbar are the alignment buttons, you can use these by clicking to select a particular image and then click the corresponding alignment button to position it where you desire (much the same as you would do in Microsoft Word). The rest of the functionality will come from the media manager (expert users can use CSS but that is beyond the scope of this guide). To edit the style parameters of an image, first select it in the editor content area, then click the "insert/edit image" button (shown below):
As we have seen in the previous sections the media manager dialog will appear (click to enlarge):
At the top of this dialog, the fields were are interest in are; Alternate Text, Dimensions, Alignment, Margins and Border. A brief description of what each will do are listed below:
Alternative Text - This is what will be shown if for some reason the image itself cannot be displayed in the users browser.
Dimensions - It is better to resize images using these fields than using the drag resize of the editor, this can help keep the aspect ratio constant and not cause distortion.
Alignment - This is how you can change the alignment of the image, options can be left, centre, right (horizontally) and bottom, middle, top (vertically, but only useful in certain cases such as in a table cell).
Margins - These are useful for text wrapping or for placing images next to each other, if an image has no margin then text or neighbouring images can touch the edge of the image. It is more aesthetically pleasing to the eye for this not to happen, so setting the margin can keep other objects a set distance away. This can either be done equal on all sides by checking the equal values box, or it can be applied differently along different edges.
Border - These can be useful in some situations, it is possible to set the thickness, style and colour of the image border.
The are more advanced options available in the tabs "rollover" and "advanced". The rollover settings are useful if an effect is required on mouse rollover, in this tab there are two fields. The first for what happens when the mouse cursor rolls over the image and the second for what happens when the mouse cursor rolls off the image. A useful case for this parameter might be if you want to have say a greyscale image become colour on mouseover, to do this you would embed the greyscale image on the page as outlined in the previous section, then set the "mouseover" field to the coloured image and set the "mouseout" field to the greyscale image (to set it back). This would then switch images when mouse over events trigger it to happen.
Further options can be found on the advanced tab, but these are expert functionality and should only be used by users that are fluent with CSS and understand the consequences of setting such parameters.
Lightbox effects are a nice way to show lots of images in a user/device friendly way. If you have say long articles with lots of text and images mixed then you can make your images much smaller and have them popup bigger on a mouse click. This is a good way to show full sized images without breaking the flow of text on a screen. This tutorial will show how to add the lightbox property to images (lightbox can be added to all kinds of media, from videos to ordinary text links by following exactly the same procedure) and how to associate images into a lightbox gallery to make visually pleasing content.
A single lightbox item
The first step in creating a lightbox enabled image is to firstly insert an image to act as the thumbnail link, because the lightbox will popup with the full-sized image, you do not need to make the thumbnail full-sized. For instructions on inserting and resizing an image see the previous sections of this guide. Once you have inserted your image and resized it to the desired size etc, have the image selected and click on the "link" button on the editor toolbar (shown below):
You will then be presented with the following dialog (shown below, click to enlarge):
You then need to link to the original image again (as we want to show a full sized version in the popup), so to this either type the path into the URL field if you know it or simply click the insert button to the right of it and select your image from there (show below, click to enlarge):
Once you have done this then the URL field will be populated with the correct path to what you wish to show (as a side note, you can also link other types of content besides images to create other types of effects). Now for the lightbox configuration, under the popup tab, select the popup type to be "JCE MediaBox Popups" and then fill in the "title" and "caption" fields. The title and caption fields are what will be shown in the lightbox with the image, so you can use this to explain things on the image etc. So your popup box should look something like the following (click to enlarge):
Once you have done this you can then just click insert, upon saving your content you should then be able to test functionality of the lightbox to make sure it works. The following image is a lightbox enabled image which can be used to test the functionality in your browser.
That is it! It is that simple to add in lightbox functionality. This effect can not only be used on images but because it is applied via the link property, you can use it on a text link, video, image, or anything else that a link property can be assigned to. In addition to that the lightbox is not only used to display images, it can be used to show external websites, youtube videos, vimeo videos, webpages from this site etc just by changing the media type option in the "popups" tab and having the correct URL. The possibilities are truly large.
A Lightbox Gallery
We have covered a single lightbox item, a more interesting use of lightbox is using it to show a gallery of objects. The interesting thing about this is the image thumbnails do not have to be located physically side by side on the page, you could show images that are scattered throughout an article in terms of their physical location within a single gallery. This means if a user clicks any image that they can then easily scroll through all images on the page without having to close and click each one. This is useful for image showcases etc.
To do this all you need to do is follow exactly the same procedure as for the single case but then for each image you assign the "group" field in the "popups" tab to the same value for each image, this can be seen in the image below (click to enlarge):
In the above case the field "group" was set to "gallery1", this in principle can be any valid text string and multiple galleries can be created on the same page by having separate group names. The below images are linked as a lightbox gallery which can be navigated by clicking and then swiping or arrow keys (depending which device you are using). Remember the below images are next to each other in physical space but they don't have to be, the only requirement is that the group id is the same.
Creating a News Article
To submit a news article to the CCP website navigate to the "Create News Item" menu entry under the "Staff" menu. You will then see the news submission editor, which looks like the following (click to enlarge):
Fill in the "Title" field, this is what the users will see so make it relevant and as short as possible. The alias field should be left blank, this will be automatically generated from the title field. The next thing to do is to use the template for the news content, to get the template click on the insert template button just below the main editor area (click to enlarge):
Then from the template selection list, click on the news template "News Item Template" (click to enlarge):
You should then see the basic structure of the news item appear in the content window (click to enlarge):
Now that the template is inserted into the content area, you will notice that the text is split into two sections by a grey line. This grey line is a special character that allows the content management system to split the article into two sections, the top section is an article snippet which is simply a quick paragraph summarising the article, whilst the bottom section is for the full article text. The text that comes with the template should be replaced with real text.
It is possible to use images in the articles, you should only use 1 image in the top section of the article but you can use as many as you wish for the full article. Any images that are used in the top sections should be no larger in size than 200px in height or 400px in width, it is recommended that in articles images used be limited in size but use the "lightbox" effect (described in the "dealing with images" section of the staff guide) to show the full sized image. This makes the articles more tidy and readable and helps support those that are reading the site on hand held devices can do so without too many large images obscuring the text.
Creating a Conference/Workshop
To submit an event such as a conference or a workshop to our events system is straight forward. Firstly select which type of event you wish to submit from the staff menu, either "Create a Conference" or "Create a Workshop". This will set some basic defaults in the backend so that your event ends up in the right place on the website. Once you have clicked the event you wish to submit, you will be presented with the following window (click to enlarge):
This is the basic event editor, in this window you should first give your event a title (the official event title) and then move on to setting the dates and times. Once you have done this, you can then move on to creating the actual event details page that your prospective delegates will see. We are trying to keep our events formatted in a particular way so that users familiar with our events will know exactly how they work. To do this and save lots of time spent reinventing the wheel, we have implemented a templating system, click on the "insert template" to the bottom left of the editor box and you will see the following dialog (click to enlarge):
In the dialog that has appeared, there are a number of entries that apply to events, what these are for are summarised below:
Conference Template - This template is the template that should be used for all CCPBioSim run conferences or conferences that are run where we are providing the main conference information page (such as a joint conference).
Conference Template (for linking to external conferences) - This template is a much more simple one and is simply just to provide a brief description of an external conference and a link to their website. This should be used for the conference information page is hosted elsewhere, for example an advert for a conference that would be interesting to our users but we are not directly involved with it.
Workshop Template - This is the template for workshops hosts by us, where the main conference information is to be hosted on our site. For events run by others that are of interest (advertising) you can just use the "Conference Template (for linking to external conferences)" but submit it under the workshop section.
Once you have chosen your template, it will be inserted into the editor. This provides a basic structure for information that should be provided to delegates attending a conference. Simply populate the sections under each heading with the correct information, and delete/add any headings as you require them. The template would look something like this (click to enlarge):
Once you are ready then click the save button and your event should appear at various stages around the site (front page (if it is in the top 3 soonest events), and events section).
Creating Workshop Course Material
Workshop material can be as simple as a single webpage or as complicated as this user guide. The first place to start is to navigate to the staff menu and then select the option "Create Workshop Material", this will give you the editor screen that is preconfigured to submit workshop material to the correct place within the backend (below shows the editor, click to enlarge):
For a single page workshop material, you simply use the editor as normal like you would for any other content as described within previous sections of this guide. However much more complicated material can be created using this editor, such as a multiple page guide. To create multiple page content you simple use the insert page break buttons (shown below in red):
This will open up the pagebreak settings dialog, in this dialog are two fields. The title field is for use within the editor, this is simply so that you can keep track of the pagebreaks. The second field is for adding the title that the user will see in the fronted table of contents. The dialog is show in the image below (click to enlarge):
Each pagebreak you add will add a new page to your workshop material, pages can be added and deleted easily in the editor. If you wish to add a title to each page it is recommended to use the heading 3 format from the styles dropdown in the editor, so as to remain in keeping with the rest of this site.
To then link to the workshop material created by following this guide, you will then need to insert links to it in the event description page. So make sure you are logged in, then under the menu item "management", select "manage events" and then modify the event this material corresponds to. Then insert a link, we recommend this goes near the top of the page, however if you have a complex programme with several separate material documents then it might be best to link them from within the programme timetable or similar. To actually insert the link, once in the event editor first click in the editor to select where to place. You then need to click the "insert/edit link" button, and on the opened dialog window. You then need to select the directory called "content" from within the third box down, and then select the directory "workshop material", you can then click the material you just made and it will fill the URL field. Then type in the link text in the text field and set any other attributes before clicking insert.