A general introduction to building links in the UBCMS.
Adding Links in UBCMS Pages
Links can be added to your UBCMS pages using the settings within
many UBCMS components, including text components, Titles, Photos,
Buttons, Calls to Action, and lists.
Some of these components have a specific 'Link to' field for the
URL, while text components (Body Text, Caption, Intro Text) rely on
in-text 'Hyperlinks' set using the Rich
Links to files that are in the Digital Asset manager should only
be added using the File Download Component.
DAM assets should ONLY be linked from a File Download
The 'Link to' setting in a Photo component.
'Hyperlink' setting in a Body Text component.
Linking to the Top of the Page
On pages that are long or provide very detailed content (such as
FAQs), it may prove useful to provide an easy way for your readers
to quickly navigate back to the top of the page.
Link to #skip-to-content
Anywhere you can add a link, such as in text, a Call to Action
component, Title, etc., if you type in "#skip-to-content" for the
link, it will scroll back to the top of the center column.
Example of 'back to top' link set in a Call to Action component.
Example in Use
Click the 'Call to Action' link below—the browser will
shift to the top of the page. (This will not be as obvious as it
would on a long page.)
Linking to External Websites
For links to external websites (pages on other websites, even if
they are also within the UBCMS), always include the prefix (usually
http:// or https:// for secure pages).
Open in New Page Setting
Most 'link to' and hyperlink settings in UBCMS components have
an optional companion setting that requires the links to 'Open in
new window' (or tab) of the browser.
For external links, this setting is a best practice, so that
when a site visitor clicks a link to another website, your page
stays open in the browser so the visitor can always find it
Also, within the Author environment, some external links do not
open normally unless this setting is selected (or the author forces
the link to open by right-clicking or by depressing the Control or
Shift key while clicking the link). This confusing behavior is part
of the browser's normal security protections, which make it
difficult to open an insecure (http://) link from within a secure
(https://) site such as the Author environment.
The 'Open in new page' setting in a Photo component.
The 'Open in new page' setting in a Body Text component.
Linking to Other UBCMS Pages
For links to other UBCMS pags, use a relative URL, without the
http:// prefix. These URLs will normally begin
'/content/www/your-site/...' or '/content/your-school/...' for
decanal areas). We suggest you always use the magnifying glass
picker tool to ensure you choose the correct page and capture the
'Hyperlink' setting in the Rich Text Editor of a Body Text component, highlighting the magnifying glass picker tool.
Linking to Anchors Within UBCMS Pages and Components
It is possible to link to a specific section within a Web page,
using an 'anchor', basically a named target within a compnent on
that page. If you examine the URL, you will see it is immediately
followed by a hash plus a keyword; e.g.
'http://www.buffalo.edu/president.html#abcde' (where 'abcde'
is the anchor).
When a page is linked in this manner, the browser should
automatically load the page down to that section.
A number of UBCMS components can hold anchors. Titles can
be designated as anchors using the 'Id' field, while text
components (Body Text, Caption, Intro Text) use the 'Anchor' tool
in the Rich
Text Editor. Tabs and the Collapsible Content Container can
also hold anchors, and will then load with their content
'Id' setting in a Title component.
'Anchor' setting in a Body Text component.
Linking To a Collapsible Content Container
- To link to a Collapsible
Content Container, you must first set an ID in its properties,
which becomes an anchor. You can now build a direct link to that
container, as hashtag + the ID, and when the page loads, it will
display the container in its expanded mode.
For example, each of the following links will load the examples at
the top right of the page in expanded mode:
- reveal example 1
- reveal example 2
- reveal example 3
- To link to an expanded container ON THE SAME PAGE, just use #ID
as the relative URL in the link.
For example, this links to the second example, expanded:
- You can also link to an anchor INSIDE a collapsible container,
and the page will correspondingly load at that anchor, with the
This loads the first example expanded, at the location of the
subheading which is ID'd as 'sub-head.'
Linking To a Collapsible Grid Component
You can link directly to any of the slides in a Collapsible
Grid, so that the page loads with that slide's content
displayed. The slides are numbered, 1, 2, 3, etc. and these become
the anchors for your link. Add a hashtag (#) + the slide
number to the end of the URL.
For example, this would load the page with the third slide
revealed on this Demo Site page:
Linking To a Tabs Component
To link to a tab in a Tabs
component, click the tab in question and copy the URL that is
displayed in the browser location bar. The main tab always loads by
default, and shares the same URL as the actual page, but the other
tabs insert their name into the page name of the URL.
For example, the tabs of the example on the Tabs component
documentation page will display as follows:
- 'General Information' Tab
- 'Academics' Tab
- 'Financials' Tab
Please note, while this link will load the page with the
prefered tab content displayed, it will not load the page AT THE
SPOT WHERE THE TAB APPEARS. This is a Known
Issue that we are addressing.
Example of the error message for a broken link in a list.
The UBCMS provides some built-in link checking for automated
components (e.g. Lists) that have relative links to other UBCMS
pages, but not for external links, and does not do validation for
links for links in text components (Body Text, Caption, Title,
For Lists with broken UBCMS links, the UBCMS will flag a bad
internal UBCMS link with a red error message that only shows in
Author. This arning will not appear on your published page.
We strongly encourage you to be very careful when building out
your links, and when moving or deleteing page stoe nsure you do not
accidentally create broken links.
Link Report can also help you to manage your links in
general. This displays everything your UBCMS pages link to,
including other UBCMS pages, downloads, images, lists and external