Interactive tutorial for updating staff profiles in Percussion Rhythmyx

1. Click to continue Next • Interactive tutorial for updating staff profiles inPercussion Rhythmyx • Pippa Goldenberg|Version 2.0 | 29th Jan 2013

2. Next Introduction to using this presentation • This is an interactive presentation designed to walk staff through the process of updating an existing staff profile page using the Rhythmyx CMS. It is designed to accompany the “An Introduction to Percussion Rhythmyx for Academic Staff” document which explains more in depth and should also be read. • With this presentation: • You will be able to click on all hyperlinks to open the appropriate URL in a new window. • View animated examples. • You can resize this presentation window to be smaller using the resize button at the top right of the screen and run Internet Explorer right alongside it to avoid having to switch between windows. • Or you can run it full screen and it is easy to switch between the presentation and Internet explorer windows by clicking the appropriate application on the Windows task bar at the bottom of the screen. • The mouse graphic appears when there is an exercise to follow in Internet Explorer. • Use the next button on the bottom right hand side of the presentation to advance when you are ready. Fig1. The Windows taskbar

3. Next Contents • You may choose to work through this presentation sequentially (just click the Next arrow to continue), this is probably the best way as each exercise builds on preceding ones. Alternatively, you can select an exercise of interest from below: • Exercise 1: Logging into Rhythmyx • Exercise 2: Find your staff profile • Exercise 3: Editing your staff profile • Exercise 4: Previewing your staff profile • Exercise 5: Searching for content • Exercise 6: Uploading your profile pictures • Exercise 7: Linking your photo to the profile • Exercise 8: Adding links • Exercise 9: Publishing the staff profile • Further information

4. Next Exercise 1: Logging into Rhythmyx Percussion Rhythmyx is a web content management system. It is used for creating and managing content for websites without requiring technical skills or experience on the part of the users. The University has invested in this technology in order to provide a common platform for managing website content across the University that can be used by staff from all departments with no previous experience.

5. Objective • Log into Rhythmyx • Method • Open Internet Explorer • Go to www.surrey.ac.uk/rhythmyx • At the login screen enter your normal password and username • The first time you log in to Rhythmyx if prompted to run Java tick the “Always trust content from this publisher” box then click on the Run button. Next Exercise 1: Logging into Rhythmyx Percussion Rhythmyx is a web content management system. It is used for creating and managing content for websites without requiring technical skills or experience on the part of the users. The University has invested in this technology in order to provide a common platform for managing website content across the University that can be used by staff from all departments with no previous experience.

6. Next The Content Explorer • Once logged in you will see the main user interface for managing content through Rhythmyx, this is called the Content Explorer and is shown below. It consists of four elements.

7. 1. The banner This shows information about the current user, including the community they belong to, as well as the ‘logout’ button. Next The Content Explorer • Once logged in you will see the main user interface for managing content through Rhythmyx, this is called the Content Explorer and is shown below. It consists of four elements.

8. 2. The navigation pane This provides several different tools for locating content within Rhythmyx. Clicking on items here determines what Is shown in the main view. Click on the [+] symbol to expand the view for a particular folder. The ‘New Search’ item allows you to search for content items. Next The Content Explorer • Once logged in you will see the main user interface for managing content through Rhythmyx, this is called the Content Explorer and is shown below. It consists of four elements.

9. 3. The content pane This displays content items selected via the Navigation Panel. It also shows the checkout status and workflow state of the items. Next The Content Explorer • Once logged in you will see the main user interface for managing content through Rhythmyx, this is called the Content Explorer and is shown below. It consists of four elements.

10. 4. The menu bar Provides access to common functions and displays the current content path. Also shows the Refresh button which can be used to force a refresh when required. Next The Content Explorer • Once logged in you will see the main user interface for managing content through Rhythmyx, this is called the Content Explorer and is shown below. It consists of four elements.

11. Next Exercise 2: Find your staff profile • Objective • Locate an existing content item (your staff profile) within Rhythmyx.

12. 1. Click the [+] icon to expand the sites folder 2. Then click the [+] icon to expand the surrey.ac.uk folder 3. Locate the folder representing your department. Within your department folder you will find a folder called ‘people’ – click on this and a list of staff profiles is displayed in the content pane. Next Exercise 2: Find your staff profile • Objective • Locate an existing content item (your staff profile) within Rhythmyx. • Method • Watch the steps below then switch to the Internet Explorer (already opened from Exercise 1) in your windows task bar and repeat the steps for your department.

13. Next Exercise 3: Editing your staff profile • Objective • To edit your existing staff profile in Rhythmyx.

14. Next Exercise 3: Editing your staff profile • Objective • To edit your existing staff profile in Rhythmyx. Method 1. If you still have the Rhythmyx Internet Explorer window open from Exercise 2, click on it to switch to it. Otherwise open a new browser window and log into Rhythmyx as shown in Exercises 1 and 2. 2. Right click on your staff profile in the content pane of the content explorer and select Quick Edit. 3. The content editor window will appear. You will see a field for each relevant section on your staff profile such as Biography, etc.. Clicking in one of these fields will bring up the ePhox edit and allow you to make changes (described in the next slides).

15. Next Exercise 3: Editing your staff profile • The screen below is an example of the content editor: yours will contain your specific details.

16. Next Exercise 3: Editing your staff profile When you click inside a data field such as this one the ePhox text editor will be invoked.

17. This is the ePhox editor, we will enlarge it to view the functions in detail Next Exercise 3: Editing your staff profile

18. Clear formatting: Removes all formatting from text This is the main editing box, text can be typed in manually or pasted in (see next slide for pasting formatted text) Styles: The heading 1 style should never be used as this is reserved for page titles. Most of the time you will only use the ‘normal’ style. Pop-out box: Maximises the editing window size. Next Exercise 3: Editing your staff profile • The ePhox editor appears with a word processing interface, some of its functions are:

19. Next Exercise 3: Editing your staff profile • Pasting formatted text into the ePhox editor • If you need to paste text which contains formatting (eg: Word/HTML) into a field this formatting will need removing to keep the text styling consistent. This simply involves selecting Paste Special from the ePhox Edit menu and pasting as Plain Text or Clean HTML as detailed below:

20. Next Exercise 3: Editing your staff profile • Pasting formatted text into the ePhox editor • If you need to paste text which contains formatting (eg: Word/HTML) into a field this formatting will need removing to keep the text styling consistent. This simply involves selecting Paste Special from the ePhox Edit menu and pasting as Plain Text or Clean HTML as detailed below: • After copying the text you require select Edit from the ePhox menu and thenPaste Special as shown: • A pop-up will appear prompting how you wish to paste the text, if it is formatted text then select the Plain Text option, for HTML the Clean HTMLoption should be selected. • After clicking OK the text will be pasted in without formatting. Any links or email addresses from the original copy will need to be set up in Rhythmyx.

21. NOTE: When entering data in the content editor it is not saved until you click ‘Update’ at the bottom of the page so remember to do this! Once the form reloads and you have finished making changes you can safely close it. After you have finished working on a content item it should always be checked back in, to do this right click on your staff profile in the Content Pane and select Workflow > Check-in. Next Exercise 3: Editing your staff profile • You can now continue editing your profile information by clicking on each field and making the • necessary changes.

22. Next Exercise 4: Previewing your staff profile Objective In this exercise you will learn how to preview your profile to see it as it will appear on the website.

23. 2. Hover your mouse over the Preview button and select P-Staff profile from the drop-down menu Next Exercise 4: Previewing your staff profile Objective In this exercise you will learn how to preview your profile to see it as it will appear on the website. Method 1. From the content explorer view right click on your staff profile page. 3. The page will be displayed as it will appear on the website.

24. Next Exercise 5: Searching for content • Objective • If you have a photo associated with your profile this exercise will show you how to search for it which is useful should you wish to update it. • If you don’t currently have a photo you can still follow this exercise as the profile image content type will still exist, just without a photo attached. Exercise 6 shows how to upload a photo.

25. Method 1. If the Content Explorer (the main Rhythmyx screen) is still open switch to it, if not re-open it. Next Exercise 5: Searching for content • Objective • To locate your profile image using the built-in Rhythmyx search engine. 2. Select Search from the Content menu in the menu bar. 3. The Search window will appear. 4. Click on the Advanced button to open the full list of Search options.

26. 4. Enter your surname here in the Title field 5. Select Profile Image from the Content Type selector 6. Click the OK button Search results displayed in the content pane. Next Exercise 5: Searching for content 7. The search results will appear in the Content Pane, as shown by the graphic below. Verify that your profile image content item appears here.

27. Next Exercise 6: Uploading your profile pictures • If you already have a profile photo this exercise shows you how to update this should you wish. • If you don’t have a photo by following this exercise you will learn how one can be added: in fact, uploading a profile picture involves 2 images, a large image and a thumbnail image. • Objective • To upload your profile pictures into Rhythmyx.

28. Next Exercise 6: Uploading your profile pictures • If you already have a profile photo this exercise shows you how to update this should you wish. • If you don’t have a photo by following this exercise you will learn how one can be added: in fact, uploading a profile picture involves 2 images, a large image and a thumbnail image. • Objective • To upload your profile pictures into Rhythmyx. Note about image sizes For now, please feel free to use the existing images from your current staff profiles. If you wish to create a new image please use the following dimensions: Large images: 220 pixels wide and 329 pixels tall Thumbnails: 100 pixels wide and 150 pixels tall If you need an image resized or cropped and you do not have access to the appropriate image editing software, please e-mail the Faculty Web Co-ordinator who will be able to do this for you.

29. Back in the Content Explorer, right-click on your profile image as found in exercise 5 and select • Quick Edit. Next Exercise 6: Uploading your profile pictures • Method 1. If your profile doesn’t currently contain a photo then you need to obtain some photos to use. To do this, open a new browser window, go to your existing staff profile and if you already have a picture right click on it and select ‘Save Picture As…’ and save it to your desktop. 2. If there is also a thumbnail size picture, repeat the step above. 4. The Profile Image Content Editor window will appear (described on the next slide)

30. The Profile Image Content Editor Next Exercise 6: Uploading your profile pictures

31. 5. Ensure the Alt Text field is completed with your name. 6. Click on Browse… to locate the full-size image which you saved to your desktop and upload it. 7. If you have a thumbnail image repeat the process by clicking Browse… on the thumbnail section. Next Exercise 6: Uploading your profile pictures

32. 5. Ensure the Alt Text field is completed with your name. 6. Click on Browse… to locate the full-size image which you saved to your desktop and upload it. 7. If you have a thumbnail image repeat the process by clicking Browse… on the thumbnail section. 8. Scroll the window down until you see the Update button. Click on Update and when the page reloads click Close. Next Exercise 6: Uploading your profile pictures

33. Next Exercise 6: Uploading your profile pictures • Now you have uploaded the images, it would be useful to preview them. This is described below:

34. Next Exercise 6: Uploading your profile pictures • Now you have uploaded the images, it would be useful to preview them. This is described below: 9. In the Content Explorer window, right-click on the profile image content item. 10. Select preview then S – Profile Image Large 11. Confirm the correct image appears. If you uploaded a thumbnail image repeat the process with the S – Profile Image Thumbnail option. 12. Now it just remains to check the item back in, to do this right-click the profile image item in the Content Pane and select Workflow > Check in.

35. Next Exercise 7: Linking your photo to the profile • We now have two content items that are closely related – a staff profile and an image to go along with it. In this exercise we are going to establish a relationship between them in Rhythmyx so that they are linked together. This is achieved using a slot. Slots provide a mechanism for associating content items. • Objective • To link your staff profile with its profile image.

36. 3. Scroll down to the bottom of the Content Editor window and click Edit All. 4. In the Related Content window that appears, click on Profile Image. The bottom half of the Content Editor window, showing the Edit All button. Next Exercise 7: Linking your photo to the profile Method 1. In the Content Explorer, find your staff profile (either by navigating or searching as in exercise 5). 2. Right-click on the item and select Quick Edit.

37. The search window shown below will appear: 5. Enter your surname here, in the title field 6. Then click the search button Next Exercise 7: Linking your photo to the profile 7. After a moment, a search results window will appear, as shown on the next slide

38. The search results window: 8. Check the box here under Profile Image Large 9. Click Link to Slot Next Exercise 7: Linking your photo to the profile

39. The search results window: 8. Check the box here under Profile Image Large 9. Click Link to Slot 10. The Related Content window will reload as shown here 11. Close the Related Content window Next Exercise 7: Linking your photo to the profile 12. Click close on the Content Editor window

40. The search results window: 8. Check the box here under Profile Image Large 9. Click Link to Slot 10. The Related Content window will reload as shown here 13. Back in the Content Explorer preview your Page by right-clicking on the content item and Select Preview then P – Staff Profile Page, as shown by the graphic on the right. Verify the image now appears on the page. Next Exercise 7: Linking your photo to the profile 11. Close the Related Content window 12. Click close on the Content Editor window

41. Next Exercise 8: Adding links • You may want to include links to other pages from your staff profile. In this section you will learn how to link to other pages and files in Rhythmyx, as well as to pages on other sites. • Objectives • To insert a link from your staff profile page to another page in Rhythmyx • To create a link to an external website using Rhythmyx managed links • To remove unwanted links from your staff profile page

42. Insert link button Text highlighted which will become link 6. In the Title contains field at the top of the search window enter the word ‘disabled’ and click search at the bottom of the window. Next Exercise 8: Adding links 1) Linking to a Rhythmyx page - Method In this part of the exercise we will link to another page in Rhythmyx. 1. Either log in to Rhythmyx or switch to it if already open. Browse to your staff profile as in exercises 1 & 2. 2. Right-click on your staff profile and select Quick Edit. 3. Click on an ePhox field such as Biography. 4. The ePhox editor will appear: highlight some text you would like to make in to a link, then click the Insert Rhythmyx Link button (shown below) 5. A search window will now appear (as in exercise 5). For the purposes of this example we will link to theinformation for disabled visitors page.

43. Ensure this is checked Then click on ‘Add’ Finally, close the window Next Exercise 8: Adding links 1) Linking to a Rhythmyx page - Method 7. The search results will be shown as below. We want to link to the P – Generic Page item, so check this as shown. Then click Add, then Close. 8. Back in the Content Editor, the ePhox window will update to show the text as a link. 9. Scroll down and click on Update to save the changes, once the page is refreshed click on Close. 10. If you wish to preview your changes, from the Content Pane right-click on your Staff Profile and select Preview > P-Staff Profile.

44. Next Exercise 8: Adding links 2) Creating a link to an external website Although it is possible to define links to external sites in the Content Editor, it is better to create these links as separate content items and then link to them. This link can be then used again and again but if it changes only needs updating in one place.

45. 1. In the navigation pane find the training folder and expand it to show the links sub-folder as shown below. Next Exercise 8: Adding links 2) Creating a link to an external website - Method 2. Right-click on this links sub-folder and select New Item > Link. The Link Content Editor will appear. 3. In the System Title field enter ‘Test: BBC News - your name’, eg: Test: BBC News – Matt Farrow. 4. In the Title field enter ‘BBC News’. 5. Confirm that your name is selected as the Content Owner. 6. In the URL field, enter http://news.bbc.co.uk (don’t forget the http://) 7. In the Comments field enter ‘For training purposes only’ 8. Click the Insert button to create the item 9. After the page refreshes click the Close button 10. Back in the Content Pane, right-click on the Link item you just created and select Workflow > Check in

46. Next Exercise 8: Adding links 2) Creating a link to an external website - Method Now you have created the link content item it just needs to be placed in your staff profile.

47. 14. Click on the Insert Rhythmyx Link button as before. The search window will now appear as shown on the next slide. Next Exercise 8: Adding links 2) Creating a link to an external website - Method Now you have created the link content item it just needs to be placed in your staff profile. 11. Locate your Staff Profile content item. Right-click on it and select Quick Edit. 12. Click on an ePhox field such as Biography. 13. Highlight some text that you would like to make into a link.

48. 15. Enter ‘BBC News’ into the Title Contains field 16. For the Content Type select ‘Link’ 17. Click the Search button (you may need to scroll down to see it) the search results will be found as shown by the graphic below Next Exercise 8: Adding links The search window

49. 15. Enter ‘BBC News’ into the Title Contains field 16. For the Content Type select ‘Link’ 17. Click the Search button (you may need to scroll down to see it) the search results will be found as shown by the graphic below 18. Click on the radio button next to your test link which includes your name 19. Click the Add button (may need to scroll down) The text you highlighted will turn into a link Next Exercise 8: Adding links 20. Click the Update button at the bottom of the page and after it refreshes click on Close. 21. Right-click on your staff profile page in the Content Pane and select Workflow > Check in 22. Preview your page to check the link has been inserted. The link will not work until the page is published.

50. Next Exercise 8: Adding links • 3) Removing unwanted links • You probably don’t actually want to link to the information for disabled visitors page or the BBC News website from your staff profile so let’s learn how to remove the links you added earlier.