University of East Anglia

Liferay How-To
Reference Manual
Admissions, Recruitment
and Marketing Department

Version 1.3

Contents
Overview ....................................................................................... iv
Introducing Liferay ................................................................................................................iv
1. Logging in and accessing your site .................................................................................... 1
2. Navigating your site........................................................................................................... 2
3. Adding Pages ..................................................................................................................... 3
4. Adding Pages checking page settings ............................................................................. 6
5. Adding left hand navigation .............................................................................................. 9
6. Adding a new Web Content Display portlet .................................................................... 14
7. Editing standard Web Content Display portlets .............................................................. 16
8. Publishing, saving as draft or cancelling your changes ................................................... 18
9. Adding a Portlet topper to content ................................................................................. 19
10. Uploading and inserting images .................................................................................... 21
11. Uploading and linking to PDF or Word files .................................................................. 26
12. Creating internal hyperlinks .......................................................................................... 30
13. Creating external hyperlinks ......................................................................................... 31
14. Creating links to email ................................................................................................... 32
15. School Home page layout example ............................................................................... 33
16. School Child page layout example ................................................................................ 34
17. Page layout explaining Liferay icons ............................................................................. 35
18: Glossary of Common Liferay Terms and Icons .............................................................. 36
19: Quick Reference guide .................................................................................................. 38
Appendices .................................................................................................................................. 43
Appendix 1: Adding a form in Liferay .................................................................................. 44
Appendix 2: Adding and editing tables ............................................................................... 52
Appendix 3: Adding a News item and inserting a thumbnail image ................................... 57
Appendix 4: Setting up the Asset Publisher portlet to display a News list Advanced Users
only ...................................................................................................................................... 60
Appendix 5: Adding Banner settings .................................................................................. 65
Appendix 6: Amending a School Homepage banner........................................................... 67
Appendix 7: Adding an Image Link / Visual Menu............................................................... 68
Appendix 8: Changing content on People Pages................................................................. 76
Appendix 9: Video - planning, approval and publishing...................................................... 84

ii

Appendix 10: Typical navigation structure in Liferay .................. 87

Appendix 11: Available Page Layouts in Liferay .................................................................. 88

iii

Overview
This reference manual is a guide for editors responsible for updating and creating
content within the Liferay Web Content Management System.
They are intended to:
Direct you to useful resources
Provide examples of best practise, house-style guidelines and templates

Useful links
Writing for web guidelines:
http://www.uea.ac.uk/is/liferay/Writing+for+the+Web+Guidelines
Training Resources:
https://lred.uea.ac.uk/training-resources

Contact
The Digital Marketing Team: digitalmarketing@uea.ac.uk, LSD 1.120.

Introducing Liferay
Web Content Management System (CMS) Liferay was introduced to UEA in 2010.
Intended as a more accessible and user-friendly system, the Liferay rich text editor has
similar editing features to that of Windows in look and feel.
The version used at time of writing is Liferay 6.1.

Key Features of Liferay

iv

Web Content Management System

Version: 6.2
Icon click button options and drop down menus allow users to carry out editing
quickly and easily
WYSIWYG Editing toolbar with easy to use formatting options
Save as draft option lets users save and edit work as they go along
Easy access content storage for all content produced

1. Logging in and accessing your site

Step 1.To log in to Liferay, visit the website https://lred.uea.ac.uk and you will be
logged in automatically (fig 1.1).
Step 2. Once you have logged in you will be able to see which sites you are a member
of on the Liferay homepage - the default page youll be presented with upon logging in.
Step 3. Underneath the tab entitled My Sites, click on the name of the site (likely a
school / department / research group) you wish to visit and youll be taken to a new tab
containing the homepage of that website.

Fig 1.1 Liferay log in screen

For any queries upon logging in, contact the Digital Marketing Team:

digitalmarketing@uea.ac.uk
Signing out of Liferay
To sign out:
Click on your account user name on the top right of the screen
Select Sign out from the drop down menu. (Fig 1.2)

2. Navigating your site

To find the content which you wish to edit, simply treat your site pages like you would
the live website.
Use the left menu to access different areas, or use hyperlinks within pages themselves.

Fig 2.1 Example of navigation menu and page layout within Liferay

3. Adding Pages
Step 1: Go to the Admin menu and select Pages from the drop down menu.

Fig 3.1 Admin menu showing Pages option selected

Step 2: In the Site Pages screen (fig 3.2), select the folder / parent page you
want your child page to sit within e.g. Research, and then select the Add child
page option. This brings up the Add child page window.

Fig 3.2 Shows Site Pages window, with Research page selected. Add child page option is at the top of
the screen, above Details heading.

Step 3: In the Add child page window, add your page name. Give your page
name a common sense title, one that effectively sums up the content of your
new page.

Fig 3.3 Shows Add child page window with various layout options

Step 4: Page Type: the page type is set to Empty Page by default.
Step 5: Page Layout: underneath the page type, there are a range of layouts
available.
The layouts to be used for school sites or sites that use the UEA Blue theme
(main UEA website colour scheme) are:
2 Columns (25/75) for a 2 column layout,
3 Columns (25/50/25) for a 3 column layout and
2-4 Columns for a parent page which includes a visual menu.
Click on the radio button next to the layout required to select.
Important note: Certain research and microsites sites will have a different page
layout from the ones listed above. You can check which page layout to use by
selecting a current page from your site in Liferay and looking up the page layout
via the Edit Icon
Step 6: once youve chose your required layout, select
4

Add Page
located at the bottom of the Add
Child Page window (fig 3.4):
This will insert your new page into
the relevant section of the site.
You should see a prompt at the
top of the page stating: Your
request completed successfully.
Fig 3.4 Detail of Add Child Page window, with
Add Page option at bottom of screen.

4. Adding Pages checking page settings

Once youve added a child page, you then need to check the page settings, such as
name, URL and page layout.
Step 1: Still in the Site Pages window, click on your new page title within the
navigation tree (fig.4.1) this will select the properties for that page.

Fig 4.1 Shows Details for the selected page, highlighted within the left-hand navigation tree.

Step 2: On the right of the screen, youll see a blue text box, which shows all the
properties for your page. The two that youll need to check are 1) Details, and 2) SEO.
Step 3: In the Details section, you should check the following:
Name: Sense-check your page name. Is your name appropriate for the topic
and concise enough to be read and understood quickly? Does it include
relevant keywords?
Hide from Navigation Menu: this can be used if you want to create a page that
cannot be accessed via the navigation; tick this box to hide the page from the
navigation. Untick when you want to unhide. Typically, if the content on your
page is at work, then you would use Hide from Navigation until your page is
ready. Note: This should only be used for new pages.
Friendly URL: Is the URL relevant to your page and does it contain keywords
such as the title and main subject? You can edit at this point, if needed
URL format: URLs need to be hyphenated where there is more than one word
and not include unnecessary characters.

Step 4: Adding to your Search Engine Optimisation (SEO). After making any
changes to your page name / URL, click on the SEO option in right hand menu (fig.
4.2):

Fig 4.2 Shows SEO field options for selected page

This brings up the following options:

HTML Title: This can be used if you want a longer title for your page name and
a shorter title for your navigation link text.
For example, if you want to call your page Research in Preparatory Schools in the Middle East
- and you want your navigation link text to read; Schools Research, you would
give your page name the title of Schools Research and your HTML Title the
title of Research in Preparatory Schools in the Middle East. The HTML Title
will display in Heading 1 on your page.
Description: This will appear as summary text within search engine results for
your page. In the Description text box, add a sentence which describes the
page. This text will appear as the lead text within search engine results.
Note: If you dont add an SEO description, Google automatically takes the first 160
characters from your page. Adding a description can help promote a particular page or
target your page at a particular audience.
Keywords: can be left blank, as Google and other search engines typically use
the page title and on page content to identify keywords.

Robots: can be left blank. Robots are used to block

page content from search engine results. Contact digitalmarketing@uea.ac.uk if
you would like to find out more about this option.
Step 5: Once all the changes have been made, select Save to save your changes (fig.
4.3).
Your page will now be ready for adding content to. To return to the page you were on
originally, click on the Arrow icon next to your site name at the top left of the page (fig
4.4).

Fig 4.3. Detail of Site Pages screen highlighting save button at the right of the screen

Fig 4.4 Detail showing Back arrow, next to page heading, which returns you to your original page.

5. Adding left hand navigation

If youre adding content to a new page, Liferay sites that exist in the main UEA
site (for example, Study with Us, Business, Schools and Faculty sites) will
require the addition of left hand navigation.
The UEA Navigation portlet provides left hand navigation for your page within the UEA
Blue theme (fig 5.1).

Fig. 5.1 shows the Business section of the UEA website, which uses the UEA Blue theme and UEA
navigation portlet.

To add the portlet:

Step 1: Locate your new page within the left hand navigation and select to navigate to
it.
Step 2: Select the Add (blue plus) button to the left of the screen (fig 5.2).

Fig 5.2 Shows Add button on the top left side of the screen

Step 2: Select the Applications tab (fig 5.3)

Step 3: Select UEA Navigation from the list (you can either drag and drop the portlet
onto the page, or select Add to insert fig.5.4)

10

Fig 5.3: Shows add window, with applications tab highlighted and UEA Navigation portlet option

11

Fig 5.4 Shows the page with the UEA Navigation portlet inserted

Step 3: Once youve inserted the portlet, close the Add menu window.
The portlet is automatically formatted to display in the UEA blue theme.

Navigation colour coding

The navigation is pre-configured to display the status of your page (e.g. if its a parent,
child or sibling page), and uses colour coding to show the selected pages relationship
to other pages within a particular section (see fig. 5.5 example provided below), along
with the pathway to that particular page.

12

UEA Navigation colour coding explained

Study with Us dark blue

signifies External theme and
home page of Study with Us of
site
Grey indicates child pages of
Undergraduate section
Light grey indicates child pages
of Fees and Funding

Undergraduate lighter blue

denotes parent page of selected
page (Fees and Funding)

Fees and Funding - dark blue

indicates currently selected
page

Fig 5.5 Diagram explaining UEA Navigation colour coding, representing the breadcrumb / pathway to a
selected page

13

6. Adding a new Web Content Display portlet

A web content display portlet is a term for a piece of content in Liferay where you can
display text, hyperlinks and imagery on a page.
Step 1. To add a new Web Content Display portlet, navigate to the page you wish to
add the portlet to and then hover over the Add (blue plus) button in the top left of the
screen.
Step 2. In the Add window, select the Applications tab
Step 3. Drag and drop the Web Content Display onto the page or select Add to insert
(Fig. 6.1)
This will add a new Web Content Display portlet to the top of the page.
Step 4. To add new content to the portlet, click on the Add icon to the bottom left of the
portlet which looks like a file with a green + over it (to the right of the small image of a
cog).

Fig 6.1 Image detailing Web Content Display option, within the Add window

14

Fig 6.2 Image detailing Web Content Display portlet on the page.

Your content is now ready for editing. This is covered within Section 7: Editing
standard Web Content Display portlets on page 17 of this guide.

15

7. Editing standard Web Content Display portlets

To edit a standard Web Content Display portlet (an item of content on a page):
Step 1. Scroll to the bottom of the portlet you want to edit and click on Edit icon. This
is indicated by the symbol of a pencil and paper (Fig 7.1).

Fig 7.1 Image showing edit (pencil and paper) icon, which launches the editor in Liferay

Youll now be presented with the editing screen (fig. 7.2)

Fig 7.2 Detail showing Liferay WYSIWYG editor

Please note that the title displayed in the Title (Required) field does not appear on the
live site its a reference for you and your colleagues. Remember to give your title a
name that can be referenced easily by other staff editing the site. Usually the title will
be the name of the page followed by the type of content, for example:
Research Degrees text

16

Above the Title field is the ID field theres no need to complete

this ID is generated automatically when a piece of content is published.
Below the title is the Content, which is where you can make changes to what is
presented to people viewing the actual website. You have access here to basic
formatting such as Headings, Strong (B) and Emphasis (I), as well as the ability to alter
the content itself.
Step 2. If you wish to paste new content in then you can do this so long as you click on
the Paste as plain text icon which is shown as a picture of a blue notepad over a
clipboard.
Or, you can use the Paste from Word icon (fig. 7.3), which is shown as a picture of a
Word icon over a clipboard. This option retains formatting such as hyperlinks.

Fig 7.3 Detail of the editor in Liferay, showing various paste options.

Alternatively, if you dont have text to paste, click where you wish to enter text and start
typing.

Portlet Toppers
Note for users editing within the new theme: Within the new theme, you can
add a portlet topper to your content. See Adding a Portlet topper to content
in Section 9, page 20, for information on how to do this.

17

8. Publishing, saving as draft or cancelling your

changes
Publishing content
Once you have completed your edits, click on the Publish button to the right of
the editing screen. This saves your changes and publishes your content onto
the live site.
Cancelling changes
If you change your mind prior to publishing and dont wish to save the changes
you have made, then simply click on Cancel. N.B. Use with caution - this is
best applied if youve already published a previous version of your content, as
cancelling any new content before publishing or saving as draft will lose your
changes completely.
Save as draft
If you would like to save the changes you have made but not yet make them
live, click on Save as Draft. This will retain your changes without presenting
them to the public.
When youre ready to go live, open the portlet again for editing and click on
Publish. This is best used when editing existing content.

Fig 7.1 Image highlighting Draft, Publish and Cancel options

Please note: icons may differ from those shown, depending on access.

18

9. Adding a Portlet topper to content

As part of the UEA websites house style, all on-page web content portlets need to
have a bordered heading known as a portlet topper. Portlet topper headings act as
an additional heading for your content.
To add this:
First publish your content.
Then, click on the spanner icon to the top right of your portlet (fig 9.1).
Select Look and Feel
In the Look and Feel window, tick Use Custom Title
Add your title to the Portlet Title field
From the drop down field under Show Borders, select Yes from the
dropdown list (fig 9.2)
Select Save to save your changes (a prompt will display in the window showing
you your change has been made successfully)
Close the Look and Feel window
Select Refresh / F5 to refresh the screen and view the topper (fig 9.3)

Fig 9.1 Detail showing spanner icon highlighted on top right of portlet

19

Fig 9.2 Detail showing look and feel window with custom title option ticked and show borders selected

Fig 9.3 Detail showing a finished portlet topper.

20

10. Uploading and inserting images

There are two ways to add images within basic web content. You can either add
images in a group or individually, as you need them.

To add images as Multiple Documents

Step 1: Click on Admin in the top right of the screen, and then Content.
Step 2: Now choose Documents and Media from the left menu and then click on Add
and Multiple Documents (fig 10.1).
Step 3: This will bring you to the page shown in (fig 9.2). Here, if you are using Google
Chrome or Mozilla Firefox, you will be able to drag and drop the images you wish to
upload directly into the box, and click save. If using Internet Explorer, or if you prefer,
you can upload files using the Select Files button and this method is shown below (fig.
10.2).
Step 4: If you click on Select Files, you can now browse your storage device and select
every image that you wish to upload, using the mouse plus CTRL to select multiple
items that arent next to each other or the SHIFT key to select multiple items next to
each other.
Step 5: Once youve chosen, click Open and it will upload them (you can also upload
just a single item in this way if you decide you dont want anything else).

Fig 10.1 Showing Multiple Documents option within Add dropdown menu - please note: menu options
may differ depending on access

21

Fig 10.2 Detail showing the Add Multiple Documents page and drop box.

Step 6: Click on the Save button a green banner prompt will appear to confirm when
saved successfully - and then click the blue back arrow and youll be returned to the
Documents and Media area.
Step 7: Click the white back arrow at the top left of the screen of the Documents and
Media window to return to the page you were working on. Now edit the content you
wish to place the image in.
Step 8: Launch the editor using the pencil and paper Edit icon. In the Content box,
click with the cursor where you would like your image to appear, and then click on the
small icon of a postcard (between the flag and the f icons although this can vary
depending on access).

Fig 10.3 Showing Image icon within edit screen please note: formatting icon display may differ
depending on access

22

Step 9: Now click on Browse Server. This launches the Resources Browser window,
Step 10: Click on the folder of the site youre working in.
Step 11: Then choose the required uploaded image from that folder (you may need to
navigate through to the relevant folder, depending on where you saved your image).

Fig 10.4 Resources Browser screen, showing list of uploaded images

This then inserts the image into the Image Properties window (fig. 9.5), so you can
preview and align your image, and add alternative text.

Fig 10.5 Image Properties window please note: formatting icon layout may differ depending on access

Step 12:

23

Make sure your image is accessible: be sure to fill the

Alternative Text field in with some descriptive text.
You can also add HSpace (horizontal space) around your image, if required.
The normal size for this is 5 pixels (you just need to enter 5 in the HSpace
field).
Along with HSpace, you can align your image to the left or right by selecting the
relevant options in the Alignment dropdown. For logos, the house style is to
have the logo aligned left and at the very bottom of the page.

There is no need to add VSpace or a border.

Step 13: Now click on OK and the image will be placed within your content. You can
drag and drop the image to reposition it if you need to, and you can right click or double
click on the image to edit its properties again.
Step 14: Once youre happy with your image, you can save the portlet and publish to
the live site by clicking on Publish.
.

24

Image sizing
Always make sure your images are an appropriate size before uploading to the web.
In terms of file size, files need to be set at a resolution of 72dpi and no larger than
75kb (50kb is recommended) for on-page images.
When sizing your images, an informal rule of thumb is to size all on-page images to
no larger than 300px width. This ensures images are large enough for people to see
whats going on without pushing the content too far down the page.
Quick Reference Portlet Size Guide
Banner portlet sizes:
UEA Blue (main UEA site) theme 940x250px
Visual menu / Image link portlet sizes:
UEA Blue (main UEA site) theme 225x150px
Cropping or resizing images
You can resize images using Paint.NET, free software which you can download onto
your machine yourself via the Software Centre.
Right click on your required image.
Select Open with then Paint.NET.
To resize:

In Paint.NET, select Image from the menu and choose Resize. This will open
the Resize dialog box.
Ensuring the Maintain aspect ratio tick box is ticked, enter your required size
into the width box (the aspect ratio will automatically change for the height
also.)
Click OK.
Save your changes.

To check and alter resolution:

In Paint.NET, select Image from the menu and Resize.

Within the Resize dialog box, the resolution should be set to 72.00 pixels /
inch. You can use the arrows to increase or decrease, if needed.
Click OK.
Save your changes.

To crop:
To begin, ensure that the Tools option is selected from the Windows menu.
With the Tools menu window showing, select the Rectangle select icon from
the menu. (Icon depicting a blue square with dotted lines around it.)
Drag the cross hairs across the section of the image you want to crop the
bounding rectangle size showing the width and height as you drag is shown
in the bottom left on the status bar until you have the size you require.
When you have the required size, select the Crop to Selection icon the icon
depicts a cropping tool and is located next to the clipboard icon on the toolbar.
Once your image is cropped, save your changes

25

11. Uploading and linking to PDF or Word files

There are two ways to upload and link to files. You can either add files in a group or
individually, as you need them.

To add files in as Multiple Documents

Step 1: Click on Admin in the top left of the screen, and then Content.
Step 2: Now choose Documents and Media from the left menu (fig 11.1).
Step 3: Then click on Add and Multiple Documents. This will bring you to the page
shown in fig 11.2. Here, if you are using Google Chrome or Mozilla Firefox, you will be
able to drag and drop the images you wish to upload directly into the box, and click
Save. If using Internet Explorer, or if you prefer, you can upload files using the Select
Files button and this method is shown below.
Step 4: Click on Select Files; you can now browse your storage device and select
every image that you wish to upload, using the mouse plus CTRL to select multiple
items that arent next to each other or SHIFT key to select multiple items next to each
other.

Fig 11.1 Image showing Documents and Media window, with Multiple Documents selected in Add
dropdown. Please note: menu options may differ slightly depending on access.

26

Fig 11.2 Detail showing the Add Multiple Documents page and drop box.

Fig 11.3 Shows Add multiple documents screen, browse option and browser window, for selecting files

Step 5: Once youve chosen, click Open and it will upload them (you can also upload
just a single item in this way if you decide you dont want anything else).
Step 6: Click on the Save button and then the blue back button and youll be returned
to the Documents and Media area. Click the white back button in the top left of the
screen to return to the section you were editing.

27

Now edit the content you wish to place the file in.
Step 7: In edit mode, select the text you wish to link your file to, and then click on the
small icon a chain.

Fig 11.4 Edit screen detail, highlighting hyperlink icon and selected text

Step 8: Now click on Browse Server,

Step 9: In the Resources Browser, click on the site youre working in (displays as a
folder icon), and then choose your newly uploaded file from the folder.
Step 10: Now click on OK and the file will be linked within your content.
Step 11: You can save the portlet by clicking on Publish.

To upload a single file to Liferay in the editor

Step 1: Open your portlet for editing
Step 2: Select the text you wish to link your file to,
Step 3: Then click on the small icon of a chain,
Step 4: Click on Browse Server,
Step 5: Click on the site youre working in (displays as a folder icon).

28

Step 6: Then click on Choose file at the bottom of the screen and locate the file you
wish to use from your storage device.
Step 7: Once selected, click Open and then click on the Upload button.
Step 8: Now select your file from the list its been added to and then click on OK and
the file will be linked within your content.
Step 9: You can save the portlet by clicking on Publish.

Managing your images and documents

Before uploading images and documents, you can add folders to help manage your
files.
In the Documents and Media window, select Add, then Folder. Add a name to your
folder and click on the folder to access it.
Then add your images and documents as you would normally.
Version control
So that you dont end up with many versions of the same document across the site,
youll need to use version control to edit your documents. This just means using the
Edit feature within an individual document to update to the latest version of that
document.
To do this:
Make the required changes to your document and save on the shared drive
In Liferay select Admin Content Documents and Media
Locate the original version of your document in Liferay, click on it to select
Once selected, choose edit, then Choose file
Browse and upload your amended document
Save changes your link should automatically be updated

29

12. Creating internal hyperlinks

Linking to pages contained in the site youre working within is done in a similar way to
linking to a file.
Step 1: Open your portlet for editing, select the text you wish to hyperlink, click on the
small icon of a chain (link icon).
Step 2: Then, in the Link pop up window, click on Browse Server. Once in the
Resources Browser window, change the Resource Type in the top left of the screen to
Page (fig. 12.1).

Fig 12.1 Showing Resources Browser window, with Page Resource Type highlighted

Step 3: Click on the site youre working in and then locate and click on the page you
wish to link to (displays as a page icon followed by the page name).
Step 4: Click on OK and the page will be linked within your content.
Step 5: You can save the portlet by clicking on Publish.
Naming Hyperlinks on the page
Its best practice to give your link display text the name of the content that its
pointing to.
Screen readers pick up on hyperlinks, so linking to text such as here or click here
isnt accessible and doesnt tell users what they are linking through to.
.
30

13. Creating external hyperlinks

Linking to external websites works in the same way as you would link to a site in, for
example, Outlook or Word.
Step 1: Copy the address of the website you want to link to.
Step 2: In the portlet web content editor, select the text you want to link from, then click
on the hyperlink icon.
Step 3: In the Link pop up window, select URL within the Link Type dropdown list, then
paste or type the external website address in to the URL field, then click OK.
Step 4: Save changes as normal.

Fig. 13.1 Detail showing Link pop up window, with URL options displayed

Checking external links

It is best practice to check external links linking from your pages periodically, to see if
they are still current or require updating.

31

14. Creating links to email

Step 1: Copy the email address that you want to link to.
Step 2: In the portlet web content editor, select the text you want to link from, then click
on the hyperlink icon.
Step 3: In the Hyperlink window, select Email within the Link Type dropdown list, then
paste or type the email address in to the Email address field, then click OK (fig. 14.1).
Step 4: Select Publish to save changes, as usual.

Fig. 14.1 Detail showing Link pop up window, with E-mail options displayed

32

15. School Home page layout example

Home Page Banner
Page Title
Should sum up page / section
of site, be meaningful and
memorable.
Left Hand Navigation

Portlet Topper

Should mirror site structure,

linking to child pages within site
section.

Needs to be either a
strapline promoting the
main selling points of
your page or a summary
of the content; limited to
one line of text.

Visual Menu Links

Visual menu images
should be aspirational
and represent the page
or site the link is
directing visitors to.
Image pixel size: 225w
x150h.
Visual menu images
should be in multiples of
3 where possible and
the links should be to
child pages within the
main site, or take
readers through to
related pages and sites.

33

Banner images should be UEA-owned, aspirational

and inspiring. Image pixel size: 940w x250h. Must be
relevant to the section, should not contain text or
logos. Text saved within a jpeg is not accessible to
screen readers or search engines

Body Copy
Intro should be an overview
of the site and include a
limited selection of related
links to other pages. Text
should not be overly long, as
the homepage needs to drive
the reader to pages within the
site. Should make appropriate
use of Social media icons.
Headings and bullet points
can be used to break up text
into user-friendly segments.

16. School Child page layout example

Left Hand Navigation

Should mirror site

structure, linking to
child pages within site
section. Should not be
used to redirect users
to other sites.

Page Title
Should sum up page / section of site, be
meaningful and memorable. Should be
representative of the School or Department
and be concise.

Portlet Topper

Banner
Banner images should
be UEA-owned,
aspirational and
inspiring. Image pixel
size: 940w x250h.

Right Hand Call To

Action / Text Links
Should represent an
ask or call to action for
the user e.g. a link to a
form or related pages.
Right hand image links
should not be used to
replicate the left hand
navigation.
Visual menu images
should be aspirational
and represent the page
or site the link is directing
visitors to. Image pixel
size: 225w x150h.

34

Acts as your first

heading on your page.
Needs to be either a
strapline promoting the
main selling points of
your page or a summary
of the content. Limited to
one line of text.

Body Copy
Body copy should be brief,
accurate and up-to-date and
include a limited selection of
related links to other pages.
Headings and bullet points can
be used to break up text into
user-friendly segments.
If visitors need to drill down for
further information, child pages
can be added to break
information up, as appropriate.
Site structure
If considering changing the structure of your site,
contact Digital Marketing for advice, as moving
and renaming pages will affect the page address
and any links to your page will no longer work.

17. Page layout explaining Liferay icons

Liferay grey dock bar, with Menus which feature

various commands

New content icon (page symbol with green

plus sign): Selecting this icon on a web page
allows you to create new content.

Edit web content icon (page

with pencil image): allows
users to continue editing an
existing piece of content.

35

Settings icon (cog symbol): By clicking on the

cog displaying on the page, you can select
existing web content to insert into the page. Useful
if you accidentally delete a piece on content on a
page.

18: Glossary of Common Liferay Terms and Icons

Term

Meaning / Usage

Add New (Asset

Publisher icon)

Clicking on the Add New icon at the top of an Asset

Publisher list allows users to create a new Blogs Entry item.
Normally used to add a News and Event item

Icon(s)

Configuration / Settings
icon

Allows you to configure or set content in Liferay. By clicking

on the cog displaying on the page, you can select specific
web content to insert into the page.

Create new web content

icon

Selecting this icon on a web page will start the content

editor and allows you to create new content.

Look and Feel

Displayed as a palette icon. In certain sites, in basic editing,

you would select this to untick the show borders option.

Portlet

Generic term describing basic web content e.g. a web

page or item of text or images appearing on the page.

N/A

Portlet

Generic term describing basic web content e.g. a web

page or item of text or images appearing on the page.

N/A

Tools

Displayed as spanner icon. Clicking on the icon allows

users to access the Look and Feel and Configuration
options.

UEA Blue Theme

UEA web design that includes a blue banner background.

Banners have faculty and department colours (see example
below) and visual menu image links are round-edged.
Makes use of portlet toppers (headings with a coloured
background) see example below,

36

(see Fig
17.1)

Web content display

floating banner

Appears on the top right hand side of content. Click the

cross hairs to drag and drop portlets into position on the
page. Contains Tools option.

Web content display

floating banner

Appears on the top right hand side of content. Click the

cross hairs to drag and drop portlets into position on the
page. Contains Tools option.

Web content icons

Used to represent basic actions in Liferay. Main icons are:

Web editor (page and pencil icon),
Create new web content (page and green cross
icon)
Configuration (cog icon).

Web editor icon

Clicking this icon takes you to the web editor. This icon
appears after publishing or saving new content for the first
time.

Fig 18.1 Example of UEA Blue Theme design

37

19: Quick Reference guide

Item

Context

Guidance

Banners

Used on School
Homepages

Documents
and Media

All types of
documentation and
media: from PDFs to
Word documents and
imagery

Banners used on School homepages

should incorporate the following slides:
An approved School video linking
to a lightbox video display
A slide linking to latest news,
plus quote
A slide with a quote from a
student or alumni
Images should be good quality not
pixelated and suitable for the web
e.g. approved imagery - not animation or
clip art type images
Make sure you carry out version
control to update your documents
regularly

Make sure you name your give

your files a meaningful name that
will be recognised e.g.
Undergraduate Brochure 2014

File types PDFs are the

recommended file type
Dont use Heading 1 for on-page
content, as this is the default size
for the page title. Use headings
hierarchically for on-page
content: Heading 2 for your initial
heading, headings 3 for subheadings of Heading 2 and
Heading 4 for sub-headings of
Heading 3.
Use hidden pages appropriately.
Hidden pages should only be
used to hide pages that you dont
users to find easily
(Acknowledgement pages after
form submission, for example).
Most pages within the UEA
website should be unhidden,
unless they are in draft in Liferay
or have a specific use (as per
Acknowledgement page
example.)
Make your hyperlinks accessible;
link to text describing the page or
email address you are linking to
and avoid use of click here (this

Headings

All headings and subheading on a page or

within content

Hidden pages

Live pages that are

hidden from the left
hand navigation

Hyperlinks

Used for linking to pages

within a site, linking to
documents or linking to
email and external

38

URLs. Can be an image

link or text link.

Image links

Image portlets that link

to related pages or sites.
Image links can make
up a visual menu or be
used as a right hand
call-to-action

also helps with SEO)

Make sure your hyperlinks open

in the same window. This allows
users to make their own choices
on how they want the page
displayed and also means that
navigation history (use of the
Back button) stays consistent.

Use hyperlinks logically within

your page that are relevant to
your content, this will help to
strengthen search engine
optimisation (SEO)
Image links on a 3rd level page
(for example, individual Schools
and Faculty pages, explore our
Research) can include a mixture
of key internal pages and links to
other sites. If linking to other
sites, these links should come
last in the order of links
Image links that are used in
place of left hand navigation on
top level pages should direct
visitors to 2nd level child pages
only. E.g. www.uea.ac.uk/study
Right hand image links should
incorporate a call to action for the
user e.g. direct visitors to a
form or related site. Right hand
call to actions cant be used in
conjunction with a visual menu
layout
Visual menu image links - can
include a mixture of internal and
external. For School and faculty
pages / second and third level
home pages, these should be
located underneath the main
body text on the page:
http://www.uea.ac.uk/medicine
Use images in context - think
about how you make use of
images on pages lower down in
the navigation. Do they serve the
content? If you want to use

Images

39

All UEA website images

(jpegs, pngs) on-page,
image links or banners

images to break up lengthy

content, choose images that are,
relevant, UEA-owned or
attributed correctly and are
suitable quality for the web
Left hand
navigation

Left hand menu with

hyperlinks taking users
through to child pages
within the UEA site.

Subject /
department
home pages

All department or school

top level pages

Super
dropdown
menu

The global navigation for

the UEA site (see
examples below).
Shows top level pages
across the site:
Home,
Study with Us
Research
Faculties and
Schools
Business
Alumni &
Supporters
Current Students
& Staff
About Us
Uniform Resource
Locator your website
address:
www.uea.ac.uk,
www.uea.ac.uk/business

URL

Video

40

All video content

featuring on the UEA
website

The left hand navigation should

take users through to child pages
within a section. Dont use your
left hand navigation as a URL
link to link to non-child pages, as
this can confuse users and take
them off-journey.
Consider the purpose of any site
specific home pages e.g. to drive
users to key sections of your site,
introduce school mission,
highlight unique features and
selling points. Is it covering these
main areas?
The Super dropdown menu is the
consistent global navigation for
the UEA site (see examples
below) In terms of pages that it
links to, the menu should show
1st, 2nd and 3rd level pages only.

URL naming. When creating a

page in Liferay, make sure you
give your URL a name that is
relevant to the content, includes
keywords and is meaningful to
your audience. Requests for an
top level short versions of URLs:
e.g. www.uea.ac.uk/name - need
to go through Digital Marketing.
Videos that have been approved by
Marketing Managers can be hosted via
Helix (UEAs digital repository) or
YouTube. Digital Marketing can embed
approved video links. Video guidance

Fig 19.1: Example of super dropdown menu, above.

41

Fig 19.2: Example of super dropdown menu with Study with Us menu showing

42

Appendices

43

Appendix 1: Adding a form in Liferay

Liferay has a form tool which enables you to display a form on your chosen page.
Please note: if you require a form, please contact Digital Marketing in the first
instance: digitalmarketing@uea.ac.uk. Digital Marketing will create your form and liaise
with the form requestor to ensure the form is tested and configured as needed. Form
editing and data management of the forms should be managed by the form requestor.
For this, you will require Liferay training. Contact digitalmarketing@uea.ac.uk for more
information on training.
How to add a form:
Step 1: Go to Add on the top left menu and select the Applications tab.
Step 2: Search for form in the search window and click on Web Form.
Step 3: Drag the form to the right position onto your page
Step 4: Once in place, click on the spanner on the top right of your form portlet, then
click on Configuration to create the form.

Fig. 20.1 Add menu options showing Web Form in under heading entitled Tools

44

Form settings
The following sections make up the configuration settings of your form. The various
options and their use / context are explained here:

Form Information:

Title: Title of the form, this will show on the live form.
Description: If you havent already got some explanatory text on the page you
can use this section. Any text you enter here will show on the live form.
Require CAPTCHA (tick box): Leave unticked. We are currently not using
CAPTCHA, which is an anti-spam device. If your form suddenly gets hit with
lots of spam, please contact the Digital Marketing Team.
Redirect URL on Success: If you have created a page with a message to form
users you can enter the URL for that page here. After the user presses Submit
he or she will be redirected to this page.

Handling of Form Data

Email: Send as Email: Make sure you tick this box so that the information can
be sent.
Name From: This is what will show up in the data collectors inbox. Its probably
best to prefix it with UEA website or something similar, for example UEA
Website Feedback Form.
Address From: This must be a UEA email (and may be that of the data
collector).
Address To: This is the email address of the data collector, for example
digitalmarketing@uea.ac.uk.
Subject: This is the subject that will appear in the data collectors inbox, for
example UEA Feedback Form.

Database

Save to Database (tick box): Untick this box if there is any data protection
concern caused by the kind of information being collected.
File: Save to File (tick box): Leave unticked as the function has not yet been
tested.
Path and File Name: Leave blank also.

Form Fields

45

Name (text box): This is the title of the kind of information requested, for
example Surname or Organisation. To change this, just type the required title in
the box.
Type (drop down list): This is a list of options of how to present the requested
data.
o Text: A small box for text, most suitable for a name, email address,
telephone number, etc.
o Text Box: A larger box for text, most suitable for an address or further
information, such as comments from the user.
o Options: This creates a drop-down list on the live form. When you
select this option in the editing window it brings up another box for text
labelled Options. Enter your options in here separated by commas. For
example: Yes,No or Red,Yellow,Blue.
o Radio Buttons: This creates buttons to select on the live form (only one
button at a time can be selected on the live form). When you select this
option in the editing window it brings up another box for text labelled

Options. Enter your options in here separated by

commas. For example: Yes,No or Red,Yellow,Blue.
o Paragraph: This is an option for the editor to put in a paragraph of text
rather than an information field. This may be an explanation of what will
happen next or note about data protection, or an agreement statement.
You can also use this above another type of field such as a Check Box
if the text for it wont fit into the specified 75 character limit.
o Check Box: This creates a titled box which must be ticked by the user
(useful for agreement statements) unless it is created as Optional in the
editing window (see below).
Optional (tick box): The default setting is not optional. If you want to make the
request for this piece of information optional then tick the box.
Circle with Three Lines (next to the title): Hover over this and your cursor will
change to a cross with arrows. This lets you change the position of a field by
dragging and dropping the field up or down.
Validation: Ignore this for now as this function has not yet been tested.
Plus and Minus signs: Use these to add more fields to your form or to delete a
field.
Step 5: Once you have configured your form to your requirements, select Save to save
your changes.
To edit your form once published, select the spanner icon on the right hand Web form
floating banner, then select Configuration. You can then edit the various fields listed
above. When youve finished editing, select Save to save your changes.
Fig 20.2 Showing Form fields editor in Liferay:

46

47

Fig 20.3 Details Text, Options and Radio Buttons options in the form editor

48

Fig 20.4 Detail showing Radio Buttons, Check box and Text box options in the
form editor

Fig 20.5 Example of form in live view:

Text option (for entering text)

Options option (for multiple
choice)
Radio buttons option (for either
/ or)
Text box for detailed text
submission

49

Tick box option (to indicate

preference or agreement /
understanding)

Forms: things to remember

50

Testing: always test your form prior to making it live. The best way to do this is
to set your form up as a hidden page and unhide when youre ready to publish
Data protection: any data you collect is subject to Data Protection law:
o The guidance below provides some context on what is meant in terms of
sensitive personal data and what you need to be aware of when setting
up forms and collecting / storing personal data. Data storage, retention
and the statement of intent is the responsibility of both individual and
group project requestors.
o Data Protection Principles: When setting up a form and planning to
collate data, keep the eight Data Protection principles in mind
o Sensitive personal data this includes medical data, sexuality, criminal
records, trade unionship.
o Personal data - personal information, such as email, name, address,
telephone number
o Credit card / financial data - never request a credit card number or bank
account/sort code. To comply with banking security standards (PCI
DSS), UEA cannot directly collect, store or transmit this information
through either a web form or email (including attached documents).
Instead use a third-party to process card transactions. Please contact
Rhoda Wolf in the Finance Office for more information;
R.Wolf@uea.ac.uk.
o Data processing - this includes getting, collecting and storing. In order to
store data you need explicit consent from data subject. You need to
make clear within your form what the data will be used for. View
example
o Research ethics - it's worth checking with your Faculty or Department's
research ethics contact prior to collecting data, to see that you have
covered all data collection aspects from an ethics perspective.
o Indication of intent - an explicit and positive indication of intent, or action
on part of the individual either a check box / opt in - must be
accessible from your records. Staff will need to maintain a record of
consent in case of follow up actions, for as long as you have the data
for.
o Data retention - only keep data for as long as it's needed. Research data
can be kept indefinitely, but there are conditions you need to fufill in
order to activate exemptions.
o Storage of personal data staff need to be aware of who has access to
personal data. It is important to limit the number of people who need to
have access. Liferay gives you the option to extract and delete data
from within the form set-up. You need to ensure that data is not kept
within Liferay for any longer than is required. Contact
digitalmarketing@uea.ac.uk for more information.
o Transportation of data - if you are transporting data you also need to
consider the format of transporatation and the level of encryption /
security in place.
o Sending data to external email addresses - if you're sharing data with
external researchers or partner organisations it's important to be aware

that emails are not encrypted. Any sensitive data

that's being sent outside the University should be encrypted.
Contact Dave Palmer and Ellen Paterson: foi@uea.ac.uk, Information
Compliance Managers. They also provide data protection training,
available via the CSED pages.

Exporting, saving and deleting data stored in a form

If you have selected the save to database option to save data collected with each
form submission, you can extract data stored in your form as a CSV (text) file.
Note: form editors will need to regularly extract and delete data for data protection
purposes.
Any data you collect also needs to be stored securely (encrypted) on your network
drive in an excel file and destroyed when no longer needed.

To export the CSV file and save onto the shared drive:

51

Log into Liferay via https://lred.uea.ac.uk

Access the site
Locate the form: https://lred.uea.ac.uk/web/
Select the spanner icon next to the web form floating banner on the right hand
side to open settings
Select Configuration
Once a submissions been made, the form will have a prompt within the Form
Fields section stating: There is existing form data. Please export and delete
it before making changes to the fields.
Select Export Data. Save the data as encrypted data (password protected), in a
secure folder
Once exported, you can then delete by selecting Delete Data
Select Save to save changes
Close the Web form window

Appendix 2: Adding and editing tables

Fig 21.1 Example of a page using table and table formatting.

To add a table in Liferay

Fig 21.2 Detail showing table icon in Liferay editor

52

Step 1: On your page, select the edit icon (pencil

and paper) at the bottom of your portlet to edit
your content.
Step 2: If starting a table from scratch, select the
table icon (fig 21.2). This will open the Table
Properties box (fig 21.3).
Step 3: Within the table properties box:

Add the required number of rows and

columns

On the header drop down, select; First

Row from the list

Change the Border size to 0

Click OK to insert your table onto the page
Click Save as Draft to save your changes and continue editing.

Fig 21.3: Detail of editor highlighting Table properties window

You can then start to add data into your table.

As youve selected a header for your table (step 3), theres no need to add a heading
style, as this will now be styled for you.
Step 4: Click in each cell to add data. As with all headings used on the web, they must
be meaningful and provide context.
Step 5: Once your table is finished, click Publish to save and publish your changes to
the live site.

53

Fig 21.4: Image shows table inserted in Liferay editor

54

Adding a table by copying and pasting from another source

You can also add a table by copying and pasting a table from Excel or Word.
Step 1: Select and copy your table ready for pasting into Liferay
Step 2: In the edit screen, place the cursor where you want your table to appear.
Step 3: Select the Paste from Word icon (clipboard icon with a W hovering over it)
This will paste your table into the edit box and will ensure that the formatting is in the
correct house style.
You will get a Paste window displayed (fig 20.6).
Once this appears, use the keyboard shortcut CTRL+V to paste (or right click and
select Paste), then click OK to insert the table into your content.
Fig 21.5: Image shows Paste window

55

Fig 21.6: Detail showing shortcut menu with Table Properties option highlighted.

Step 4: Youll then need to edit your table properties so that its formatted correctly. To
do this:
Select the newly pasted table with the mouse, right click and
Select Table Properties (fig 21.6) from the shortcut menu.
Step 5: Within the table properties box:
On the header drop down, select; First Row from the list
Change the Border size to 0
Click OK to add the formatting changes to your table.
Step 6: This will take you back into the editor.
Step 7: Click in each cell to add data.
Step 8: Once your table is finished, click Publish to save and publish your changes to
the live site.

56

Appendix 3: Adding a News item and inserting a thumbnail image

All school sites have a News section that is set up so that you can add news items to
your page straight away.
Note: This section assumes that you have an Asset Publisher set up. For details on
how to add an Asset Publisher display, please refer to the Liferay Training Manual.
The template used for a news item is known as a Blogs Entry.
Step 1: There will be a button at the top of the asset publisher labelled Add Blogs
Entry or something very similar which you can click (exact wording will depend on how
the asset publisher is configured).

Fig 22.1: Add new option on Asset Publisher

Step 2: This will launch the editor, in which you can edit and publish content like you
would in a normal web content display.

Fig 22.2 Example of edit screen

57

Step 3: Once in the editor, add a title for your blog (Note: this is the title that will
display on the page). The title appears automatically in Heading 2, so any initial sub
headings in your article will need to be in Heading 3 and sub-sub-headings, Heading
4.
Step 4: If you are publishing your item prior to todays date, amend the date by
selecting the date / month / year / time drop down fields under Display Date.
Step 5: Add your content, adding any necessary headings, links and images.
Step 6: When you have done your link / date check and proof read your content, click
Publish to save and publish your changes or Save as Draft to save as a draft.
Note: You can edit a published blog from within the news item summary page by
clicking the Edit icon to the right of the blog entry that you want to edit.

Inserting a thumbnail image into your News Item abstract

You can insert a thumbnail image into your blog entry news item in edit mode. The
thumbnail appears as a fixed width of 150 pixels.
Step 1: Click on the Edit option next to the blog you want to edit.
Step 2: When in the editor, go to the Abstract section.
Step 3: In this section, tick the Use Small Image tick box.
Step 4: If the image in your news item is the one that you want to use as a thumbnail,
whilst in the editor, right click on your image to open the Image Properties window.
Step 5: With the Image Properties window open, select the Image URL and copy
using the Ctrl+C keyboard shortcut.
Step 6: In the edit window, paste your image URL into the Small Image URL field
within the Abstract section.
Step 7: Select Publish to save and publish your changes.

58

Fig 22.3 Example of Small Image options in blog entry editing screen

Another way of locating image URLs

If you dont have an image inserted into your news item, but you want to include a
thumbnail of an existing image within Liferay, you can locate the image URL of an image
already loaded in Liferay and paste this into the Small Image URL field
To locate the URL, go to:
o
o
o
o
o
o
o

Admin >
Content >
Documents and Media,
then locate and click on the image you want to use,
select Get URL from the Image window on the right,
Copy the URL from the URL field and close the image window.
Paste the URL into the Small Image URL field in the blog edit screen, deleting
all text before: /documents as this isnt needed.
o Publish to save and view your changes.
Note: make sure the Use Small Image tick box is checked, as normal.

59

Appendix 4: Setting up the Asset Publisher portlet to

display a News list Advanced Users only
This section is for Liferay Editors who wish to create a news list from scratch. Contact
the Digital Marketing Team: digitalmarketing@uea.ac.uk for advice.
The Asset Publisher option is used for creating independent content which displays on
a page through using or adding tags to content. The tags are labels used to describe
the content (PHI news, for example, for Philosophy News items) and Liferay then uses
this data to feed the information through onto a suitable page of your choosing.
The most common usage of the Asset Publisher is to create a list of News items.
These are generated through applying the Blogs Entry option during set up. The Asset
Publisher will then be set up to enable users to create blog (news) entries for a chosen
page.

Configuring your Asset Publisher content

Please note: In most cases, the Asset Publisher on your News page will be configured
for you by the Digital Marketing Team. This guidance is for editors starting News pages
from fresh. For advice, please contact the Digital Marketing Team:
digitalmarketing@uea.ac.uk.
Step 1: On your page, select Add from the left hand menu, then choose Asset
Publisher from the Applications menu. Drag the portlet onto position on your page and
drop it into place when you see the blue line appear.

60

Fig 23.1 Page showing Asset Publisher option in Add window

Youll see the Add new button on your page, with a floating banner Asset Publisher
appearing on the right.
Appearing on screen will be a variety of content created previously within your site. This
will disappear when youve set the configuration for your asset publisher.

61

Fig 23.2 Page showing Add new button and Asset Publisher floating banner

Step 2: Select the Settings spanner icon on the Asset publisher floating banner,
followed by Configuration. This will launch the Asset Publisher Configuration
window. Here, you can configure settings for your list.
Step 3: In the Asset publisher window, with SetUp, youll need to select the following
fields:
Asset Type: select Blogs Entry or Web Content Article (web content allows you
to schedule and expire content)
Step 4: Under Displayed assets must display these rules, add your tags.
Note: Tags act as a virtual hook which pulls your content onto the page. The tag on a
schools News page is usually the abbreviated three letter school name, but you can add
additional tags to suit your content.
Step 5: Under Order by select Published Date and Descending from the Order by drop
down list, then select Title and Ascending

62

Fig 23.3 Asset Publisher configuration window and Asset selection options

Step 6: Choose the Display Settings (fig 22.4) tab at the top of the screen, select
Regular from the Pagination Type dropdown. Here, you can also select the number of
items you want to display per page.

63

Fig 23.4 Asset Publisher configuration window with Display Settings tab selected

Untick Enable Social Bookmarks.

Step 7: Under Show Metadata, select Publish date from the Available box and click the
left arrow to move this to the Publish Date box. This enables the article publish date to
display on your page.
Step 8: Click Save to save your changes and close to return to the page.
Your Asset Publisher list will now be configured, so that each time you add a new blog
entry on that page, the tag will be inserted automatically and the Publish Date will show
within the article abstract and in the article itself.

64

Appendix 5: Adding Banner settings

Initially, when a site is created a banner image will be added as part of the set up. If
you want to change a banner image for a particular section, you can do this through the
Admin > Pages option, by adding the image URL.
Obtaining your image URL:
Firstly, you need to ensure the image you want to use is uploaded beforehand (Section
8: Adding images on page 11 of this guide provides advice on how to upload images).
Note: Banner images need to be cropped prior to uploading to 940 pixels width by
250 pixels height.
To locate your image URL:
Step 1: Select Admin from the left hand menu
Step 2: Select Content from the dropdown list
Step 3: Select Documents and Media from the menu
Step 4: Locate and click on the image you want to use,
Step 5: Select Get URL from the Image window
Step 6: Copy the URL from the URL field and close the image window
To add an image to your page using the Edit option:
Step 1: Navigate to the page that you want to edit.
Step 2: Select the Edit icon (pen and paper blue square) on the left hand side of the
screen,
Step 3: Select the UEA Banner Settings tab further down the Edit window.
Step 4: Paste the URL into the Banner Image field, deleting all text before:
/documents as this isnt needed.
Step 5: Add any alternative text or Image credit details (photographer name, image
URL), if using non-UEA approved images (there is guidance on this on the next page).
Step 6: Select Save to save your changes and publish your image

65

Fig 24.1 Image showing UEA Banner Settings section in the Edit window

Banner image guidance

When choosing imagery, you need to be aware of the following:
Imagery can be sourced from Flickr, Creative Commons or the internal UEA
stock library
If using imagery from Creative Commons or Flickr, images need to be
copyright free, and you should include the URL to the appropriate Creative
Commons licence, along with the name of the photographer and
photographers account, if supplied, in any attribution.
If using non-UEA owned imagery that doesnt have a Creative Commons
licence, but the photographer has given permission to use, please provide
the photographers name and image source / URL.
When choosing imagery please bear in mind the size of the shot. Banner
image dimensions are 940 pixels wide by 250 pixels high. Image
resolution needs to be 72 dpi, the standard size for the web, and no larger
than 75kb.
For general guidelines on image house style and composition, please refer to UEAs
Photography Guide

66

Appendix 6: Amending a School Homepage banner

Firstly, crop / resize your banner to 940x250 pixels (approved images are available via:
http://imagearchive.uea.ac.uk/browse.asp), then upload into Liferay.
To edit the banner on the school homepage:

Go to the page you want to edit

Select the Edit option underneath the banner on the school homepage
Locate the segment with the latest news / seminar info in
To change the image to a newer image, within that particular segment:
o Locate the IMAGE field,
o Click Select and browse to your newly uploaded image.
o Select Choose next to your banner image to insert

Linking to your content:

If the page youll be linking to is part of an asset publisher list, youll need to add
the field as an external URL under the EXTERNAL_LINK field: e.g:
https://www.uea.ac.uk/psychology/news//asset_publisher/liaq4tI0qIBX/blog/school-of-psychology-hosts-successfuldoctoral-training-eve-1/10165
If you want to link to an actual page within your site, use the INTERNAL_LINK
drop down to select your page

Adding a quote:
You can add a quote and credit within the QUOTE_BODY and QUOTE_CREDIT fields.
Selecting a page from the QUOTE_LINK_INTERNAL will add a Read More button
linking to your chosen page make sure you tick the Use Internal Link tick box
underneath this option if using.
Once changes have been made, you can then Publish.

67

Appendix 7: Adding an Image Link / Visual Menu

Image links can be used either to create a visual menu:

Image Link Guidance

Image links used as a visual
menu on a parent page should
take visitors through to child
pages for that particular
section, or through to related
pages or sites.

Fig 25.1 Page detail with image links used as a visual menu

Or as a right hand call to action:

Right hand call to action

guidance
Right hand call to action links
should either take users
through to a call to action (e.g.
a form, event booking or PDF
document or flyer), or to an
external site related to your
page, where appropriate, and
not be used to replicate the left
hand navigation.

Fig 25.2 Page detail with image link used as a right hand call to action

68

Image link layout types

In the UEA Blue theme, image links can be used with the following layouts:

4 Columns used when you want to add in a visual menu with 4 columns
width. See www.uea.ac.uk/study or example below:

Fig 25.3: Page with 4 column layout

69

3 columns (25/50/25) layout which makes use of the right hand column
(see https://www.uea.ac.uk/study/undergraduate/student-life/living-innorwich or example below (fig 24.4):

Fig 25.4: Page with 3 columns (25/50/25) layout

70

1-4-3 columns layout used primarily for landing pages which include text
(either covering the page or positioned to the side) a visual menu of either 4 or
3 columns width and use a static banner: - fig. 24.5 below.

2-4 Columns can be used for landing pages with a visual menu and static
banner (see example below):

Fig 25.6 Page with 2-4 columns layout

71

Banner 2-4 column layout used for School

homepages displaying a rotating banner and visual menu:

Fig 25.7 Page with 2-4 columns layout

How they appear in Liferay via the Admin > Page > Details section:
Fig 25.8 Page layout types and icons

72

Positioning portlets within your chosen layout

Each portlet can be dragged and dropped into the required position on the page.

Adding an image link to your page

To add an image link to your page:
Step 1: On your chosen page, select the Add (plus) icon on the left hand side
Step 2: With the Applications tab highlighted, click and drag the Web Content
Display portlet to add the portlet on to your page.
Step 3: When you have located your portlet into position, select the Add Web Content
icon underneath at the bottom of the newly added portlet (paper with green plus icon)
to launch the editor
Step 4: Once in edit mode, select the magnifying glass Select option next to the
Structure prompt at the top left of the editor.
Step 5: In the Structures window, search for Image link to bring up the Image Link
template, then select Image link

Section 26.3 Detail shows Change Structure window, with Image Link typed in Search field

Step 6: Selecting the template will bring up the prompt Selecting a template will
change the structure [...] Do you want to proceed? Click OK.

73

Step 7: Once youve changed the template, youll then need to

complete the required fields.
Title: Provide a title for your link. This will show on the live site, so needs to be
subject related.
Colour: Select a colour for your link header. Colours are added automatically
when you select a particular option. Colours correspond to their school or
department as follows:
o
o
o
o
o
o
o
o
o

Arts and Humanities

Medicine and Health
Science
Social Science
Research
Business
Internal intranets
External departments and services
News and Events

Image: Selects chosen image. You need to upload your image prior to
selecting, which should be sized to 225 pixels wide by 150 pixels high
Internal Link: The dropdown list allows you to select and link to pages within
your site.
External Link: Here, you can add a link to an external site make sure you
add http:// or https:// before your link if using for example:
http://www.uea.ac.uk.
Searchable tick box: make sure this is unticked otherwise search engines
will count your image link along with any text content you have on the page,
which will dilute your search engine optimisation results.

Step 8: Once youve added the required fields, select Publish to save changes and
save to the live site.

74

Section 26.4: Image Link edit window, showing completed fields

75

Appendix 8: Changing content on People Pages

The below bulleted Free Text Fields were copied across from Polopoly to Pure for Go
Live of People Page Release 1 on 10 Dec 2013. These fields can now be edited and
amended within in an individuals (excluding Research Students) Pure profile.

People Page Content tabs

TAB 1: Overview (Example Page 3)
This includes:
Biography
Career History)
Academic Background
TAB 2: Publications (Example Page 4)
This includes:
FED DIRECTLY FROM PURE
TAB 3: Research (Example Pages 4 & 5)
This includes:
Key Research Interests
Research Group Membership
TAB 4: Teaching (Example Page 5)
This includes:
Teaching Interests
TAB 5: Activities (Example Page 6)
This includes:
External Activities and Indicators of Esteem
Professional Activities
TAB 6: Admin (Example Page 7)
This includes:
Key Responsibilities
Administrative Posts

76

Fig 27.1 People page profile showing overview tab

Free Text Fields

All the fields are optional; If you do not complete one of the below fields, it won't
show on your people page.
If no fields for a tab are completed, the tab will not show.
Don't manually list out publications: these now feed automatically to the
Publications tab. (For schools that previously did not automatically list out
publications using EPrints, it will be necessary to delete the manual lists of
publications that are currently in the biography, key research interests or other
fields.)
Try to keep each field to a maximum of 500 words. You can include images in a
profile field, but if you need more than a few images, or more than 500 words,
consider if this content should be on the school research pages instead.

Help Pages
People Pages
People Pages FAQs
Changing Content (Direct link to changing content specifics)
Useful Contacts (Banner Headers)
Name, Job Title Contact HR hr@uea.ac.uk
Telephone, Location Contact Telephony telephony@uea.ac.uk
Email Contact IT Helpdesk It.Helpdesk@uea.ac.uk
Organisation, School Contact DMT peoplepages@uea.ac.uk
Profile Information
The following are links to further information.
Publications Contact REN pure@uea.ac.uk How To Guide
Publications Highlighting Key Publications
Embedding YouTube Videos

Photos
Photos have been imported from the old people pages.

77

The ability to change your photo will be added to Pure in the

new year - you will need your web administrator to upload the image to your school site
in Liferay (To a folder called People Pages, re-naming the photo as the name of the
person), then you will be able to set the URL of that new photo in Pure.
In the interim period, please upload the image to Liferay as normal, then email the URL
along with the name and school of the individuals photo to peoplepages@uea.ac.uk
Images should be 130px wide and 195px high and in .jpg format.

Tab 1: Overview

Biography
Career History

Fig 27.2 People page profile showing Biography and Career History detail

78

Academic Background

Fig 27.3 People page profile showing Academic Background detail

Tab 2: Publications

Fig 27.4 People page profile showing Publications detail

79

Tab 3: Research

Key Research Interests

Fig 27.5 People page profile showing Publications detail

Research Group Membership

This was removed as a separate field during migration as advised by the Working
Group due to inconsistency and relevance of data across faculties. Where content was
embedded within research text (especially applicable in Chemistry) as requested the
text was manually copied and pasted.
Example: Manfred Bochmann

Fig 27.6 People page profile showing Research Group Membership detail

80

Tab 4: Teaching

Teaching Interests

Fig 27.7 People page profile showing Teaching Interests

Tab 5: Activities

External Activities and Indicators of Esteem

Fig 27.8 People page profile showing External Activities and Indicators of Esteem

81

Professional Activities

Fig 27.9 People page profile showing Professional Activities

Tab 6: Admin

Key Responsibilities

Fig 27.10 People page profile showing Key responsibilities

82

Administrative Posts/Responsibilities

Fig 27.11 People page profile showing Administrative Posts/Responsibilities

83

Appendix 9: Video - planning, approval and publishing

Planning your video
A good video - even a short one - takes time to. It requires planning, story boarding,
filming, editing and re-editing. The optimum length for a video online is two to three
minutes max.

Approved videographers
Wherever possible, use a professional. We manage a roster of approved
videographers and we can help you to plan your project.

UEA Branding and logos

Videos need to be properly branded: only approved logos, titles, and intro-outro files
should be used, but don't worry as we can provide these for you.

Video format
Please make sure you shoot in widescreen 16:9 ratio: this is the standard professional
format. Please do not shoot in traditional 4:3 format, as this does not transfer well to
various web platforms or devices, such as YouTube or mobile phones.

Copyright permissions
If you're using music or stills, please make sure you have the relevant copyright
permissions.

Balance quality with bandwidth capability

Remember that video produced for the web does not need to be TV quality. Bandwidth
restrictions often require a trade-off between filesize, image quality, frame rate and
audio quality.

File size, resolution and type

Your video file should not exceed two hundred megabytes, but it should be at least 640
by 360 resolution. Preferred file types for YouTube are quicktime (.mov) and MPEG
(.mp4). We can help advise on setting up YouTube channels and live streaming.

Ensuring audio quality

Audio is just as, if not more, important than video: use an external microphone and not
the microphone on the camera. Be aware of background noise too.

Get written consent

84

You will need to get written consent from anyone appearing in

the video; we can provide the relevant forms. If your video includes children, it is
essential you request their parents' permission.

Prior to publishing
Any video that is to be published on the UEA website needs to be checked
by Marketing prior to publishing, to ensure the video meets the desired branding and
quality requirements for the web.

Getting videos published

Once approved, videos can then be published on YouTube or Helix (UEA's audio and
video repository). The URL code will then need embedding into the required page on
the website. Digital Marketing can do this for you. You will be sent a URL so you can
view the video once published.

UEA approved videographers

Colleagues are urged to use these videographers to ensure consistency in the quality
and production of videos at the University.
We are happy to recommend a videographer appropriate to your needs.
New videographers who wish to join the roster are given the opportunity to pitch for
specified jobs and are added to the roster on the recommendation of the Digital
Marketing Team.
Videographers who do not comply with our corporate identity guidelines, who do not
deliver on time, who overcharge or whose work is deemed by the Digital Marketing
Team to be substandard will be removed from the roster.
Lambda Films Ltd
Henderson Business Centre
51 Ivy Road
Norwich
NR5 8BF
http://www.lambdafilms.co.uk
Tel: 01603 251737
Spindle Productions Ltd
28 Edinburgh Road
Norwich
NR2 3RJ

85

http://www.spindleproductions.co.uk/
Tel: 07837 971 594
Videotrader Ltd
2A Norwich St
Fakenham
Norfolk
NR21 9AE
http://www.videotrader.co.uk
Tel: 07968 627 184

86

Appendix 10: Typical navigation structure in Liferay

An example of a typical school navigation layout is below:
- Home
- UG Degrees
- PGT Degrees
- PG Research Degrees
- Research
- People
- Careers and Employability
- Engagement
- News and Events
- Working with Business
- Contact Us
The navigation structure has been designed to display topics that users find most
relevant to their search.
Note: Before making changes to the structure, please contact the Digital Marketing
Team (digitalmarketing@uea.ac.uk), to discuss your requirements.

Fig 28.1 Shows navigation structure in Liferay

87

Appendix 11: Available Page Layouts in Liferay

Fig 29.1: Detail shows layouts available in Liferay and themes they are suited to .

1 column used within UEA

Blue theme and UEA 2011 as
a one off style, normally for
campaign style landing pages
(contact DMT for advice on
this)

2-4 columns used within UEA

Blue theme for landing pages
with visual menus and left hand
navigation
2 columns 25/75 used within
UEA Blue theme for child
pages

Banner 2-4 column layout

used within school home pages
and landing pages that make
use of a rotating banner

4 columns used within UEA

Blue theme typically for top
level pages that display a
banner image and image links
these pages are there to
drive users to child pages
within top level sections

1-4-3 columns used for the

main home page layout

3 columns 25/50/25 used

within UEA Blue theme for
three column pages that use
left hand navigation, main text
and right hand image links or
text

88