(NWURQ&06 Updating Oxford Brookes web pages

Introduction If you are responsible for maintaining content on the core Oxford Brookes website, this guide will get you up and running using the Ektron content management system (CMS).

Ektron is a modular CMS, which simply means each page is made up of a number of reusable content blocks which are used to form a page. This offers the advantage that the same block can be reused across multiple pages; with edits to one block automatically updating across all relevant pages on the site. It also means that pages on our site automatically adapt to the screen size of our visitors’ devices. Further resources This guide should be used in tandem with our editorial style guide for the Web: Writing for the Web.

For further tips and cheat sheets, please see www.brookes.ac.uk/cms-help

Contents 1. Getting started ..................................................................................................... 4 1.1 Recommended browser .................................................................................... 4 1.2 Access requirements ........................................................................................ 4 1.3 Logging in to the CMS ...................................................................................... 4 1.4 The Desktop ..................................................................................................... 5 1.5 Understanding workflow ................................................................................... 6 2. Introduction to the Workarea .................................................................................. 7 2.1 Create a new page ........................................................................................... 9 2.2 Edit an existing page ...................................................................................... 10 2.3 Editing information about a page .................................................................... 11 2.4 Editing information that appears on a page .................................................... 12 2.5 Content modules............................................................................................. 13 2.6 To create a new content module:.................................................................... 13 3. Design mode ........................................................................................................ 14 3.1 Open Ektron design mode .............................................................................. 15 3.2 Add a content block widget to a page ............................................................. 16 3.3 Add an existing content module ...................................................................... 18 3.4 Create a new content module ......................................................................... 19 3.5 Edit a content module ..................................................................................... 21 3.6 Reposition content blocks on a page .............................................................. 23 4. The Aloha text editor ............................................................................................ 24 4.1 Edit a content block ........................................................................................ 24 4.2 Copy and paste............................................................................................... 25 4.3 Headings ........................................................................................................ 26 4.4 Internal links - create links to documents and pages ...................................... 27 4.5 Hyperlinks – linking to external websites ........................................................ 29 4.6 Add tables ....................................................................................................... 29 4.7 Insert images .................................................................................................. 30 4.8 Save and publish ............................................................................................ 30 5. Documents ........................................................................................................... 31 5.1 The Document Management Store ................................................................. 31 5.2 Add a document to the DMS ........................................................................... 31 5.3 Link to a document ......................................................................................... 32 6. Images ................................................................................................................. 34 6.1 Guidelines for image sizes .............................................................................. 34 6.2 Add images to the DMS .................................................................................. 34 2|Oxford Brookes University: CMS guide, 2014

6.3 Insert a new image ......................................................................................... 34 7. Multi-media ........................................................................................................... 35 7.1 Add a Youtube video to your pages ................................................................ 35 7.2 Add a Flickr gallery to your page .................................................................... 35 8. Editing source html ............................................................................................... 36 8.1 View a pages source code .............................................................................. 36 8.2 Review your pages using the Accessibility Validator ...................................... 38 9. Further resources ................................................................................................. 39

3|Oxford Brookes University: CMS guide, 2014

1. Getting started 1.1 Recommended browser The Ektron content management system (CMS) works in most browsers, but some of the keyboard shortcuts vary within different browsers. This guide is written for those using Google Chrome as this is the browser supported by the Oxford Brookes Information Services (OBIS) team. Note: you will need to enable pop-ups for the CMS URL in order to access the full functionality of the system. OBIS service desk can help you with this.

1.2 Access requirements The CMS sits on the Oxford Brookes network behind a firewall. This ensures sensitive data is protected and prevents search engines indexing archived/out of date materials. To start using the CMS you’ll therefore need to be logged into the Brookes network. When using your desktop at Brookes, this should automatically happen. However if you’re working remotely, for example at home, you’ll need to use Brookes’ VPN to access the system (OBIS service desk can set this up for you). You will also need to be added to the relevant Ektron User Group so that you can edit your pages. Ektron access requests should be emailed to [email protected]. Please include in your email your personal staff number along with the URLs of the areas you will need to access.

1.3 Logging in to the CMS Open a browser window. Go to:

https://cms-staging.brookes.ac.uk/

4|Oxford Brookes University: CMS guide, 2014

1. Select: Login. 2. The login dialogue box will open. (Note, if this does not happen, you may need to enable pop-ups for this site.) 3. Enter your Brookes login details (these are the details you usually use to access Brookes systems such as email). 4. Leave the domain information as: acs.brookes.ac.uk 5. Select: Login. You now see three options below the Oxford Brookes logo.



6. Select: Launch Ektron Workarea. Choosing Ektron Workarea brings you to the following page:

1.4 The Desktop The Workarea opens up initially on the Desktop tab. From here you can track outstanding tasks and approve content. (Note: this functionality will only be available to you if it has been activated for your team. Email mailto:[email protected] for further information.

5|Oxford Brookes University: CMS guide, 2014

1.5 Understanding workflow The CMS operates a ‘check-in’ ‘check-out’ system for all items of content. This prevents conflicts in the system such as one item being editing by two people at the same time. It is helpful to think about the database like a library: •

When you choose to edit an item, content is ‘Checked out’ to you, and cannot be edited by anyone else.

•

If you wish to, you can save changes but keep an item checked out by choosing to ‘Save’ instead of ‘Check in’ the item.

•

‘Check in’ content when you have completed work on an item, wish to save the changes and are ready for a colleague to preview.

•

‘Undo checkout’ – if you don’t want to save changes.

•

‘Publish’ an item when you are ready for it to update to the live site at the next synchronisation of files (the update happens hourly, on the half hour). When you publish items, they are automatically saved and checked back into the system.

The status of an item can be viewed via the Workarea.

A = Published on the live site. I = Checked-in, changes can be previewed on the staging server, not yet live. O = Content not yet published and checked-out. Because the item is checked-out, you will be unable to preview it in design mode.

6|Oxford Brookes University: CMS guide, 2014

2. Introduction to the Workarea Select the Content tab (circled). From here you can navigate the file system of the CMS to locate and edit your pages and the content blocks that make up the page.

When working within the Content tab, you will see two panes: •

the left-hand pane which lists all the directories/folders, and

•

the right-hand pane which is where individual files for a folder display.

The bulk of the web content resides in the folder ‘Main site’. Within this, there are two folders you’ll need to access: •

Content modules – these are the individual blocks that make up your page.

•

Pagebuilder pages – these are the pages that hold together the content modules and represent a page on the website with an associated URL.

(See arrowed folders on the following screenshot.)

7|Oxford Brookes University: CMS guide, 2014

Open directory folders by single clicking on them or by clicking the ‘+/-’ button next to a folder (circled).

Pages are located within > Main Site > Pagebuilder pages. The folders below this mirror the website navigational structure.

You’ll have ‘read only’ access to all the folders. And ‘editing rights’ for those specific files you need to maintain your pages. The Web Team create and set up permissions for folders (requests to: [email protected]).

8|Oxford Brookes University: CMS guide, 2014

2.1 Create a new page To create a new page: 1. From the Content tab in the Workarea, navigate to > Folders > Main site > Pagebuilder pages. 2. Hover over New – select Page layout. 3. Select a template (regular pages with a central content column and a right-hand side panel are called: Templates/Pages/GeneralContentPB.aspx). 4. Add a Title (note, this is the ‘Pagebuilder’ title and will form your URL and breadcrumb – so omit punctuation as it can cause problems if used as a part of a URL). 5. Place a check mark against ‘Content searchable’. 6. Add a Metadata title. (Note: this will form the page title at the top of your page – it should match the Pagebuilder title as closely as possible, however, there is room to add a slightly longer title if desired and you can use a couple of punctuation marks such as colons and question marks). 7. Select Finish then OK.

9|Oxford Brookes University: CMS guide, 2014

2.2 Edit an existing page To make changes to pages: ϭ͘ From the left-hand pane, navigate to the relevant section folder for the page you wish to edit. (Note: the ‘landing page’ for each section sits in the folder above.) 2. Within the right-hand pane, locate and click on the item you’d like to edit.

When your content opens, it will look something like this:

You will see options to •

and

Edit – this takes you to a set of tabs with information about the page (see below screenshot) such as the page template used, and associated meta tags. Learn more about this in section 2.3 Editing page information (p.11).

•

Edit page layout – this opens up Ektron’s Design Mode, which – as well as allowing you to preview how the page will look on the live website – is where you go to add/edit content blocks on a page. Learn more about adding and editing blocks in design mode in section 3. Design Mode (p.13).

10 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

2.3 Editing information about a page

1. Select Edit to edit the information about a page. Once in Edit mode you are able to edit the: • Pagebuilder page title (this makes up the URL so only edit if absolutely necessary and email [email protected] ahead of the change so that the Web Team can set up a redirect to prevent users seeing error pages) •

Metadata title (the title as it appears on a page), and

•

Metadata description field (which forms the ‘teaser’ in search results).

The set of buttons at the top of the screen allow you to complete actions related to workflow such as publishing to the live site.

You’ll find these actions in other contexts on the CMS too. •

Publish – this action saves and checks in an item and at the same time, flags it for pushing to the live site at the next hourly content update.

•

Undo checkout – this action allows you to check back into the system an item without saving any changes.

•

Check-in – choosing this action, both saves and checks back into the system an item you have been working on.

•

Save – this action saves your changes, but keeps the item checked out to you – meaning that nobody else will be able to view the changes or make changes themselves to the item.

You’ll come across these options whenever you are in edit mode: by opening an item within the Workarea; and in the Page editing menu in design mode.

11 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

Important: when you choose to ‘Edit’ an item, the content is automatically checked out to you. Make sure you Check-in items once you have completed your edits using the ‘check-in’ icon, circled below.

Or, if you are ready to publish, you can choose Publish and this will automatically save the item and check it back into the system.

2.4 Editing information that appears on a page Pages are built by adding and moving around content blocks in design mode. To open up design mode and begin editing the content blocks which appear on a page, select:

You’ll learn about adding and editing blocks to a page in section 3 - Design Mode (p.14). First we’ll take a look at how these blocks are created.

12 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

2.5 Content modules Content modules are blocks of content which can be placed on any page. To browse the content modules: 1. Go to the Content tab in the Workarea. 2. From the left-hand pane, navigate to > Main Site > Content modules.

These are organised in the system by type. A few examples of content types: Accordions; Action buttons; Banners; and Contacts.

As you look through the folders you’ll see that a number of content blocks are available for reuse. You can also create new ones (please check that for modules like Contact us in particular, there isn’t already a similar item before creating something new).

2.6 To create a new content module: 1. Go to the folder Main site > Content modules. 2. Select the content type (eg Contacts or Links panels) and select that folder. 3. From the menu in the right-hand pane, select New, followed by the content type, so for the Contact us box we would select ‘Contact us box’.

13 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

3. Design mode Our webpages are built up by adding content modules (stored in the Workarea database) to a page one at a time.

The content modules themselves are held within ‘widgets’. Think of a widget like a placeholder – you first add a placeholder to a page, then tell the system what content module you want to appear in that placeholder. On the page below, for example, you can see four placeholders (outlined in grey).

Image widget Content block widgets

HTML widget

14 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

Each widget type can handle a specific type of content – ranging from content modules to QR codes. The one that you will most commonly use is a ‘Content block’ (this holds content modules). If you are interested in utilising other types of widgets please do get in touch with the Web Team for a bit of coaching before starting out [email protected]

3.1 Open Ektron design mode 1. Go to https://cms-staging.brookes.ac.uk/homepage 2. Use the menus to navigate to the page you’d like to edit (tip: bookmark the landing page for your area in your browser bar). ϯ͘ Alternatively, go into the Workarea and navigate to a Pagebuilder page via the folder structure ƚŚĞŶĐŚŽŽƐĞ͚ĚŝƚƉĂŐĞůĂLJŽƵƚ͛͘

Design mode looks very much like the live website with the addition of a tool bar at the top of the screen. From this tool bar you can choose to: •

preview the page

•

edit a page

•

edit the individual content items on a page.

15 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

The tool bar defaults to preview mode. To switch to edit mode – move the tool bar slider to ‘edit’.

From here you can now choose to: •

Add content blocks to a page.

•

Re-organise content blocks on a page.

•

Edit the content within individual content modules.

3.2 Add a content block widget to a page 1. Select ‘design’ to open the Page Builder master editing menu

2. Select > Edit

16 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

3. A new item ‘Widgets’ will appear at the bottom of the menu.

Tip: You can reduce the size of this menu by clicking on the category titles. You can also reposition the menu on the page (by hovering over the menu, left-click, hold and drag). 4. Select > Widget. The widget picker will open. Select > Content block. 5. When you choose a widget you will see ‘Place here’ prompts indicating where you can drop content. Click on one of these to select the position. 

17 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

 6. Once the widget is on the page, you then need to select what content to put in it. You can select an existing content module or you can create a new one. See 3.3. and 3.4.

3.3 Add an existing content module The folders in the ‘Editing widget’ mirror the folder structure in the Workarea. 1. Navigate to the relevant Content module folder, then to the relevant sub-folder (eg if you wish to add a content panel, choose ‘Contacts’). 2. Click on the title of an item to select it. 3. Choose ‘Save’ to insert it on the page.

18 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

3.4 Create a new content module 1. Hover over the column containing the Content block widget. 2. 3 icons will appear: Move, Edit, Delete – choose Edit (the pencil icon).



3. Navigate to > Main site > Content modules – then choose the type of content you want to create, eg if you are creating a piece of text, you would choose > Simple Text Block > Page-specific and then choose the sub-folder where you want to save the new item eg ‘About Brookes’. 4. To create a new content item, choose ‘New’. This will open up a blank content module ready for you to populate.

19 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

20 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

3.5 Edit a content module You can edit content modules from both the Workarea and from design mode. To edit a content block in design mode, first ensure you are switched to edit mode, then select content editing mode.

Hover over the block you wish to edit. A ‘menu’ icon

will appear top-right of the block.

Click on this to open the edit menu for that individual content block.

Within this menu you will see the following options: •

Edit in context – this is used for quick edits such as typos (note, not all CMS content is enabled for editing in context).

•

Edit – for access to the full range of edit options, choose the standard ‘Edit’ selection.

21 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

•

View History – allows you to look at previous incarnations and ‘restore’ a previous version of the content block. From here you can also ‘view difference’ between two instances (similar to track changes in Word) using the ‘View diff’ icon:

•

Delete – will delete the content module/page from the system and may result in broken links. If you want to delete a page, please email [email protected] with the details.

•

Add task – allows you to add content related tasks to an item.

•

Properties – here you can find out a number of details about the content such as last edit date, publication date, content ID, status, URL and more.

•

Workarea – selecting this option will take you into the Workarea.

•

Logout – takes you to the log out screen.

Select ‘Edit’ this will open the Aloha text editor (see section 4. The Aloha text editor p.23).

22 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

3.6 Reposition content blocks on a page

1. From the PageBuilder master menu, select > Edit

2. Minimise the menu (by closing up the Page Action) then hover over the content block you wish to move. You’ll see three icons: four arrows - move; pencil - edit; and rubbish bin - delete. Select > Move.

The options of where you can place the block will be indicated by a blue outline and a ‘Place here’ button. Select the relevant place, then click the button:

23 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

4. The Aloha text editor From within the text editor you can edit text, insert hyperlinks and add images.

The text editor opens when you select Edit from a content block menu or when you click on the pencil and paper icon

within a content module.

You can edit text in the editor in much the same way as you would within a word processor. The text editing pane looks like this:

4.1 Edit a content block

Switch to content editing mode:

1. Switch to edit mode, then select content editing mode.

24 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

2. Hover over the block you wish to edit. A content block menu (three parallel lines) will appear top-right of the block. Click on this to open the edit menu for that individual content block.

3. > Edit

4. To begin editing, click within the yellow frame containing the content. A new toolbar will open. This is the text editor toolbar:

The Aloha tool bar is ‘free floating’ – which means the toolbar moves up and down the page as you edit. So if you wish to apply formatting to text at the very bottom of the page, you’ll be able to do this without having to scroll back up to find a menu. You can also drag and move the menu to a convenient place on the page. The tool bar is contextual – which means the buttons displayed change depending on what you are doing. So, if you’re editing text, you will see options for formatting the text. If you’re creating a table, buttons relevant to that task will display and so on.

4.2 Copy and paste Cut, copy and paste tasks are accessible through your browser – right-click to choose them (or use keyboard shortcuts).

25 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

To copy and paste text from any source into the text editor, you will need to paste it in as ‘plain text’, and not as a direct paste. This is to prevent adding code from other software (which you cannot see), which could interfere with the display or functioning of your content on your page. To copy and paste: 1. Place your cursor where you want to insert the text. 2. Right-click using your mouse, then select ‘Paste plain text’. 3. A pop-up will appear – place your cursor in the entry field, and then paste your copy. 4. Select ‘OK’.

4.3 Headings To create a heading: 1. highlight the text you want to format 2. select required formatting from the style options (circled)

Important: Use Heading 2 and, if a sub sub-heading is required then Heading 3, rather than Heading 1. Heading 1 is reserved for page titles. (Page titles are set up via the Title meta tag. See separate entry on ‘editing meta tags’).

And use sentence case for headings – only the first letter in the first word, and proper names, are to be capitalised.

26 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

4.4 Internal links - create links to documents and pages An internal link is referred to as a ‘Quicklink’ in the Ektron CMS. To create a quicklink: 1. Select the text in your document to use as the link. 2. Select the ‘Insert’ tab from the toolbar.

3. From the ‘Insert’ tab, select the library icon (circled):

27 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

4. This will open up a window showing all the folders in the main site, which will look something like this, but the folders displayed will vary depending on where you are:

5. Change the drop-down from Images (the default) to ‘Quicklinks’. 6. Navigate to the folder containing the page you want to link to. Note: if you are linking to another page within the Brookes website you will need to navigate to the Pagebuilder pages, if you are linking to a document, you will first need to navigate to Site assets/documents. 7. Click on the Pagebuilder page you’d like to link to (it will highlight in yellow). 8. Select ‘insert’ (circled).

28 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

4.5 Hyperlinks – linking to external websites 1. Select the text in your document to use as the link. 2. Select the ‘Insert’ tab from the toolbar.

3. From the ‘Insert’ tab, select the link icon (circled).

4. Type in the full URL and then use [Return/Enter] on your keyboard to set the link. If you want to add any additional information, for example ‘alt text’, you will need to do this via the source code. See ‘Editing source html’ (p.34).

4.6 Add tables Tables are subject to corporate style guidelines, please contact the Web Team for guidance on styling. 1. From within the Text Editor, select the Insert tab 2. Select the ‘Insert table’ icon, then drag and select a starting size for the table.

3. To edit a table, click on the row/column you want to edit – the toolbar will now switch to table editing mode. Add or remove rows or columns, by placing your cursor in a table cell then use the suite of table editing icons to add, delete and format.

29 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

4.7 Insert images You can select an existing image from the central image library. To do this: 1. Place the cursor where you want to insert an image. Ϯ͘ Select the image library icon



3. This will open a window where you can navigate to the image via the folders in the left-hand pane (images are usually stored in Site assets/Images). 4. Click on the title of the image to select it, then use the insert icon

to drop it onto

your page. Alternatively, to add a new image to the system, follow the steps in section 6 then follow the steps above when you are ready to insert the image onto your page.

There are guidelines for image sizes in section 6. If you need help getting your image into the right position on the page, or preparing an image/getting it resized before uploading to the system, please contact the Web Team for help by emailing [email protected]

4.8 Save and publish Once you have finished editing, in design mode, you can either ‘Check-in’ content (this enable colleagues to preview your changes within the CMS design mode, ahead of items being published to the live site), or you can ‘Publish’.

30 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

5. Documents 5.1 The Document Management Store If you need to add a downloadable document to your web page, the first step is to use the Document Management Store (DMS) to add the document to the system.

We recommend uploading PDFs and not Word documents to the DMS as PDFs have better readability across browsers and hardware platforms.

When you name your PDF, please bear in mind the following rules: •

Omit punctuation from titles.

•

Spaces are replaced with hyphens on the CMS – sticking to this rule and using hyphens to separate words in the names of your files ensures your PDF will be downloadable across browsers and platforms, and is also good in terms of search engines.

•

Choose a title which makes the content of your PDF clear – you could use an abbreviation of your course or department, followed by an identifying description.

5.2 Add a document to the DMS 1. Go to the Workarea. 2. In the left-hand folders pane, navigate to Site assets, then Documents. 3. Navigate to your folder. 4. In the right-hand pane, hover over the New menu, select >DMS Document.

31 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

5. A new window will open:

6. Select Choose file and navigate to where the document is stored. Click Ok. 7. Enter a title within the Title field. We recommend using the same title as your PDF file, minus the ‘.pdf’ a the end – this will help you find your content more easily, because it will be grouped by the same identifiers as your other files. 8. Select Publish to save and make it available on the live site. Note: you will still need to add a link to the document before users can access and we’ll do this in the next step.

5.3 Link to a document You can add links to DMS documents from within the body of a content block. Important: After creating a link, add the text: (PDF) to signal to users that the link opens a downloadable asset, so that they may choose in advance whether they want to download a document.

1. Go to the Workarea. 2. Use the left-hand folder pane to navigate to Content modules, then to the relevant sub-folder. 3. Locate and select the content module from the list in the right-hand page. 4. Select Edit. 5. Highlight the text you wish to use for the link. Click the Hyperlink icon 6. Select

to open the URL picker.

32 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

  7. Navigate to Site assets, Documents, then to the relevant sub-folder. 8. Change the drop-down, to Quicklinks and click on the title of a document to select it. 9. Select Insert. 10. Select OK. 



33 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

6. Images There is a central image library, but if you do need to add images to the system, please ensure that you use Web ready JPEGs.

6.1 Guidelines for image sizes Pixel measurement: •

Central column - full-span images used in the central column content area - 555 x 340 pixels.

•

Thumbnails/link images - 78 x 54.

•

Banners – landing page/top banners 757 x 246 pixels and smaller banners are 757 by 170.

6.2 Add images to the DMS 1. Go to the Workarea 2. In the left-hand folders pane, navigate to Site assets, then Images. 3. Navigate to your folder. 4. In the right-hand pane, hover over the New menu, select >DMS Document.

6.3 Insert a new image 1. Navigate to the content module you wish to edit. Select Edit. 2. Position cursor where image is to appear. 3. Select Library, using the book icon. 4. Navigate to Site assets, Images and to the relevant sub-folder. 5. Click on an image title to select. Select Insert.

34 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

7. Multi-media 7.1 Add a Youtube video to your pages 1. Copy ‘Embed’ code from YouTube. 2. Within the Workarea, folders pane, navigate to: Main Site – Content modules – YouTube videos. 3. Hover over New and select HTML content. 4. Scroll to the bottom of the text editor window and use the HTML button to toggle to html view. 5. Paste in the YouTube code, then wrap with: [YouTube code]

7.2 Add a Flickr gallery to your page 1. Copy the ‘Embed’ code from Flickr (note: you need to be logged in to the Flickr feed in order to get the share code). 2. The code should start ‘ 3. Within the text editor window, use the HTML button to toggle to html view ϰ͘ Around this wrap: [Flickr code] 

35 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

8. Editing source html The Aloha text editor has a much improved source code editor: coloured source code is provided, so you can clearly see the structure of the code; tag completion is supported (for example if you add a tag, a closing tag will automatically be added should you forget); and elements are grouped together so that you can collapse up tables etc to make reading code simpler.

8.1 View a pages source code To edit the html source for an individual content block, you’ll need to switch to content editing mode:

1. Switch to edit mode, then select content editing mode.

2. Hover over the block you wish to edit. A ‘menu’ icon (three parallel lines) will appear top-right of the block. Click on this to open the edit menu for that individual content block.

3. > Edit If you are editing a simple text block, the Aloha text editor will open automatically. If you are editing another type of content block, you will need to select the pencil and paper icon

36 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

From within the text editor – place your cursor in the main editing area, the toolbar will appear. 4. Select the Review tab 5. Select the View Source icon (open and close html tag)

The Source Viewer window will open.

You can now begin editing the html code. As you do, you will see that the text in your text editing window updates. When you are finished making your edits, close the Source Viewer window using the cross (top-right). And then save/publish your work, using the icons at the top of the window, in the usual way.

37 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

8.2 Review your pages using the Accessibility Validator From within the Review tab, there is also an automatic Content Validator, to check how well your code adheres to W3C guidelines on accessibility:

1. Select the Validate icon.

2. The guideline to validate against is WCAG 2.0 Level AA – which is what the University always seeks to achieve. Select this from the drop-down. 3. Select Validate (circled) to begin the process.

4. The results will appear in the Accessibility Review window (you may need to scroll down the page to review the result).

If you are feeling brave, you can run the same validation again WCAG 2.0 Level AAA.

38 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4

9. Further resources Find further tips and advice on the CMS support page.

There is a ‘hot desk’, situated in the same office as the Web Team, available for content editors who are getting used to using the new system. Please email [email protected] to check availability.

39 | O x f o r d B r o o k e s U n i v e r s i t y : C M S g u i d e , 2 0 1 4