11 Adding Content
11.4 General Content and Images
Images should not be added to General Content content types as it breaks the responsive nature of the site. Banner Images should be used instead. The banner image content type takes files from the media library. See page 34.
Figure 33: Insert Media Icon
Figure 34: Selecting a Document from the Media Library
28
11.5 Inserting links in to text
There are two types of links that can be added to text – internal section links or external web links. These links offer a website user an alternative route to a specific location.
11.5.1 Inserting a Web link
Create a new piece of content or modify an existing piece of General Content
Highlight the word to be used as a link
Click on the Web Link button
The Insert/Edit link window opens
Type in the desired URL – http://www.google.ie for example – if you do not include the http:// the system will prompt you to do so.
Click on the arrow opposite Target
o As this is an external web link, we need to have a new window/tab open to display the new page
o Select Open in a new window (_blank)
Title - filling something in for title will display a tool tip when a user hovers their mouse over the link
Click Insert
Update or add the piece of content as normal
Figure 35: Adding a web link
29 11.5.2 Insert Section Link
A section link is a link that directs a user to another part of the website they are currently browsing.
Create a new piece of content or modify an existing piece of content
Highlight the word to be used as a link
Click on the Insert Section Link button
The site Hierarchy displays
Click on the section to which you wish to link
Update or add the piece of content as usual
11.6 Creating Anchors in Long Text e.g. FAQ – Old Style Sites
Anchors are links that exist within the one webpage. They are useful in long text filled pages to enable users to quickly get the portion of text that is relevant to them. Anchors are often seen in FAQ pages. Each question would appear as a link on the top of the page, clicking the link brings the user to the exact position on the page that the answer can be found at. Type all the required text
Anchors need to be marked before they can be linked to
Highlight a word that is to act as the anchor
Click on the Anchor Icon in the middle tool bar
Type in a name for the Anchor
Continue down the page and mark any other Anchor in this way.
Figure 36: Adding a Section Link
30
Use the Link Icon described in section 11.5 to connect or link to the anchors
In the FAQ example you would highlight the first question click the link icon and instead of specifying a URL you will select an Anchor from the drop down list see Figure 35 on page 28
A “Back to Top” is often used in long pages as well. In this instance the Anchor is created at the top on the text and throughout the long text the words “Back to Top” are linked to this anchor often named “top”.
11.7 Additional Content Options
When content is being added or modified there are a number of tabs visible toward the top of the screen. One of these tabs is called Options. In the Options tab you can set an expiry date or a publish date for a piece of content.
When adding or modifying content click on the “Options” tab
To set an expiry date click in to the text field Expiry Date
From the calendar and time selector pick a date and time for the piece of content to expire
By setting this the system will automatically expire the piece of content once the selected date or time passes, after which this content will no longer be published
Update or add the piece of content as before
11.8 Other Content Options
The content screen contains a number of elements that it is important to be aware of:
1. Automatic Ordering:
this allows you to order the content
alphabetically or
Figure 37: Content Options Tab
31
according to when it is added. This order is the order in which the content will appear on your actual webpage
2. Existing Content (if you hover your mouse over existing content a tool tip will inform you of the content type that is used for that content):
a. Name: this is the name of the piece of content that you have just added
b. Version: this is the version number of the piece of content – the more changes you make to the piece of content, the higher the version number. When the content is approved it becomes version 1.0. Subsequent changes to the content will become version 1.1, 1.2 and so on until it is approved yet again to become version 2.0
c. Content Drop-Down Menu: (Figure 22) this drop-down menu allows you to:
i. Modify the piece of content in question
ii. Mirror the piece of content (i.e. make an exact duplicate of the content elsewhere in the site that will be updated any time the original is updated)
iii. Duplicate the piece of content (i.e. make an exact duplicate of the content elsewhere in the site that is independent of the original piece of content)
iv. Move the content elsewhere in the site v. Delete the piece of content
vi. History of the piece of content (this option allows you to set a previous version of the content as the current version. This is very helpful if you have made a mistake during the updating of the content. When you click on History for a piece of content, you will see a list of previous versions. Click the Set Active button for the version you want as the current version then scroll to the bottom of the page and click Update.
d. Status: this tells you whether the content is inactive, pending, approved or expired
e. Last Modified: this tells you when the piece of content was last modified
f. Move: this is to do with the order in which the content appears on the website. Even if automatic ordering is disabled you can still use
32
this move column to re-order your content (provided you have more than one piece in the section) If you reorder content you must click Save Changes for the change to be made permanent
g. Lock: again, this is to do with reordering the content in the section.
This allows you to lock content into a particular order.
12 Modifying Content
In the Site Structure view of the site – Click on the yellow arrow of the section containing the content to be modified
From the menu select Modify Content
In the Modify Content screen, click on the section drop down menu (yellow arrow) of the section on which the content to be modified is located
Select Modify Content
From the screen that displays click on the content drop down menu (yellow arrow opposite the piece of content to be modified)
Choose modify from the menu that appears
Make the required changes and click Update
Figure 38: Content Menu
33
You will then be returned to the content screen
Select Site Structure from the Main Content menu to return to the Site Structure of the site.
13 Previewing Content
To preview the content added to study alchemy do the following:
1. From the Site Structure View (main content menu – Site Structure) 2. Click on the section
drop down menu for Study Alchemy (yellow arrow to the right) 3. From the menu that displays click – Preview Section
Figure 40: Previewing Site Figure 39: Updating Content
34
4. Your site should preview in a new tab or window. If you are using Chrome a popup blocker might prevent the preview displaying. Allow popups and preview again.
14 Approving Content
Once a piece of content has been added it needs to be approved before it will be live on the site.
Approved content will be published once every hour.
To Approve Content
Click on the Content menu
Select Approve Content
The Approve Content Screen will appear
Check the box under the heading Approve for all pieces of content that are ready to be published
If all are ready use the Select all option
Click Approve
Figure 43: Approve Content Screen
Figure 42: Approve Content Figure 41: Preview of General Content - Open Slide
35
15 Banner Images with Title
Table 3: Banner Image Size
The Banner Images with Title content can be used on inner pages. They can be used at the top of a page or on long pages to break up text and add interest.
Before you can add a Banner Image with Title to a page, the image to be used must first be added to the Media Library (see 10.1 page 18). Assuming the required image is in the Media Library, follow the steps below to add a Banner Image with Title:
Browse the Site Structure – expand the sections using the + sign until you can see the section that is to have the Banner Image with Title added
Click on the section name
Once the section pane opens, click the Content tab (see page Error!
Bookmark not defined. Error! Reference source not found.) and click the add content button
From the list of content types that displays click Banner Image with
Title
Three fields are all that need to be filled in (see Figure 45: Banner Image with Title )
o Name – name the image so that you know which piece of content this is
o Title – optional field – this will display overlaid on the top of the image as a banner.
o Main Image – This needs to be selected from the media library.
Content Type Name Image Dimensions Ratio Banner Image with
Title
725 pixels wide x 254 pixels high
2.85:1
Figure 44: Content Type Selection
36
Click Select – The Media Library opens – Browse or search until you find the required image
Select the image
Once the location of the image is named in the Main Image field Add and Approve the piece of content.
Figure 45: Banner Image with Title Content Type
37
16 Updating the Homepage
The page layout of your new homepage is known as a Functional Homepage.
Below are the instructions on how to populate it.
16.1 What is a Functional Homepage?
In the Content Management System each page in a website is known as a section. The front page of a website can be a Functional home page - subsections of a Functional Homepage are called Inner Page.
16.2 Functional Home Page Content Type Options
Functional Homages can use one or more of any of the following content types
Functional Homepage Boxes see Figure 46
General content Figure 46
Banner Image with Title Figure 45
Right Hand Side Callout Box Image Figure 46
Right Hand Side Callout Box Video Figure 46
Figure 46: Functional Homepage Example
Right hand
side callout
boxes
Functional Homepage Boxes
General Content
38
16.3 Functional Homepage Boxes
Note: This content type should generally only be used on the Functional Homepage of your website.
Browse the Site Structure – expand the sections using the + sign until you can see the section that is to have the Banner Image with Title added
Click on the section name
Once the section pane opens click of the Content tab and click the add content button
From the list of Content Types that displays, click Functional Homepage Boxes.
This content type creates three image boxes, which can link internally to other sections of your website or externally to other websites. The three boxes will be arranged horizontally side by side on the Functional Homepage, as shown in Figure 49: Functional Homepage Boxes
The same set of fields is listed for each of the three boxes, referred to as ‘Box 1’
Box 2’ and ‘Box 3’.
Fill in the content type details Figure 50: Functional Homepage Type
The name of the piece of content is similar to a file name. Its purpose is to enable you, the user, to identify the piece of content.
Box 1 Title – The heading of the piece of content – this will be formatted distinctly in the header of the leftmost box on the published webpage.
Box 1 colorlist – Choose from Blue, Yellow, or Red
Box 1 Drop Down List – Optional Extra – If you would like a drop down menu to appear when a user hovers their mouse over the Box Title, insert a bulleted list here. The list items need to link to parts of your site using section links see Insert Section Link on page 29.
Box 1 Image – This is the image which will appear in Box 1.
Recommended image dimensions are 210 wide x 197 high pixels (or a ratio of 1.065:1)
o Click “Select” to open the Media Library. Navigate to the desired image and click “select” to insert the image.
39
Box 1 Brief – short explanatory text. This text will display when the web page loads. See Figure 47.
Box 1 More – copy the “brief” text and add additional information. This additional
information will be visible when a user rests their mouse of the image. See Figure 48.
Box Internal Link 1 – Used for linking Box 1 internally to a section within your website.
o Click “Select”. The website hierarchy will appear.
o Navigate to the section you wish to link to. Click it and press okay.
o The “Select” button will be replaced with the navigation path showing the link destination.
Use Default Link Text – Ticking this box will use the default text for the section or piece of content you are linking to. The default text is the name of the section of piece of content.
Box External Link 1 – used for linking Box 1 to an external website.
Select and copy the URL of the destination website from the browser bar.
Paste the full URL, including the http part. E.g. http://www.ucc.ie/en
Downloadable Document – This can be used to link the box to a document in the media library.
These fields repeat again for each of Box 2 and Box 3, as seen in Figure 50 and should be filled out in the same way.
When you have filled out the details for all three boxes, click ‘add and approve’.
Figure 47: Box 1 Brief
Figure 48: Box 1 More
Note: Each of the 3 boxes can only have ONE function:
Internal Link OR External Link OR Downloadable Document But each can have a different function
40
Figure 50: Functional Homepage Content Type
Figure 49: Functional Homepage Boxes
41
17 Other Content Types
Two new content types are Right Hand Side Call Out Box Image and Right Hand Side Call Out Box Video. These content types can be used to display links to additional content. They appear on the right hand side of a web page as shown in Figure 46. Any departmental video, for example, could be highlighted.
17.1 Right Hand Side Call Out Box Image
This content type creates a box on the right hand side of your Inner Page, which contains an image. Clicking on the box will take you to a designated link or document.
Browse the Site Structure – expand the sections using the + sign until you can see the section that is to have the Right Hand Side Callout Box Image
Click on the section name
Once the section pane opens click of the Content tab and click the ‘add content’ button
Select the Right Hand Side Callout Box Image content type
Name: This is the name of the piece of content – similar to a file name and used for enabling you, the user, to identify it.
Figure 51: Right Hand Side Call Out Box Image
42
Title: This is the content title, which will appear at the top of the image on the published web page.
o You can choose to leave this field blank, if you wish to have no text with your image.
Image – This is the main image. Use the “Select”
link to navigate to the correct location in the Media Library and insert it. Once inserted, the location path of the file in the Media Library will be
displayed, and the options to remove or change the image will appear.
The image will be used as a link in one of the following ways:
o Option One - Inserting an Internal Link
Click “Select”. The website hierarchy will appear. Navigate to the section you wish to link to. Click it and press okay.
The “Select” button will be replaced with the navigation path showing the link destination.
You could use a right hand side call out box image to link to a News section for example
o Option Two - Inserting an External Link:
Select and copy the URL of the destination website from the browser bar. Paste the full URL, including the Error!
Hyperlink reference not valid.
o Option Three – Link to a Downloadable Document
Click “Select”. Choose a document from the Media Library to link to.
Click ‘add and approve’.
17.1.1 Sticky Right hand side call out boxes
Right hand side call out boxes used on the home page can be set up in a way that will cause them to appear on the right hand side of ALL sections.
Create a section named callouts
Make it a hidden section – deselect the show in navigation tick box. See page 7
Add or move the Right hand side call out boxes to the new hidden section.
Image Title
Figure 52: Call Out Box Image
43
17.2 Right Hand Side Callout Box Video
Similar to the Right Hand Side Callout Box Image, this content type creates a box which displays on the right hand side of your Inner Page and contains an image. Clicking the image launches the video.
17.2.1 Video Source:
The videos that are used in the call out boxes come from YouTube video links
Try the UCC YouTube Channel – Search UCC Ireland to find relevant content.
o Having found the required video – click share o The necessary link will appear below the video
o Copy this link
Figure 53: Required Video Link
44 17.2.2 Image Source
The image needs to reflect the content of the video, a thumbnail like those you see on YouTube needs to be created.
17.2.3 Adding the Callout Box Video
Browse the Site Structure – expand the
sections using the + sign until you can see the section that is to have the Right Hand Side Callout Box Video
Click on the section name
Once the section pane opens click of the Content tab and click the add content button
Select the Right Hand Side Callout Box Video content type
Fill in the content type details
o Name: This is the name of the piece of content – similar to a file name and used for enabling you, the user, to identify it.
o Title: This is the content title, which will appear at the top of the image on the published web page.
You can choose to leave this field blank, if you wish to have no text with your image.
o Video: Paste the link to the YouTube video you want here. Select and copy the full URL (including the http://) from your browser,
o Video: Paste the link to the YouTube video you want here. Select and copy the full URL (including the http://) from your browser,