Working With Links

Links

Links are what connects the web to pretty much everything. A link is simply a connection a user clicks to access another webpage, a file of some sort, or an email.

Links can lead to:

  1. Internal pages within the SMU website. These are called "Section Links" and "Content Links" in T4.
  2. External websites outside of the SMU site. These are called "External Sites".  
  3. A different location on the same web page (Anchor Link, Jump Link, or Jump Page),
  4. Linking to a file of some sort (.doc, .pdf, .xlsx etc.)
  5. To an email address
  6. In T4 specifically, a link can lead to a different "section", or even to a specific "instance of a content type" on a page.

Creating and Adding Links

There are two ways to access link controls in T4.

1) Through the "Link" Button:

TinyMCE Link Icon

The link button can be found in the icons bar of TinyMCE (below image). From this area you can create section, content, external, email and anchor links. 

2) By accessing the "Insert -> Insert Link" menu at the top of the TinyMCE screen. 

T4 Making Links

 

1 a) Create a T4 Section Link

A Section link is a special link within the T4 system. It is a link that leads to another page on a a site created in T4. The beauty of using a section link in the T4 system is that if the page the link is pointing to is changed or moved, the link does not break as it would in a traditional web page. Instead the link is updated by the T4 system automatically and keeps working. 

While editing content, highlight the text you wish to use as the link (as in above image), and click on the "Link" icon button. You will see four options for creating your link: Insert section link; Insert content link; Insert/edit external link; and Insert anchor. Select the Insert section link.

Think of a Section as a Page on the web site. With this option, you are linking to a page within the SMU web site. You will be presented with a Site Structure-style window (below). Navigate to the page to which you wish to link and select it to complete the link:

Section Link T4

 

1 b)Create a T4 Content Link

With this option you are linking to specific piece, or instance, of a content type located on a page. The link will take the user directly to a specified piece of information. For example, if your link is concerning the sixth Question and Answer on an FAQ (Frequently Asked Questions) page, if the FAQ is set up properly and each question and answer is its own piece of content, the link will take the user directly to that content by first loading the page and then scrolling to the anchor at Question 6. When selecting this option, you will first see a Select section window as above, and once you select a section, you will see a list of content items on that page (shown below). In this example, I have selected Person 5 within our site, and I have selected the Training Session 2. A blue check box appears beside the content name. Select the Insert content link at the bottom of the box and the link will be created:

T4 Content Link

 

2)Create or edit an External Link

This option allows you to create a link to a website outside of the SMU site. In the example used below, we want to create a link to the Bob Boucher Annual Golf Tournament.

  • URL - The web address for the link.
  • Text to display - What the link will say on the web site.
  • Title  - An optional field that you can use in the case that further explanation of the link is required. You probably won’t use this.  Anything entered here will “pop up” in a dialog window when the user mouses over the link.
  • Target - Allows you to set whether the link opens in the same window (None), replacing the SMU page, or opens in a New window.

T4 External Link

 

3) Create An Anchor Link

An anchor is an invisible target to which you can connect a link. For example a “Back to top” link, or a link from the top of a page for a list of questions in an FAQ to the answer further down the page. You need to place an anchor at one location on the page, with a link leading to that anchor point at a different location on the same page. This page uses several anchor links (or sometimes referred to as jump links, or jump pages). The links at the top of this page lead to anchor points further down the page. 

In order to create an anchor, place your cursor in the page where you want the anchor to be, and select Insert Anchor from the Link drop-down menu. You will only be asked for the Name of the link. It is best to keep these short and do not use spaces. Once the anchor is created you will see a tiny anchor icon in the anchor location. 

T4 Anchor Link

Once that Anchor is created you can then make the connection to that anchor point in the same way you would create an external link. 

Select the Link icon and choose the "insert/edit external link" option. Because there are now anchor points on the page a new option will be presented in the pop-up window. This option is "Anchors". When you select this option it will show you a drop down list of all the anchor points on the page. Select the one you would like your link to point to and you new anchor link will be completed. 

T4 Anchor Links 2

 

4) Create a link to a file of some sort (.doc, .docx, .xlsx, .pdf)

When you want to create a link to a file the first step is to add that file to the "Media Library".

Once the first step has been completed you can then create the link of the required file. Place your cursor in the location on the page where you want the link to the file to appear. Then select the "Media Library" icon, shown below. 

TinyMCE Media Icon

When you click on this icon the Media Library directory will  show on the screen, shown in the below image.

 

Media Library Directory 

You will be able to browse through the file structure to the folder you placed your file. Once you select the file the link will be added to the site. 

NOTE: The text that is automatically used to create the link on the page will be what was filled into the "Name" field when the file was added to the media library.  

If you wish to change this text to something different simply place your cursor inside the link anywhere and double click with the mouse to pull up a "Set Media Attributes" box, shown below.

Set Media Attributes  

Type the text you wish to use as the link and select "Ok". The new text will now take the place of what was there originally. 

 

5) Create an Email Link

To create an email link you can use a few different processes. If you type the email address directly into TinyMCE in many cases it will automatically insert the link code for you. This works if the email address itself makes up the text. If the email address is to be added to a persons name or to a title then you can also add a link manually.

To add an email address to someone's name or title highlight the text that will make up the link and select "insert/edit external link" from the Link button. In the URL field type "mailto:" followed by the persons email address. It will look like this: mailto:someones.email@smu.ca. This will create the email link on the selected text. 

 

 Next Lesson - Working with Tables »

Contact us

External Affairs Web Team