Drupal User Guide

Drupal LogoWhat will I find in this guide?

This guide is designed as a reference for individuals responsible for managing content on a subsite from the UTM I&ITS' Drupal website offering.

What is Drupal?

Drupal is a free, open source, database-driven content management system (CMS). It is used by many websites around the world ranging from personal blogs to corporate, political, and government sites including whitehouse.gov and data.gov.uk (accurate as of June 2015).

The standard release of Drupal, known as Drupal core, contains basic features common to content management systems. These include user account registration and maintenance, menu management, page layout customization, and system administration. Drupal also allows for community-contributed add-ons, called modules, to extend or alter its functionality.

Drupal.org

Introduction & First Steps

What are the first things I should do as a new user?

Accomplishing tasks

Below you'll find a quick reference on how to accomplish the some of the most common tasks.

Terminology

This page covers terminology that will be used throughout this guide.


A hyperlink containing a full URL which includes everything needed to find a particular site. For example, http://www.utm.utoronto.ca/iits/documentation/drupal-user-guide/terminology is the absolute link to this page.
Block #
The boxes visible in the various regions of the site. Many blocks appear much as a "widget" would in other systems. Blocks are sorted by weight.
Content #
In Drupal, you create more than just web pages, you create content. You will see that it is possible to re-envision how to share your content with others by thinking beyond traditional static standalone webpages.
Content Type #
In Drupal, Content is classified into types. A Content Type defines various default settings for content of that type and what fields are associated with the respective content type. For example, a News content type will have a Date field and an Author field, whereas a Faculty/Staff Profile will have a Position/Title field and an Email field.
Node #
Each item of content is called a node. Each node has a unique ID number which is used to build the URL of your page. You may occasionally see URLs like http://www.utm.utoronto.ca/[SITENAME]/node/123. There are means in place to create friendlier URLs, which you will see as you continue with this guide.
Module #
Software that extends the capabilities of Drupal.
Region #
An area defined by the theme in which content is placed. For example: Main Content, Left Sidebar, Right Sidebar, Footer, Header, etc. Content is assigned to regions as blocks.
This is a link to a page that is relative to the root of your site or current location. For example, if you have a site that is http://www.utm.utoronto.ca/example/ and you have a page with the absolute URL of http://www.utm.utoronto.ca/example/path/to/my/page the relative path of the page is path/to/my/page.
Theme #
The theme is what defines the look and feel of your website. As part of the layout definition, the theme defines the regions that blocks can be placed.
Weight #
A numerical value assigned to each block, generally between -50 and 50. Blocks are sorted by this weight from lowest number to highest. If two items have the same weight they are sorted alphabetically by their title. It may help to think of this like bubbles. The 'lighter' the bubble (the closer to -50) the faster it rises to the top while heavier items (closer to 50) sink to the bottom.

View full glossary on Drupal.org

Logging In

To log into your site, use the URL provided to you by I&ITS when your account was created. In general the address follows the following pattern: 
https://[edit server]/[your site]/login

  • [edit server] is the edit server address of the form xxxx.utm.utoronto.ca
  • [your site] is replaced with your specific subsite (for example, this site would be iits)

Note: The edit server is only available while connected to UTORVPN or while on the UTM campus staff network.

Login is done via CAS using your UTORid credentials.

Troubleshooting

If you are unable to login please ensure the following:

  • You are connected to the campus network or UTORVPN
  • You have the correct subsite name in the URL

If you are receiving a message about your UTORid being invalid, try to verify your UTORid by going to https://www.utorid.utoronto.ca/ and clicking on Verify your UTORid and password. Try logging in again after this completes.

If you still encounter issues, please submit a ticket to ServiceNow and provide as much of the following information as you have:

  • The site you are attempting to log into
  • The UTORid that is unable to log in
  • Your physical location (if on campus, in which building / room, or off-campus)
  • Your method of connection (wired or wireless)
  • Whether or not you are connected to the VPN
  • Your operating system
  • The browser you are using
  • Your IP address

Administrative Toolbar

When logged in the toolbar is found at the top of the site.

From this toolbar you can:

The website header with administrative toolbar
The administrative toolbar as it appears for a logged in user. View full-size image.

Site's Appearance

Selecting Appearance from the administrative toolbar will allow you to access theme settings.

As of the 2017-09-14 update, most sites will be using the UTM Minor theme. Within the appearance settings you can change the colour scheme of this theme. There are 5 colour schemes to choose from.

Note: Selecting a colour scheme from the dropdown will display a preview image of the selected scheme. This will not take effect on your site until the settings are saved.

Settings will only take effect after clicking on the Save Configuration button. 

Creating Your First Basic Page

Screenshot of the admin toolbar
The administrative toolbar.

Getting started

To create a basic page, choose Add Basic Page from the Add Content dropdown on your admin toolbar.

This will bring up the content edit form for the Basic Page content type.

Enter a Title for your page and enter your text for the body. For details on text formatting see the section on working with the Rich Text Editor.

When you are done editing you will need to save your page.

The basic page editor
The basic page editor

Adding the page to the menu

You can add this page to the menu by:

  1. Ticking the Provide a menu link checkbox in the content publishing settings section located below the edit form.
  2. Choose the parent link, this item will become a subnavigation item to whichever page you choose. If you wish to add it directly to the main menu bar, choose <Main menu>.
Content settings with Menu settings options shown
The menu settings options in content publishing settings

Giving the page a custom URL alias

In some situations, you may wish to give your page a custom path to have an easier to type URL. In general, we recommend using the default settings. To override these settings do the following.

  1. Click on the URL path settings section on the left of the content publishing settings seen above.
  2. Uncheck "Generate automatic URL alias"
  3. Enter your alias in the URL alias field. The www.utm.utoronto.ca/your-subsite/ portion will be added automatically.
    Note: only enter the portion after your subsite name (a relative path) with no leading or trailing slash or your page may become inaccessible. For example: path/to/your/page
A custom url alias being set
Creating a custom alias for "my-custom-url".
This will result in the page being located at www.utm.utoronto.ca/your-subsite/my-custom-url

Saving your new page

To save your new page, scroll to the very bottom and click on the Save button.

Note: If you navigate away from this page without clicking the Save button, your changes will be lost.

Edit screen buttons
The buttons at the bottom of the basic page edit form.

Creating Your First Call to Action

A sample call to action
A sample call to action block

Creating the Call to Action content

From the Add Content dropdown menu on the administrative toolbar select Add Call to Action.

You will need to do the following:

  • Enter a Title. The one in the example is "Call to Action Example"
  • Upload an image that is at at least 228px wide and enter appropriate alternative text.
  • Optionally, enter a blurb. This should be kept short. In the example it is "This is a short blurb."
  • Enter a link and give the link a title. The link title should represent an action. In the example this is seen as "Learn more".
  • Scroll to the bottom and click the Save button.

Once you have saved your call to action, it's time to add it to some pages.

 

Adding the Call to Action to pages

  1. From your administrative toolbar select Blocks
  2. Scroll down to the section titled Disabled, you should find an item with the title of your call to action.
  3. Select configure at the end of the row containing your block.
  4. In the section labelled Region settings locate the theme with (default theme) next to it.
  5. In the dropdown below this theme, choose Right Sidebar.
    • You can set the remaining themes to Right Sidebar as well, but it is not necessary unless you plan on changing themes.
  6. To show this only on specific pages, under Show block on specific pages choose Only the listed pages
  7. In the textarea below, enter the path for each page you want your call to action to appear on (one per line). They should be relative paths of the form "path/to/your-page" excluding the "www.utm.utoronto.ca/your-subsite/" portion.
    Tip: You can enter <front> to place the block on the front page. See an example of block visibility.
  8. Click Save block at the bottom of the page.

Your call to action will now appear on every page you listed in step 7!

For more information on blocks see Managing Blocks.

Creating Your First Webform

Webforms can be used to collect data from external users. Results can be e-mailed to you or downloaded in into an Excel format.

The section on Webform Content later in this guide provides step-by-step instructions to creating your first webform. Following the steps in each of the sections below will allow you to create your first webform.

  1. Creating a Webform
  2. Webform Field Descriptions
  3. Building Your Webform
  4. Sending an E-mails When a Webform is Submitted
  5. Testing Your Webform
  6. Viewing Webform Results 

Sharing Bar

What You Will See

The sharing bar is a tool that allows you to share public links to social media, get public links for linking to various services, get internal links for using in your call to actions, and a login button if you're not logged in. This bar will only appear while you are accessing the edit server. It will not be visible externally.

You can expect to see two different versions of this bar while working on your subsite. The first is a blue bar containing links for sharing, getting links, and logging in.

The content sharing bar
The content sharing bar as it appears on a shareable page.

The second form of this bar appears as a yellow bar displaying a warning message. This bar will appear any time you are on a page that does not have a public representation available. You can expect to see this on any administrative pages (find content, login page, etc.), unpublished pages, or when you are editing a page.

The content sharing bar on an administrative page
The content sharing bar as it appears on an administrative page.

For any of the links that open a modal window, you can close the window by clicking outside of it or by clicking on the close X in the top right corner.

Social Media Sharing

The   Share button opens a menu of various social media services that you can share to directly. In order to share to a listed service, simply click on the service and a window for the service will pop-up prepopulated with a link to your page. If you wish to use an HTTPS link or include a Google Analytics tracking campaign, open the settings menu before clicking on the service you wish to use.

Social media service listing
Clicking on Share will provide you with a list of social media services.

Social Media Sharing Settings

The sharing settings can be found by clicking on  Settings. In the Social Media settings section you will find the option to use HTTPS instead of HTTP and the ability to use a Google Analytics tracking campaign.

Social media sharing settings
The social media sharing settings

Google Analytics Campaigns

More information on Google Analytics campaigns.

You can create an Analytics campaign URL right within the share bar by checking the Include analytics campaign option in the Settings menu. Depending on the medium you are using to distrubute the campaign URL you may not need to fill in all the fields. This campaign information will be used when using the social media sharing links below the settings section (as seen above). Simply enter the required campaign information and click on the sharing method. Alternatively, you can choose to Copy to clipboard and it will copy the sharable URL right to your system clipboard so that you can paste it into an e-mail, use it for ads, etc.

The analytics campaign options
The Analytics campaign options. Not all fields are required for all campaigns.

If you are unsure of which fields you need for a specific method, you can click on the more information button next to the field (denoted by a icon). Clicking on the more information button will open a help box below the field.

One of the more information boxes
An example of an open more information box.

Once you have the necessary fields filled in, you can choose a social media service to share to or click on Copy to clipboard. Medium and Source information will be automatically added for most social media services. You will be alerted if you need to fill in another field.

A campaign being shared to Twitter
A campaign being shared to Twitter.

If you choose to use the Copy to clipboard function a message will alert you to whether or not it was copied successfully. If you are using Safari you may be prompted with a "Press Ctrl+C to copy to clipboard" message on Windows or a "Press ⌘+C to copy to clipboard" message on a Mac as Safari does not support the method used to copy to clipboard.

Campaign with sample values entered
A successfully copied campaign URL.

Getting Links

The  Get Link button will open a menu that allows you to get both public links to the current page and an internal link for use in other content. It is designed to allow editors to quickly grab a link to any publicly viewable page on their site. You should always use the HTTPS option when sharing webforms. For any of the links clicking on Copy will copy the link directly to your clipboard.

Note to Safari users: Safari does not support copying to clipboard through this method. Upon clicking on Copy you will be prompted with a "Press Ctrl+C to copy to clipboard" message on Windows or a "Press ⌘+C to copy to clipboard" message on a Mac. Pressing the appropriate key combination will copy the URL or path to the clipboard.

Links for Public Access

There are two options for getting a public link:

  • Public Link
  • Public Link (HTTPS)

The HTTPS allows you to provide the user with a more secure link. This link uses an encrypted connection. For standard pages this is not necessary, but it should be used for webform content.

Get a link menu
Clicking on Get Link will provide you with a few different options for your links.

Links for Internal Usage

There are two options for internal usage links:

  • For Internal Content (aliased)
  • For Internal Content (unaliased)

Both of these options will work for things like the URL in Call to Action content or Feature Box content. This also helps when determining paths for block placement (see: Managing Blocks). In general, the unaliased path will be the Node ID.

Note: If you are on a view page (such as the news listing) the unaliased option will not be available since the page does not have a Node ID. 

A node ID copied to clipboard
The Get Link menu can also provide internal paths.

Best Practices For Sharing Links

  • Always use the HTTPS option when sharing webform content.
  • When using the internal path in content such as Call to Actions, the unaliased path (Node ID) will work even if the page alias changes

Working on the Staging Server

If you are working on the staging server, you will not see the blue version of the bar. Instead, you will see a yellow version of the public bar containing a limited number of the same tools.

An example of the bar on a staging server
An example of the share bar as it would appear on the staging server.

Since sharing is disabled, the  Share and the  Get Link buttons behave a little differently. The share menu will display a message informing you that sharing is disabled, and the link menu will only provide internal links since there is no public location available.

The share menu on a staging server
The share menu as it appears on a staging server.
The get link menu on a staging server
The get link menu as it appears on a staging server.

Managing Content

All text, images, and other information on your site are considered content. Content is captured in various content types that define a specific grouping of content based on common elements or function.

When creating or editing content, you may notice help text below the fields. This often includes information such as required dimensions for images, available HTML tags, or other useful information. Look for this help text if you are unsure what some field's purpose is. See figure 1 for an example of this help text.

Help text is highlighted
Figure 1. An example of help text for an input field. View full-sized image.

In this section you will find:

  • Details about specific content types and best practices for each content type that is shared across all subsites.
    • Your subsite may have additional custom content types available but these will not be covered in this section.
  • Details about using images within your text content.
  • Step-by-step guides for various functions within the Rich Text Editor (RTE).

For best practices for different situations, it is recommended you view pages tagged with Best Practices.

Available Content Types

Basic Page

These are for static content and will likely comprise a majority of your website. They contain a title and a body of text.

» View more about the basic page content type.

News

This content type is for time-sensitive posts and should generally be reserved for releases like news releases and announcements. Generally there should be an author name and e-mail associated with these items. This content type includes an optional image with caption and photo credit.

All sites have a listing view defined for news located at /your-subsite/news where your-subsite is the replaced with your site's url.

For example: /iits/news

» View more about the news content type.

Call To Action

These are designed to highlight an event, a new policy, some new page, etc. These can be placed in the left or right sidebars. In general, it is the preference of UTM Marketing & Communications that they are placed on the right-hand side.

» View more about the call to action content type.

Feature Images

These are intended to be decorative images for your site's front page. They each require a single image that is 930x200 pixels. If the feature image block has been enabled by I&ITS, you will see these items cycle on your website's front page.

» View more about feature image content type.

Feature Box

These are similar to a feature image, requiring the same image size, but they also include a link and a short description.

» View more about feature box content type.

Faculty & Staff Profiles

This content type outlines a faculty or staff member within your organization. These profiles are used to generate the listing view of departmental staff and faculty located at /your-subsite/people.

Example: /iits/people

» View more about faculty & staff profile content type.

Webform

This allows you to create a form or questionnaire to be completed by anonymous users. Results can be e-mailed to an e-mail account as the come in and the results are stored in the site where authorized editors can obtain them. It is generally recommended that you limit the amount of personal information you request in your forms.

» View more about webform content type.

Basic Page Content

Description

A majority of your site will consist of basic pages that contain a title and a body. The body can be any combination of formatted text and images.

Editing

Screenshot of the basic page fields
A new basic page in the editor.

The image on this page shows an example of the fields you should expect to see when adding a new basic page. The body of the page is generated using the rich text editor (RTE).

For more information using the RTE please view the following: Working With the Rich Text Editor.

When creating or updating a basic page you have several publishing options you can configure. See Content Settings for more information on these options.

Best Practices

News Content

A screenshot of a news article

Description

The news content type is used to publish stories about events, initiatives or people/groups.  It should be noteworthy, it should relate to something recent (not “old” news) and ideally it should quote individuals who are relevant to the story. It should also include a relevant image with sufficient alt-text (see: Accessible Images and Multimedia) for which your department, UTM, or U of T holds full rights.

Best Practices

  • News writing uses the “inverted pyramid” form of storytelling, which clusters the most important information at the beginning of the story (the “who/what/where/when/why”), followed by details of diminishing importance. Further information can be found at https://en.wikipedia.org/wiki/Inverted_pyramid and https://owl.english.purdue.edu/owl/resource/735/04/.

  • Keep news stories short, particularly on the web. Limit the word count to no more than 400-500 words. Titles and captions should also be short.
  • Use active verbs, and avoid long or convoluted sentences. Clarity is best.

  • Include links wherever relevant.

  • Put the names of U of T Mississauga faculty, staff or students mentioned in the copy in bold text.

  • If you are republishing the story from another source, ensure that you have permission to do so, and include the name of the author and a link to the original source.

Displaying News Content

As mentioned on the Available Content Types page, there is a pre-defined path for all news articles. You can access this by going to /<your-subsite>/news where <your-subsite> is replaced with the url for your Drupal subsite.

For example, http://www.utm.utoronto.ca/iits/news

In addition to this page there are three block options available for your subsite. Any of these can be added to your site by requesting it via the ticket system ( https://helpdesk.utm.utoronto.ca/helpdesk ).

  1. Headlines display
  2. Grid display
  3. News listing display

All of the listed blocks will display the previous 4 news articles sorted by the value of the Date field in the content.

Headlines Block

The headlines block can be placed either sidebar, but it is generally recommended that it be placed on the right sidebar on your main page.

An example of the headlines block

News Grid Block

Generally this block is placed on the main page of your subsite. 

An example of the news grid

News Listing Block

News listing block thumbnail
This image of a news listing block has been reduced in size, you can view the full-sized version.

Call To Action Content

An example of a call to action
An example of a Call to Action block.

Description

A Call to Action is intended to grab a user's attention and draw them to a particular page or site. All Call to Action content contains a mandatory title, an image that is no larger than 228px wide by 228px tall (larger images will be scaled accordingly), and a URL with a title. Optionally, you may also include a short blurb to appear before the link.

Best Practices

  • Avoid images of text where possible. See more about images of text.
  • Keep the blurb short.
  • Your link title should represent an action (e.g. "Act now", "Register here", "Learn more", etc.).
  • If linking to a page within your site, try using a relative URL in the URL field
  • While Call to Action blocks can be placed on either the left or right sidebars, it is recommended that they be placed in the Right Sidebar region for your pages for consistent placement throughout the site.
  • When placing the Call to Action block, try to limit the placement to pages that are relevant to the URL it is linking to. For example, if your Call to Action is targeted at new students it might not make sense to have it appear on pages targeted to returning students.

Feature Image Content

A screenshot of a feature image from Biology's website

Description

This content type is designed to be used as a decorative banner for your site's front page. The display of these will cycle through all published content.

The dimensions of the images must be exactly 930px wide by 200px tall at 72 dpi.

A visual representation of the image dimensions.
A visual representation of the Feature Image dimensions. This image has been resized; view the full image.

Best Practices

  • Avoid the use of text in this content. It is intended as background and may be ignored by assistive technologies.
  • If you are using this to advertise events or services perhaps consider switching to the Subsite Feature Box.
  • Try to keep the number of feature images published to a maximum of five. Any more than this and users probably won't see them all anyway.
  • Use high quality images. You will have better results if scale down a higher resolution image than enlarging a low resolution one.

Feature Box Content

An example of a subsite feature box

Description

This content type is designed to act similar to a Call to Action as well as a banner on the front page. Use this content type to draw users to a specific page, website, or advertise an event.

The dimensions of the images for this content type must be 930px by 200px at 72dpi. The left-most 360px will be covered by an overlay and the text portion of the content will be placed here. See the figure below.

A demonstration of feature box dimensions
A visual demonstration of the Feature Box dimensions. View full size.

There is a maximum of 5 items of this type that will be displayed at a time.

Note: The view for this cannot be active at the same time as the Feature Image banner block.

 

Best Practices

A demonstration of feature box design best practices
A visual demonstration of the Feature Box design best practices. View full size.
  • Design elements should be kept to the right as there is an overlay that obscures the left-most 360 px. You should avoid text on your image on the left side for this reason as well.
  • Items should be changed frequently.

 

Faculty & Staff Profile Content

Description

This content type is used to create profiles for departmental listings. It includes fields that capture information such as contact information for the individual, educational background, teaching information, and publications.

An automatic listing page of these profiles is available.

Note: In order to use this content type, it must first be configured for your website by I&ITS.

Best Practices

  • Let the automatic listing page do the heavy lifting of generating the list of profiles instead of making your own listing page
  • Periodically check the profile listing to ensure content is up to date

 

Webform Content

Description

This content type is used to collect data from external users. Results can be e-mailed to you or downloaded from the edit server into an Excel format.

Best Practices

  • Request as little personal information as possible
  • Clear webform results where personal information is captured once the information is taken offline

Creating a Webform

Creating a webform is a simple, but sometimes lengthy, process. The steps are as follows:

  1. The first step in creating a webform is to choose Add Webform from your Drupal user menu.
  2. Add your introductory or instructional message in the body field.
  3. Add the fields for the data you wish to capture. You can find descriptions of available field types at Webform Field Descriptions and a step-by-step guide to creating your webform at Building Your Webform.
  4. Configure e-mails to be sent upon a successful submission. More on this in E-mailing Webform Results.
  5. Customize the form with a 'Thank You' page and manage other settings. More in Webform Form Settings.
  6. Test your webform to ensure everything is working the way you expect it to. See Testing your webform.

 

Webform Field Descriptions

This page outlines the fields available when creating a webform.

Date #
Used for capturing a generic date within a set range.
E-Mail #
Used for capturing e-mail addresses.
Fieldset #
Used to group a set of fields. This is useful when you have a longer form and want to divide it into sections.
Grid #
This is used for sections that have multiple questions with the same possible responses. For example, a group of questions like "on a scale of 1 - 10 rate the following".
Hidden #
A value that is submitted with the form but is not visible to the user. In general you should not need this.
Markup #
This field allows you to insert basic HTML markup. This allows you to insert a text statement or declaration into your form.
Number #
This allows you to collect a generic number. This may be a decimal number, a whole number. You can define a maximum and minimum value as well.
Page break #
This allows you to put a page break in the middle of your form. This is useful for breaking up very long forms.
Select options #
Used for dropdowns, radio buttons and checkbox lists.
Textarea #
Captures multiple lines of plain text. This text can be several paragraphs in length.
Textfield #
Captures a single line of plain text that is less than 255 characters in length.
Time #
Captures a generic time. This can either be in 12 or 24-hour format but cannot be limited to a range.

Building Your Webform

Adding a Field

Once you've saved your instruction portion it's time to add the fields.

For each field, you must do the following:

Thumbnail of the webform component listing with items listed 1 to 4 to mirror steps
Figure 1. The first 4 steps in creating a new webform component. View full-sized image.
  1. Add a label for the field. This will appear next to or above the form field.
  2. Specify a field type. Choosing the appropriate field type will not only give you better results, but will also improve the accessibility of the form. See Webform Field Descriptions for descriptions of all available field types and also Accessible Webforms for more information on improving the accessibility of you webforms.
  3. Specify whether the field is mandatory by checking the Mandatory box or optional by leaving it unchecked.
  4. Click the Add button to take you to the component settings screen.
  5. Confirm component settings by clicking Save component.

Editing Components

An example of a webform component
Figure 2. An example of the edit screen for a webform textfield component called "Example". View full-sized image.

Figure 2 depicts the edit screen for a textfield component. The fields in this section will be there for all components regardless of type. They are:

Label
The field name to be displayed to the user.
Field Key
The system's identifier for this field. This name must be unique within the context of the form and it can only contain lowercase letters (a-z), numbers (0-9) and underscores ( _ ). As long as this identifier is unique you can safely have multiple fields with the same name (For example, if you had a form with a primary and secondary contact name in a fieldset).
Default value
The default value for this field. Fill in this field if you want to pre-populate the field with some data. For example, if you are capturing an e-mail address want to suggest a user enter their UofT e-mail address, you could prepopulate this field with "@mail.utoronto.ca".
Description
This is the help text that appears below your field. Use this to clarify ambiguities or provide more detail for a specific field's expected data. This is also a good place to make note of any specific maximum length the field may have.

You may notice the collapsed sections titled "Validation" and "Display". These sections contain additonal options based on your selected component type. They are not present for all field types.

Validation

The validation section contains options that affect how the field's data will be captured. In addition to including if this field is mandatory or not, this also includes items such as:

  • Maximum length for textfields
  • Maximum and minimum value for numbers
  • If the value must be unique
  • The range for dates
Validation settings for the textfield component
Figure 3. The validation fields for the textfield component type. View full-size image.

Display

This section contains options for how your field is displayed visually. They also vary by field type. This includes items such as:

  • Label location (either inline or above the field)
  • Height and width of a text area
  • Thousands separator for numbers
  • Prefixes such as $ and suffixes such as kg for numbers
The display options for the textfield component
Figure 4. The display options for the textfield component type. View full-sized image.

Analysis

For some items you may see an Analysis section. These settings affect how your data is analyzed when you are viewing results while logged in.

Arranging Form Order

The order you created the form components will be the order they are displayed. If you wish to change the order of the items in your form, there are two ways you could go about doing so.

Drag and Drop Reordering

You can reorder the items in your webform by clicking and dragging the quad-directional arrow icon to the left of the form field.

Quaddirectional arrows highlighted showing where it can move
Figure 5. Clicking and dragging this icon will allow you to change the location of the dragged field. View full-size image.

This method is also used to move items into a fieldset component. Instead of dragging up and down, the item should be dragged to the fieldset it be placed in and then to the right.

Note: This is the only way to make fields children of a fieldset.

A set of fields with a fieldset component in the list.
Figure 6. This shows a set of fields with a fieldset component. View the full-size image.
Two items placed as children of a fieldset
Figure 7. This demonstrates the items moved as children of the fieldset. View the full-size image.

Sort Weight Manipulation

If you wish to manually sort the entire list at the same time you can click on the Show row weights link in the upper right corner of the component listing page (see Figure 8). The items will sort from lowest number (top) to largest number (bottom). Figure 9 demonstrates two values being swapped. When the save button is pressed, these two fields will switch into the numerical order assigned.

A red arrow points to the Show row heights link
Figure 8. Clicking the link pointed to by the arrow will change the list to a sort by weight view. View the full-sized image.
Two values being swapped
Figure 9. The two values have been swapped. Pressing save will swap the order of these two fields. View the full-sized image.

Sending an E-mail When a Webform is Submitted

Step-By-Step E-mail Creation

Step 1 - Choose the e-mail recipient

The first step is to choose the e-mail address that will be receiving the e-mail. This can be either:

  • A manually defined e-mail address such as a shared departmental account or your own e-mail address OR
  • you can have the e-mail be sent to an e-mail address provided by the user completing the form

The second option can be used for any email component in your form. If you request a user's e-mail address be sure to use this component type and to make it mandatory if you intend to send an automated reply.

Once you have entered an e-mail address or chosen a field. Click the Add button on the right (see Figure 1).

The e-mails screen for webforms
Figure 1. The webform E-mails tab. From here you can enter an e-mail address or choose from available email form components for e-mail recipients. View full-sized image.

Step 2 - Set your header details

The next step is to choose your e-mail's subject, the e-mail address to send the e-mail from, and the name of sender.

For each of these options you can choose from a pre-configured default, a custom value, or a relevant component value from the user's submission. (see Figure 2). Also, you can update or modify the e-mail selected in Step 1.

The e-mail header settings.
Figure 2. The e-mail header details for a webform e-mail. View full-size image.

Step 3 - Set your E-mail template

The next step is to choose what the body of the e-mail will be. This can be either the default template which supplies a list of submitted values, or it can be a custom message such as a thank you e-mail or some other confirmation message that will be delivered to an e-mail address.

To override the template, you can just edit the E-mail template text area. You do not need to select Custom template from the dropdown as this will occur automatically.

The default E-mail template for webforms
Figure 3. The default template for e-mails sent by webform submissions. View full-sized image.

If this e-mail is being sent to the user who filled out the form, you may wish to consider adding helpful information like "Thank you for submitting the form for [purpose]. Your submission has been received."

Step 4 - Complete the e-mail setup

Hit the Save e-mail settings button at the bottom of the page to save this e-mail.

Step 5 - Repeat

Repeat process from step 1 in order to add a second e-mail. You can send multiple different e-mails upon a successful form submission.

Webform Form Settings

The third tab under the Webform tab is additional form settings. 

Submission settings

Confirmation message

This field allows you to set a custom confirmation message. This is the place where you would enter a message such as "Thank you for your submission. You will receive an e-mail confirmating the receipt of your submission."

Redirection location

This allows you to set a custom thank you page or some other page you wish to redirect the user to.

Total submissions limit

You can provide a hard limit on the number of submissions received with this setting. This would be useful, for example, if you had a case where you are only accepting the first 20 replies to a form.

Per user submission limit

This refers to logged in users. It is recommended you do not change this from the result of "Unlimited" or users may be unable to submit your form.

Status of the form

This allows you to close the form to futher submissions. Users will encounter a "Submissions for this form are closed." message when they view the form. The introductory information you entered for the form will still appear, but the form will not.

Other settings sections

There are two other settings groups, Submission access and Advanced settings. It is advised that you should leave these settings as their defaults or your form may not work as expected.

The only option in these sections that you may wish to change is the "Submit button text" under the Advanced settings section. This allows you to change the label of the submit button at the end of the form some custom label.

Testing your Webform

  1. View your form from the public www.utm.utoronto.ca location.
  2. Fill in the form with sample data that matches what you're expecting.
  3. Submit the form.
  4. Confirm that all e-mail notifications were sent to the appropriate e-mail addresses.
  5. View results from the Results tab.

Viewing Webform Results

There are numerous methods of viewing and analyzing the data collected by webforms. You can access all of these options via the Results tab that is present while viewing a webform while logged into your site with the appropriate permissions. Figure 1 shows the location of this tab.

Viewing Results

Submission Listing

This is the simplest listing of the webform results. You can find it under the Submissions subnavigation item when viewing the Results tab. From this page you can either View, Edit or Delete any submitted webform result. You can expect the User listed to read Anonymous (not verified) as this just means that it was someone who was not logged into the edit server.

A sample of submission listings
Figure 1. The submission list. View full-sized image.

Note: As with all deletion, there is no undo. Deletion of a webform result is permanent.

Viewing a single submission

Clicking on the View option next to a submission will allow you to view the specific values submitted in each submission. You can navigate between submissions by clicking on the next and previous submission links located at the top-right and bottom-right of the submission details. This can be a useful way of viewing your submissions if you want to review them one at a time.

A sample submission
Figure 2. A sample of a single submission being viewed. View full-sized image.

Submission Analysis

This screen is found under the Analysis subheading. Its primary purpose is to gather a quick view of how items were voted on. This is mostly useful where you have a select list or grid types to gather information to see which item is most voted on.

A sample of the analysis screen
Figure 3. A sample of the analysis screen. You may notice this is not particularly useful for text fields. View full-sized image.

Submission Table

This is available from the Table subheading. If you have a simple form, you may be able to view all the details on this page easily. However, if you have a longer form with many fields or very long field labels you may find this page very hard to read. In this case you would likely want to use the Download functionality.

A sample of the results table
Figure 4. A sample of the Table screen. View full-sized image.

Downloading Results

You can download webform results from the Download subheading under the Results tab. You have the option of downloading the webform results as Delimited text (CSV, for example) or as an Excel format. For Delimited text you can choose the delimit character to be a tab (\t), a comma (,), a semicolon (;), a colon (:), pipe (|), period (.) or a space ( ). You may choose the best one based on your expected data.

A sample download screen
Figure 5. A sample of the download screen. View full-sized image.

You also have a few other options that you can set for your export.

Select list options

This section can be expanded by clicking on the Select list options page on the Download page. This offers you some additional customization in how select list and grid items will be handled in the downloaded results. 

Screenshot of the select list options.
Figure 6. The select list options section for downloading results. View full-sized image.

Included export components

This section can be expanded by clicking on Included export components in the Download screen. This allows you to remove some of the additional metadata that is included with the submissions in your downloaded data. This includes items like the internal submission number, the time and date of submission, and the IP address of the submission.

A screenshot of the included export components section
Figure 7. The included export components section. View full-sized image.

Download range options

This section can be expanded by clicking on the Download range options link in the Download page. In this section you can choose a subset of all submissions. In this section you can choose any of the following:

  • All submissions
  • Only new submissions since the last time you downloaded.
  • Only the latest X submissions. Where X is a number you define.
  • All submissions starting from: Start SID and optionally to: End SID. These SID values are the submission ID listed with the submissions on the listing page.
A screenshot of the download range options
Figure 8. A screenshot of the download range options. View full-sized image.

Clearing Results

Clicking on the Clear sub-navigation item on the Results tab will bring you to a page that allows you to delete all submitted webform data. It is recommended that you periodically download and clear your forms via this method if you are requesting personally identifiable data. This will help minimize the amount of data leaked if there's ever an integrity breach.

Note: Like all deletion in Drupal, this is permanent. There is no undo function. Use this functionality with caution.

The clear screen for webform results
Figure 9. The screen for clearing results. View full-sized image.

Content Settings

The settings items found on this page are common to all content types. These are configured per node. Certain content types may be missing the menu options because in general they should not be placed in the main menu.

In general, you will see a box like the one below at the bottom of each piece of content just above the Save and Preview buttons.

Content Settings
Content settings with default settings on a basic page.

Menu Settings

This setting allows you to add your content to the main menu of your site. 

The Menu link title will automatically be populated with your page title as defined for your content. You can set this field to have a different link title than the page title.

Description will be displayed when you hover over the link to this page in the menu. This is optional. Use this when you want to clear an ambiguity with the title or want to provide a very short description of the page.

The Parent item dropdown lists all items on your menu. Selecting <Main Menu> from this dropdown will place the item on your menu at the top level. If you choose a page from this dropdown your new page will be linked as a child page of the selected parent.

Weight determines how this item will be sorted in the menu with its siblings.

This is not the only way to add a menu link to your page. For more information on menus see Managing the Menu.

Menu settings sreen

Revision Information

This setting allows you to create a new revision of content. This preserves the old page and allows you to rollback to a previous revision of the page via the "revision" tab. Entering a brief description of your changes in the Revision log message field is recommended as it allows other content managers on your site to see what was changed without having to fully review a page.

If you uncheck Create new revision when editing a page the previous version of the page will not be recoverable.

Revision information options

URL Path Settings

Automatic URL generationThese settings allow you to change the URL of a page. You can enter a custom URL alias here by unchecking the Generate automatic URL alias box. Please take note of the help text below the URL alias field.

Optionally specify an alternative URL by which this content can be accessed. For example, type "about" when writing an about page. Use a relative path and don't add a trailing slash or the URL alias won't work.

When creating a custom URL alias, the path to your site is added automatically. For example, if your site is www.utm.utoronto.ca/example/ and you want a page located at www.utm.utoronto.ca/example/path/to/my/page, you only need to enter path/to/my/page as the rest will be handled automatically. You do not need the leading or trailing slash or the site name.

In general, it is recommended that you leave Generate automatic URL alias checked. 

A custom URL being created

Authoring Information

This section allows you to change the posted date for the purposes of sorting.

the authoring information screen

Publishing Options

The only option in this section that matters is the Published checkbox.

If content is marked as published, it will be public available. If this checkbox is not checked the page will only be available to content managers for your site. This option is useful if you wish to save an unfinished page temporarily to avoid losing progress or if you wish to remove a page temporarily in order to rework it.

The Promoted to front page and Sticky at top of lists checkboxes are unused and should be left unchecked.

The publishing options screen

Finding Existing Content

An administrative view has been created for each content type that lists relevant information. These can be accessed from the Find Content dropdown from your administrative menu.

Clicking on Find Content will give you a generic listing of titles that will let you search and filter content of all types and statuses. The other links under Find Content provide a unique listing for all published content of a type with some other useful fields. For example, the Find Feature Images link will give you a thumbnail of each feature image. These content type-specific views will only show Published content. There is an additional one specifically for unpublished content of all types.

The find content menu items
Figure 1. The find content menu items.
A sample of a find basic pages view
Figure 2. An example of the Find Pages (including Webforms) view. View full-sized image.

Working With Images

Uploading Images

See Working with the File Manager and Images and Media In The RTE.

Aligning Images

Refer to Images and Media In The RTE for how to wrap text around images. Additionally, see Image Style Cheatsheet for all available image styles.

Image Best Practices

  • All website images should be 72 DPI (dots per inch) and use RGB (not CMYK) colouring
  • Always start from the highest resolution image you can and scale it down to an appropriate size.
  • Do not change the aspect ratio of an image. Changing the aspect ratio will result in squished or stretched images.
  • Images should never be wider than 930 px.
  • Images should be accessible. See Accessible Images and Multimedia.

Working with the File Manager

Viewing Available Files

There are a few ways you can access the file manager while editing.

You can access the file manager in the following ways:

File browser link highlighted on user page
Figure 1. The file browser link on the user page. See full-size image.

Uploading a File

Once you have the file browser open, the first step in uploading a file is selecting the directory you wish to upload to. This is done by selecting the desired folder to upload to in the Navigation pane (see Figure 2).

The navigation pane highlighted in the folder browser
Figure 2. The navigation pane. View full-sized image.

Once you've chosen the directory you want the file in click on the Upload button on the top bar of the file browser, click on Choose File and choose the file from your system, and finally click on the Upload button in the pop-up dialog (see Figure 3). 

Upload pop-up is displayed with arrows pointing to the file selector and upload button
Figure 3. Locations of fields for uploading files. See full-sized image.

Deleting Files

First, locate the file you wish to delete and select it so that it is highlighted in the file browser. Click the Delete icon. Your browser will prompt you to confirm the deletion. If you click OK your file will be deleted. See Figure 4.

Remember, deleting files is permanent.

Note: Deleting a file will not remove any links pointing to the file. Links to a file should be removed prior to deleting the file unless you are simply replacing the file.

Delete button in IMCE
Figure 4. The delete button location. Clicking this will delete the highlighted item (drupal_square.png in this example). View full-sized image.

Replacing Files

  1. Identify the file you wish to replace; Take note of the exact file name and folder location.
  2. Rename your new file to the exact filename as found in step 1.
  3. Delete the existing file from the file manager.
  4. Upload the new file with the same name as in step 1.

Adding Subdirectories

  1. Select the directory in which you wish to create the new directory the same way you choose the location to upload a file (see Figure 2).
  2. Next, open the directory dialog by clicking on the Directory button. See Figure 5 for the location of this button.
  3. Enter the name of the directory you wish to create. See Figure 6 for an example of this and the following step.
  4. Press the Add button.
The directory button in the file manager
Figure 5. The subdirectory management button. View full-sized image.
A subdirectory being added
Figure 6. A demonstration of a subdirectory named mysubdirectory being added to the shared directory. View full-sized image.

Removing Subdirectories

To remove a subdirectory follow these steps:

  1. Locate the directory containing the directory you want to remove in the Navigation pane. See Figure 2.
  2. Click on the Directory button. See Figure 5.
  3. Choose the sub-directory you want to delete from the dropdown menu (or type in the directory name). See Figure 7.
  4. Click the Remove button. See Figure 8.
  5. The browser will prompt you to confirm deletion of the directory. Clicking OK will remove the subdirectory and all files in it.

Reminder: All deletion in Drupal is permanent. Be careful when deleting directories, as all files and directories within the deleted directory will be lost.

A directory being selected from the subdirectory dropdown
Figure 7. mysubdirectory being selected from the dropdown of subdirectories in the shared folder. View full-sized image.
Location of the remove button with a directory selected
Figure 8. mysubdirectory has been selected and the Remove button is being clicked. View full-sized image.

Resizing Images

  1. Select the image you wish to resize.
  2. Click the Resize button. See Figure 9.
  3. Enter a new desired height or width. Clicking into the remaining empty field will automatically calculate the remaining dimension. See Figure 10.
  4. If you want to overwrite the existing image, uncheck the "Create a new image" checkbox. Otherwise, leave this checked to create a new image file.
    • For example, if you have a file called my_file.png and have the box checked, when you finalize the resize a new file called my_file_0.png will appear in the directory. This is useful if you want a smaller version of the same image to use as a thumbnail to link to the larger image. This was the method used for many of the images in this guide.
  5. Click the Resize button in the pop-up dialog. See Figure 11 for the location of this button.
The location of the resize button
Figure 9. The location of the resize button. View full-sized image.
Screenshot to demonstrate the automatic calculation of a dimension
Figure 10. A new width of 200 has been entered. Clicking on the height will calculate the appropriately scaled height value. View full-sized image.
The location of the Resize confirmation button
Figure 11. The Resize button. Clicking this button will complete the resize and either generate a new image or overwrite the current one depending on the status of the "Create a new image" checkbox. View full-sized image.

Best Practices for Resizing in the File Manager

  • Never increase the size of an image.
  • Try to upload correctly sized images and not rely on the image resizing.
  • Image editing software may produce a better result for rescaling images. If you have access to more powerful image software and are familiar with the capabilities use it for resizing.

Working with the Rich Text Editor (RTE)

The rich text editor is a product called CKEditor. This is what is known as a What You See Is What You Get (WYSIWYG) editor.

CKEditor
An example of a CKEditor window

This page provides descriptions for each item on the CKEditor function menu.

Source View

CKEditor source view
CKEditor Source view button

Clicking this button exposes the raw HTML being generated by the editor. Clicking it again switches back to the WYSIWYG editor.

Clipboard Functions

CKEditor clipboard functions
The CKEditor clipboard functions

From left to right the items are:

  • Cut
  • Copy
  • Paste
  • Paste as plain text
  • Paste from Word
  • Spell Check As You Type
  • Undo
  • Redo

Differences between Paste functions

  • Paste will paste the copied text exactly as it exists in the clipboard. This is best used if you are copy and pasting from another page on the UTM site or a previous version of a page.
  • Paste as plain text will remove any formatting from the pasted text leaving only the text content. This is best used when you are have a paragraph from a source that is not the UTM website or Microsoft Word.
  • Paste from Word will attempt to translate text copied from Microsoft Word into the appropriate HTML. If you have your text in a Word document with the appropriate tagging of headings, this should preserve the formatting.

Note: much of how things are displayed is controlled by the theme. Some formatting may be stripped out by the editor during the save process.

Media Functions

CKEditor media functions
The CKEditor media functions

These two functions are Image and Embed Media.

Image allows you to insert an image into your page with alternative text.

Embed Media allows you to insert other media content, such as YouTube videos or Flicker slideshows. Currently, this functionality only works for flash content, if your embed contains an iframe it will be stripped out.

For more on these items see Images and Media in the RTE.

Tables and Data

CKeditor data functions
CKEditor functions for inserting data tables and horizontal breaks.

These two functions are Table and Insert Horizontal Rule.

Table is used for inserting data tables. It should not be used for aligning data as this can create accessibility concerns and cause problems viewing your webpage on a mobile device.

Insert Horizontal Rule inserts a horizontal bar to divide your content thematically. You should use this when you have a shift in topic within a page.

Special Items

CKEditor special formatting functions
CKEditor special items

These items allow for the insertion of some unique items. The two outlined items are Insert Special Character and Create Calendar.

Insert Special Character will allow you to insert common latin special characters and currency denotations.

Create Calendar will create a calendar widget within your page. This is useful if you want to manage an upcoming events page for your site.

Text Formatting

CKEditor text formatting functions
CKEditor text formatting options

These functions are used to apply (or remove) formatting from your text in the rich text editor.

The dropdown is the Styles menu which contains pre-defined styles for the currently highlighted element. The other options are (from left to right):

  • Remove formatting
  • Bold
  • Italic
  • Underline
  • Subscript
  • Superscript
  • Numbered List
  • Bulleted List
  • Decrease Indent
  • Increase Indent
  • Block Quote

For more on these functions see Formatting Text in the RTE.

Links

CKEditor linking functions
CKEditor functions for hyperlinks

These functions are used to insert anchors and hyperlinks into your pages.

These functions from left to right are:

  • Link
  • Unlink
  • Anchor

For more on these functions see Managing Links in the RTE.

Formatting Text in the RTE

In this section, we will discuss the Text formatting options available within the RTE.

All formatting is done via the formatting options highlighted in the image below.

Formatting options highlighted in CKEditor

  • Options for customizing the font, font size, and font colours are not available. This is so that formatting remains consistent between various subsites and maintains a similar look and feel.
  • Remember: If everything is highlighted, then nothing stands out.
  • Best practices suggest that a maximum of three font sizes per page is best.

Style options via Styles dropdown

The Styles dropdown highlighted
The Styles dropdown item

This is the primary source of applying pre-defined styles to your text. Some content elements such as lists or tables have additional style options appear when selected.

For a full breakdown of styles available, see Pre-defined styles page.

Bold, Italics, Underline, and Script Characters

Applying basic formatting (b​old, italic, underline, subscript, superscript) to your text is simple. Simply highlight the text you want to change and click the appropriate formatting button shown below.

Removing this formatting is as simple as placing the insertion point anywhere within the formatted text and pressing the appropriate formatting button again. Alternatively, you can highlight the text to remove the formatting from and click either the formatting option you wish to remove or the "Remove Format" button if you wish to remove all styles.

The bold button highlighted
The bold formatting button (Ctrl + B)
Italic button highlighted
The italic formatting button (Ctrl + I)
Underline button highlighted
The underline formatting button (Ctrl + U) 
The subscript button highlighted
The subscript formatting button
Superscript button highlighted
The superscript formatting button

Lists and Indents

There are two forms of list: ordered (or numbered) lists and unordered (or bulleted) lists. List and indents are very closely related. If you press the indent button while creating a list it will allow you to create a sublist below the previous list item.

While creating a list, pressing the enter key will add another item to the list. Pressing enter a second time will terminate the list and return you to editing a paragraph.

Creating a list

Step 1 - Place your cursor where you want to insert your list or on a line that you want to become a list item

A block of text with insertion point

Step 2 - Press the appropriate list button

Button for creating a numbered list is highlighted
Create a numbered list with this button.
Button for creating unordered list is highlighted
Create a bulleted list with this button.

Step 3 - Enter your list text

List of two items created after pressing list button

Creating a sublist

Step 1 - Create parent list item and press enter at the end of the line

An empty list item is created

Step 2 - Press the Increase Indent button

Increase Indent button is highlighted

Step 3 - Change list type (if sublist should be of a different list type)

Button for creating a numbered list is highlighted
Create a numbered list with this button.
Button for creating unordered list is highlighted
Create a bulleted list with this button.

Step 4 - Edit the sublist as you would a normal list

A sublist being created

Step 5 - Press ENTER twice to go back to editing your list or press the Decrease Indent button

Decrease indent button is highlighted.

Completed list

Indents

Text can be indented as well. Note: This will indent the entire text block and not just the first line.

To create indented text, place your index anywhere in the block of text you want to indent and press the indent button. This can be indented up to 4 times. You can go back one indent level by pressing the Decrease Indent button.

This text is indented.

New Lines

Hitting the Enter key will start a new paragraph. If you press CTRL + Enter this will insert a line break without starting a new paragraph.

This is a paragraph.

This is also a paragraph.
This is a new line in paragraph #2.

Pre-defined Styles in the RTE

This page outlines the appropriate usage of the pre-defined styles in the RTE.

For a full visual guide of the appearance of each of these items see Style Appearance Cheatsheet.

Text Styles

Headings

There are currently 10 heading types listed in the Styles dropdown.

  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Fancy H2
  • Fancy H3
  • Fancy H4
  • Fancy H5
  • Fancy H6

Syntactially Heading 2 is the same as Fancy H2, Heading 3 is the same as Fancy H3, and so on. Headings must be used in a hierarchical syntactical fashion and not used to achieve a specific appearance. When used correctly this will improve search engine results and will make your pages more accessible. See Accessible Text, Headings and Documentation for more information proper heading usage.

Featured Text

This is intended to be used when you wish to have a pull-quote within your text or to draw attention to a specific block of text.

Address

The address style has a very specific purpose. It should only be used when providing contact information for a certain page, it should not be used to describe a postal address unless that address is part of the contact information.

Example

This page maintained by: UTM I&ITS
CCT Building, Room 3133
3359 Mississauga Road
L5L 1C6

Preformatted Text

This styles allows you to post your text in a plain, fixed-width font. Spacing and line breaks are preserved exactly as given.

Block Quote Styles

There are two Block Quote styles that appear in the Styles dropdown. These are Large Quote and Person.

Large Quote

This can be used to give more emphasis to a block quote by increasing the font-size.

Person

This is used within a block quote to acknowledge the individual being quoted.

Red

This style can be used to draw attention to a specific section of text.

Computer code

This style should be used when you wish to have some example of programming code in your pages. In general, this style will be very uncommon in usage.

Deleted text

Use this style concurrently with Inserted Text when you want to acknowledge a change in text. This denotes the portion removed.

Example

In the following example we are acknowleding a change in a date and the removal of an agenda item:

The next meeting is July 29th August 5th. The agenda is as follows

  • Meet up
  • Discuss changes
  • Bring forth problems
  • Vote for next meeting time

Inserted text

Use this style concurrently with Deleted Text when you want to acknowledge a change in text. This denotes the portion being updated or added.

See the example in Deleted text.

Cited work

Use this on the title of a book, a song, a movie, or other work. For example: Fahrenheit 451 by Ray Bradbury.

List Styles

Numbered List Styles

Upper Roman

This style allows you to use uppercase Roman numerals for your numbered list (I, II, III, IV, V, etc.).

Lower Roman

This style allows you to use lowercase Roman numerals for your numbered list (i, ii, iii, iv, v, etc.).

Lower Alpha

This style allows you to use lowercase alphabet characters for your numbered list (a, b, c, d, e, etc.).

Spaced Ordered Default

This is the same as the default numbered list but it places additional spacing between list items.

Spaced Upper Roman

This is the same as the Upper Roman style but it places additional spacing between list items.

Spaced Lower Roman

This is the same as the Lower Roman style but it places additional spacing between list items.

Spaced Lower Alpha

This is the same as the Lower Alpha style but it places additional spacing between list items.

Bulletted List Styles

Arrow List

This style changes the display of the bullet points into triangular arrows.

Checklist

This style changes the display of the bullet points into checkmarks.

Spaced Unordered Default

This style is the same as the default bulleted list but places additional spacing between list items.

Spaced Arrow List

This style is the same as the Arrow List style but places additional spacing between list items.

Spaced Checklist

This style is the same as the Checklist style but places additional spacing between list items.

Table Styles

Note: Table styles will only work if the table is set to Styled Table from the Styles dropdown.

Styles applied to the whole table

Styled Table

This style is used to apply formatting to your table cells. Additionally it adds padding to the table cells and displays the table headers in a different colour to better distinguish them. This should be used for all data tables where possible.

Styled Center Table

This style is identical to Styled Table but it also centers the table in your content with equal spacing to either side.

Styles applied to elements within the table

Centered Cell

This aligns the text in the cell to be centered vertically and horizontally.

Centered Top Cell

This aligns the text in the cell to be centered horizontally and anchors the text to the top of the cell. This is useful when you have one cell that causes the row to become very tall.

Top Aligned Cell

This anchors text to the top of a cell but leaves it left-aligned. This is useful when you have one cell that causes a row to become very tall.

Image Styles

Note: While images styled with Small Framed Left, Small Framed Right, and Small Framed Center appear smaller they still use the full-scale image which may cause them to slow the loading of your page. See [image best practices link] for more information.

Left

Places the image to the left. The image size will be unaffected. Text will wrap around the image.

Right

Places the image to the right. The image size will be unaffected. Text will wrap around the image.

Center

Centers the image.The image size will be unaffected. Text before the image will appear above. Text after the image will appear on a new line below the image.

Framed Left

Places the image to the left and frames the image with a white border. The image size will be unaffected. Text will wrap around the image.

Framed Right

Places the image to the right and frames the image with a white border. The image size will be unaffected. Text will wrap around the image.

Framed Center

Centers the image and provides a white border around the image. the image size will be unaffected. Text before the image will be above and text after the image will appear below.

Small Framed Left

This style is the same as Framed Left but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Left images.

Small Framed Right

This style is the same as Framed Right but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Right images.

Small Framed Center

This style is the same as Framed Center but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Center images.

Style Appearance Cheatsheet

All of the following items are intended as examples of the styles from the style dropdown. Various styles may appear slightly different between different themes. Descriptions are found at Pre-defined Styles in the RTE.


This is a standard paragraph.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Fancy H2

Fancy H3

Fancy H4

Fancy H5
Fancy H6

Featured Text

Preformatted text
Address

Red

Computer code

Deleted text

Inserted text

Cited work

Block Quote

Block Quote

Person

Large Quote


  1. Standard Numbered List
  2. Standard Numbered List
  3. Standard Numbered List
  1. Upper Roman
  2. Upper Roman
  3. Upper Roman
  1. Lower Roman
  2. Lower Roman
  3. Lower Roman
  1. Lower Alpha
  2. Lower Alpha
  3. Lower Alpha
  1. Spaced Ordered Default
  2. Spaced Ordered Default
  3. Spaced Ordered Default
  1. Spaced Upper Roman
  2. Spaced Upper Roman
  3. Spaced Upper Roman
  1. Spaced Lower Roman
  2. Spaced Lower Roman
  3. Spaced Lower Roman
  1. Spaced Lower Alpha
  2. Spaced Lower Alpha
  3. Spaced Lower Alpha

  • Bulleted Default
  • Bulleted Default
  • Bulleted Default
  • Arrow List
  • Arrow List
  • Arrow List
  • Checklist
  • Checklist
  • Checklist
  • Spaced Unordered Default
  • Spaced Unordered Default
  • Spaced Unordered Default
  • Spaced Arrows
  • Spaced Arrows
  • Spaced Arrows
  • Spaced Checklist
  • Spaced Checklist
  • Spaced Checklist

Plain Table  Plain Table 
1 2
3

4

 

Styled Table Styled Table
1 2
3

4

 

Styled Center Table Styled Center Table

Centered Cell

This cell has multiple lines

This cell has multiple lines

This cell has multiple lines

Centered Top Cell

This cell has multiple lines

This cell has multiple lines

This cell has multiple lines

Top Aligned Cell

This cell has multiple lines

This cell has multiple lines

This cell has multiple lines

 

Zebra-striped Zebra-striped
Zebra-striped Zebra-striped
Zebra-striped Zebra-striped
Zebra-striped Zebra-striped
Zebra-striped Zebra-striped


 

Centered Zebra-striped Centered Zebra-striped
Centered Zebra-striped Centered Zebra-striped
Centered Zebra-striped Centered Zebra-striped

 

Images and Media In The RTE

This page provides step-by-step instructions (with pictures) for inserting images and media into your content.

Jump to:

Inserting Images

The steps below will outline the process of adding a new image to your content. If your image has already been uploaded previously, you can skip from step x to step y.

  1. Click on the Image button
  2. In the image dialog window, click on the button labelled Browse Server. This will open a pop-up file browser in a new window.
  3. Select the folder you want the image to be uploaded to (or the location of the existing image if it has been previously uploaded) on the left-hand side in the Navigation window.
  4. Click on the Upload button in the upper left-hand corner on the file browser menu bar.
  5. Click on the Choose File button.
  6. Select your image and click open.
  7. Click on the button labelled Upload in the bottom of the upload dialog.
  8. Select your image file from the listing window in upper right quadrant.
  9. Click on the Insert file button with the green checkbox in the file browser menu bar. This will close the file browser window and fill in the path to your file in the editor field.
  10. Enter your Alternate text. For more on alternate text see Alternate Text.
  11. Press the OK button at the bottom of the image dialog window.
  12. Your image should now appear in the editor window.

In Images

Step 1 - Click on The Image Button

A screenshot of the CKEditor image button

Step 2 - Click on the Browse Server button

Browse button

Step 3 - Select folder to contain (or containing) image

Arrow pointing to folder navigation in IMCE

Step 4 - Click on Upload button on file browser menu

Upload button in IMCE highlighted in red

Step 5 - Click on Choose File

Choose file button circled in red

Step 6 - Choose your file

Choose File dialog on Windows 7
Open File Dialog on Windows 7
Choose File dialog on OSX
Open File Dialog on OSX

Step 7 - Click on the Upload button in the dialog

The upload button highlighted

Step 8 - Select your image in the file browser

An arrow pointing at selected file

Step 9 - Click on Insert file button

Upload button circled in red

Step 10 - Enter your alternate text

Alternative text highlighted in red

Step 11 - Click OK

The OK button circled in red

Step 12 - Your image should now appear in the editor window

CKEditor with an image in the editor

Wrapping Text Around Images

Step 1 - Select your image by clicking on it

An image is selected in the RTE

Step 2 - Click on the Styles dropdown button

'Left' being chosen from styles dropdown

Step 3 - Choose your style from the Object Styles section

For more information available image styles see the Image Style Cheatsheet.

An image on the left with text wrapping around it.
An image with the 'Left' style applied.

Inserting Media

You can embed media such as videos into your pages through the RTE as well. The embed must be using the <object> tag, if it is using the <iframe> tag, it will be stripped out by the editor (see known issues). You can use the Old Embed Code Utility to generate these embeds for YouTube videos.

To embed media click on the Embed Media button.

The location of the CKE media embed button

Paste your embed code into the textarea in the pop-up dialog window and press OK.

The media embed textarea

Image Style Cheatsheet

This page is designed to demonstrate the various image layouts that can be achieved using the RTE. Text is shown to demonstrate how text will wrap with the image. For each example, the image is inserted before the first word in the first paragraph. Plain Image refers to an image being inserted with no styling options added.

Additionally, images can be wrapped in a figure tag with a caption via a figure tag and caption via a figcaption tag. This currently requires modification of generated HTML via the Source view.

Plain Image

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Left

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Right

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Center

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Left

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Right

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Center

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.


 

To demonstrate the "Small" variants, a larger image will be used.

Plain Image (Larger Example)

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Left

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Right

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Center

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure Example

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure with class 'left'

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure with class 'right'

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Managing Links in the RTE

This page outlines how to create new links in your content, edit existing links, and other linking features of the Rich Text Editor.

Jump to:

Link Types

Within the rich text editor there are 5 types of links you can easily create.

  1. Internal links which link to other pages on your subsite. ​
  2. External links which link to pages on other sites, including subsites other than the one you are currently editing.
  3. E-mail links which create a link to send e-mail to a specific e-mail address.
  4. File links which link to a file that you upload to your site.
  5. Anchor links which link to a specific position within a page.

Internal Links

These are links that are within your own Drupal site.

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the page title.

A section of highlighted text
Text with the insertion point placed before "Anchored heading"

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Choose Internal path for the Link Type

Selecting internal path from the link type dropdown

Step 4 - Enter the title of the page you wish to link to

When you begin typing the title of the page you should see an auto-complete list of titles below the Link field. If you see the title you are looking for click on it.

Typing a sample page name

Step 5 - Click OK

When you have selected a title, the field will complete itself with a (node/##). If you can see the full title and don't see the (node/##) section, it likely means that it did not find your page correctly.

If you see the (node/##) portion press OK and your text will be linked.

Filled in form with OK button highlighted

The highlighted text is now linked

External Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the URL you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select URL from the Link Type dropdown

URL highlighted on the Link Type dropdown

Step 4 - Enter URL in the URL field

A link to google.ca being created

Step 5 - Click OK button

OK button highlighted in link dialog

E-mail Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the e-mail address you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select E-mail from the Link Type dropdown

E-mail being selected from Link Type dropdown

Step 4 - Fill in E-mail address and optionally add a default title or body

The e-mail link form completed with sample data

Step 5 - Click OK button

OK button highlighted on link dialog

File Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the URL you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select URL from the Link Type dropdown

URL option being selected from Link Type dropdown

Step 4 - Click Browse Server button

Browse Server highlighted on link dialog

Step 5 - Locate the file you want to link to

An arrow points at a file

Step 6 - Press Insert File button

The insert button is highlighted in the IMCE window

Step 7 - Press OK button

OK button is highlighted on link dialog

Anchor Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be a pound sign followed by the ID or anchor name. For example: #anchor-links

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select "Link to anchor in the text" from the Link Type dropdown

Link to anchor in the text option being selected from Link Type dropdown

Step 4 - Choose anchor or ID to link to

An anchor being chosen by anchor name

Step 5 - Click OK button

The OK button highlighted on the link dialog

Creating an Anchor

Step 1 - Place the insertion point where you wish to place the anchor

Note: the insertion point is placed before "Anchored heading"

Insertion point before a heading

Step 2 - Click Anchor button

Anchor button is highlighted on CKE toolbar

Step 3 - Enter a name for the anchor

An anchor of anchor-link-example being created

Step 4 - Click OK button

The OK button highlighted on anchor properties dialog

Screenshot showing a flag where the anchor is inserted
A flag will appear where the anchor was inserted.

Linking to an anchor on a different page in the same subsite

Suppose you have an anchor in different page on your subsite that you wish to link to from your current one. You will need the following information in order to create this link:

  • The node ID of the other page (node/###)
  • The anchor name

When creating your link use the following settings:

  • Choose URL from the Link Type dropdown
  • From Protocol choose <other>
  • Set the URL field to be your subsite (if you have a www.utm.utoronto.ca/subsite URL), the node path, followed by an octothorpe (#), followed by the anchor name.
    For example, /subsite/node/10#my-anchor

A link to an anchor on a different page

Updating Existing Links

Click anywhere in the link you wish to update. Click the link button. Edit the link to the new location. Click ok.

Changing an existing link

Step 1 - Click anywhere in the link to be modified

A link with the insertion point in the middle.

Step 2 - Click the link button

Link button highlighted on the CKEditor toolbar

Step 3 - Update the URL, anchor, e-mail address or internal link to the new location

The URL being updated in the link modal window

Step 4 - Press OK

OK button highlighted in link modal window

Removing an existing link

Step 1 - Click anywhere in the link you wish to remove

A window with an insertion point in the middle of a word

Step 2 - Click the Unlink button

The unlink button highlighted on the CKEditor menu bar

The text from Step 1 with the link removed

The Target and Advanced Tabs

You may have noticed there are two other tabs along the top: Target and Advanced. These options are available for all link types, but may have some accessibility impact. See Accessible Navigation and Links for more on these impacts.

Target

The target tab's options
The target tab's available options.

These settings in this tab allow you to change the behaviour of how the link is opened. In general, you should just use the default. Most of the options are disabled or will provide unexpected behavior. It is recommended you only use the following:

<not set>
Recommended. Default option. Loads in the same window.
Same Window (_self)
Loads in the same window. Same as default.
New Window (_blank)
Opens in a new window. Note: This has accessibility concerns.

Advanced

The advanced tab with some fields filled in
The advanced tab with an advisory title set.

These settings allow you to enter additional metadata about your link. In general, you shouldn't need to change any of these settings. If you do need to change any of these settings, the following are the important ones:

Id
A unique identifier for the link element in the document (id attribute).
Language Direction
The direction of the text: left to right (LTR) or right to left (RTL) (dir attribute).
Language Code
The language of the link element specified according to RFC 1766 (lang attribute).
Advisory Title
The text of the tooltip that is shown when the mouse cursor hovers over the link (title attribute).
Advisory Content Type
The content type of the link (type attribute).
Linked Resource Charset
The character set of the linked resource (charset attribute).
Relationship
The relationship between the current document and the link target (rel attribute).
The most common use of this would be to use the value "nofollow"

Accessibility

See Creating Accessible Hyperlinks

Spell Check As You Type

When editing, you can turn on automatic spell checking by selecting Enable SCAYT from the Spell Check As You Type menu item. It is denoted by an ABC icon with a checkmark. Once enabled, you can even spell check different languages.

Spell Check As You Type menu item
The Spell Check As You Type menu item

Clicking on the Check Spelling menu option will bring up a full spell check pop-up with a grammar checker and a thesaurus. Unfortunately, the grammar checker and thesaurus are not available when the language is set to Canadian English.

Editing Content

While logged into your site on the edit server, navigate to your page (or locate it via the Find Content options). If it is a page you created you should see a set of tabs along the top of the page content just below the page title. See figure 1.

Clicking on the Edit tab will allow you to edit the contents of the page in a similar format to how you originally created the page.

The edit tab on a basic page
Figure 1. A sample of a page while signed in. The location of the edit tab is visible.

Things to Note

  • If two users attempt to edit the same page simultaneously an error will be displayed when the second user attempts to save: "The content on this page has either been modified by another user, or you have already submitted modifications using this form. As a result, your changes cannot be saved." The second user will need to cancel and re-enter edit mode in order to make their changes.
  • If you navigate away from a page you are editing before clicking save, your changes will be lost.

Deleting Content

The golden rule of deletion in Drupal is:

All deletion is permanent.

If you choose to delete some content, please be aware that it will not be recoverable. Any time you delete something, you will likely be prompted to confirm your decision—please do not take this step lightly.

This applies to deletion of all content, be it your pages, files, menu items, webform data or anything else that can be deleted.

How Do I Delete a Node?

Deleting a node can be done from the edit screen of any content. At the bottom of the edit screen you will see a button labeled Delete next to the Save and Preview buttons.

The buttons at the bottom of the edit screen
The buttons at the bottom of the node edit screen.
Deletion confirmation message
Deletion confirmation message.

Managing the Menu

To manage your site's main menu, click on the Menus link in your admistrative toolbar and click on the list links operation. From this screen you will be able to add new links, edit or delete existing links, disable/enable links, and reorder existing links

Arrows pointing at the "Menus" and "List links" links
Figure 1. Clicking on the Menus link results in this page. Clicking on list links will show all links in your main menu. See full-sized image.
The main menu links list
Figure 2. The list of menu links for a sample site. View full-size image.

Add link

There are two ways to get to the link creation screen. You can click on the Add link link after selecting Menus from the administrative toolbar in the Main Menu row, or from the link listing page you can select the Add link link from the top of the page. This allows you to add a link to any URL, whether within your site or elsewhere.

Add link link is highlighted on the menu management pageThe add link item is highlighted on the Menus page
Figure 3. The two add link locations. See full-sized image 1 and full-sized image 2.

Once you have clicked on one of the two links you will be presented with the link creation form. This form takes a title to be displayed for the menu item and the path. The title does not have to be the same as the page title you are linking to, but this is recommended. This should be a relative path if the link is within your subsite, or an absolute link to a public location otherwise. Optionally, you may enter a description which will be displayed if the mouse hovers on the link.

Note: If you enter the URL alias of a page into the path it will be stored as node/### where ### is the node's ID when the link is saved. This is normal. When the system creates the menu on your pages it will automatically use the alias so do not worry if you see node/### for your link path in the edit screen.

Once you have filled in the required items and chosen a parent link, click Save.

The menu link creation screen
Figure 4. The menu link creation screen. View full-sized image.

Alternatively, you can add a page to the menu when creating the page in the page's content settingsSee Content Settings for more on this method.

Editing and deleting

In figure 2 you can see that each row has an edit operation and a delete operation link. Clicking on edit will bring up a form resembling figure 4 with the selected link's details filled in. From the edit screen you can either update the values and save the link.

Note: Deleting a link is not the same as deleting a page. These menu links exist independently of the pages they point to. However, deleting a page will remove or hide any menu links pointing to it.

Enabling & disabling links

If the Enabled checkbox is unchecked, the link will not appear on your menu, but will remain accessible in your administrative interface. This is useful if you want to temporarily remove a link to a specific page, for example, if you created a link to a page that is published but you don't want to actively advertise yet. It will not save the altered state of this checkbox until you click Save configuration while on the list page, or Save while editing or adding a specifc link.

Note: A parent link may display an icon indicating that is has child links even if the child links are not enabled. If you will not need to re-enable the link later, it's best to delete it.

Reorder links

Click and drag method

You can click and drag on the quad-directional arrow next to any menu link and drag and drop it it into the order you want within the list. All items of the same level will have the same level of indent on the left.

Demonstration of quad arrow movibility
Figure 5. You can click and drag this quad-directional arrow up and down. Dragging to the right will make it child to the previous line's link. View full-size image.

You can also make your navigation link a child to an existing link via this method. To make the link a child to another link, simply click and drag the quad-directional arrow beneath the item you want to be the parent and then slide it to the right until it is a single indent lower than the page you wish to be the parent.

Shows a link moved to be a child
Figure 6. This demonstrates a link being moved to be child to another link. In this case, a link titled Parturient montes becomes child to a link titled Child PageView full-size image.

This is the only way to set child links within the menu management page. You can, however, change the parent of a page's link from the content settings section for any given page.

Row weight method

The location of the show row weights link
Figure 7. The location of the show row weights link. Full image.

Clicking on the Show row weights link exposes the row weights and removes the quad-directional arrows. This allows you to sort your pages by numerical weight. Parent-child relationships will be unaffected by this method and links will only sort within the same depth level. For example, all top level links will only sort with other top level links.

In this method, links are sorted within the same depth level from the lowest number (-50 / top) to the highest number (50 / bottom). If two links have the same weight they will be sorted alphabetically when the Save configuration button is clicked.

The menu listing displaying row weights
Figure 8. The menu links listing with row weights displayed. View full image.

Best Practices

  • Delete links you no longer need instead of leaving them disabled for an indefinite amount of time.
  • Keep the link titles short but representative of their destination. Use description to clear ambiguities.
  • Put the most important links first in a category.
  • If a category has many items, sorting alphabetically will help the user find the link easier.

Managing Blocks

The Block Administrative Screen

An example of the block administrative screen
Figure 1. A sample of the block administrative screen. See full-sized image.

In the screenshot in figure 1, the tabs along the top allow you to see the block configuration for each available theme. Below this, the blocks are divided into the regions in which they appear. In this example there is a single call-to-action that appears in the Right Sidebar region.

Block Configuration Settings

Clicking on the configure link associated with a given block will take you to the block configuration settings page for a given block.

Block title

Entering a title in this field will set the title of the block. If you enter a title here for a call to action block, it will override the displayed title for your call to action.

Region Settings

In the region settings section you can set a region for this block to appear in from the dropdown list. The theme labelled "(default theme)" is the theme that is currently in use on your site. See figure 2 for an example of the region settings section for a block.

Block region settings for a call to action
Figure 2. The block region settings for a call to action. View full-size image.

Block Visibility

Below the region settings, you will find the Visibility settings. This is where you determine which pages this block will appear on (or won't appear on). In general you should only ever need to use the Pages tab (as seen in Figure 3).

Selecting "All pages except those listed" will allow you to blacklist pages you do not want the block to appear on. Selecting "Only the listed pages" will allow you to whitelist pages you do want this block to appear on.

Whether you are whitelisting or blacklisting paths the rules are the same.

  • Items in the list are added one per line.
  • There is a special term to refer to the home landing page that you can enter: <front> (as seen in Figure 3).
  • Any page path you wish to add to the list can be referenced by the page path. For example this page would be: documentation/drupal-user-guide/managing-blocks
  • A wildcard (*) can be used to represent any arbitrary portion of a path. For example: all pages in this guide could be referenced as: documentation/drupal-user-guide/* since they all start with documentation/drupal-user-guide/

Additionally, you may wish to show a block only on a specific content type (only on news pages or webforms for example). You can achieve this by going to the Content types tab seen on the left in Figure 3 and selecting only the content types you want this block to appear with.

The block visibility settings
Figure 3. Block visibility settings. View full-sized image.

URL Aliases

What are URL aliases?

A URL alias is a clean path for your pages. It converts the node's node/### path into something more user-friendly. It determines the portion of the URL after your site's base path.

For example: The URL alias for this page is: documentation/drupal-user-guide/url-aliases

Creating a URL alias for a page

You can create an alias one of two ways. You can either create or edit one when you are creating your content, or you can create or edit one later by going to the URL Aliases option from your administrative toolbar.

URL Aliases Toolbar Option

Clicking on URL Aliases from the administrative toolbar will bring you to a listing of all aliases for your site. This page allows you to search your aliases, add new aliases, and modify or delete aliases that are incorrect.

Note: As with all deletion in Drupal, deletion of aliases is permanent. Be careful.

A sample of a URL alias listing page
Figure 1. A sample of a URL alias listing page. View full-size image.

Clicking on Add alias near the top of this page will allow you to create a new alias for an unaliased page. In order to do this you need to provide the Existing system path (the node/### format) and the Path alias that you want to use to refer to the page. Clicking Save will create the new alias.

Alias creation
Figure 2. The alias creation screen. View full-sized image.

URL Aliases during content creation

See URL Alias in Content Settings for creating an alias during creation.

Best Practices

  • Aliases should never contain a slash at the start or end
  • Aliases should never contain a space
  • Aliases should only contain lower case letters, numbers and hyphens
  • Aliases must be unique
  • Aliases should not start with any subsite name followed by a slash
  • Aliases should only ever be relative paths

Accessibility for Ontarians with Disabilities Act (AODA)

What is the Accessibility for Ontarians with Disabilities Act (AODA)?

The Accessibility for Ontarians with Disabilities Act is designed to provide standards on accessibility is designed to provide framework of standards in accessibility on accessibility in all areas of daily life. With respect to websites, all Universities in Ontario must comply with the Web Content Accessibility Guidelines (WCAG) 2.0 Level A by Jan 1, 2014 and Level AA (except for guidelines 1.2.4 and 1.2.5) by Jan 1, 2021.

The omitted guidelines deal with live captioning of video (1.2.4) and described video (1.2.5).

What is the difference between levels A, AA, and AAA?

Level A

This level defines guidelines that MUST be done. Failure to meet these guidelines will result in some group of users being excluded from accessing your content. This is the minimum requirement for accessibility.

Level AA

These are guidelines that SHOULD be done. Failure to meet these guidelines will result in difficulties for some groups of users in accessing your content.

Level AAA

These are additional guidelines that CAN be done to improve accessibility. They are not required, but will improve the overall usability of your site.

  • This site is designed to comply with AODA requirements for websites
  • For content managers, it means that every image and multimedia item that you add to this MUST have meaningful descriptive text that accompanies it
  • To make sure that happens, we’ve designed this system so that if you add an image, it won’t accept it until you have added descriptive text
  • It must be DESCRIPTIVE — that doesn’t mean lengthy, but if it’s a picture of a car, don’t type “car”; type “blue car driving past Instructional Building”. This is what will be read by screen reader software, so it has to be useful text.
  • The same rule applies to multimedia — describe the video, podcast, slideshow, etc

What are the compliance dates?

Date Compliance Level
January 1, 2014 WCAG 2.0 Level A
January 1, 2021 WCAG 2.0 Level AA

This means that all UTM sites must be, at a minimum, WCAG 2.0 Level A compliant by January 1st, 2014.

What steps can I take to make my site compliant to the legislation?

Some tips on maintaining compliance are found in this guide. While not an exhaustive list, these tips should help with some of hte most common problems.

Where can I get more information?

See the section on Accessibility Resources.

Accessible Images and Multimedia

Image and Multimedia Tips

  1. For all images, ensure that you have sufficient alternative text or alt-text.
    • Alt-text should convey all the essential information conveyed by an image / the purposes of the image to someone who is unable to see the image;
    • It should not begin with "An image of...", "a picture of...". Simply provide a description of the image as presented; and,
    • If an image contains text that is imporant, ensure that the text is captured by the alt-text or otherwise available in text near by the image.
  2. Any videos posted to your site from YouTube or some other method should have captions available. Below are examples of commonly used tools for captioning videos:
  3. Avoid images of text.
    • When the image is zoomed to 200% or more, the text will become jagged and hard to read, text itself can be scaled cleanly to any size;
    • Search engines will not be able to find the text within the images so people will not be able to find your content; and,
    • If an image contains important text, always put the text from image in the alt-text for the benefit of sight-impared individuals.
  4. It is recommended that if you are using images in your content that will have text wrapping around them that you place the image to the right.
    • This will help some users with cognitive disabilities locate the start of the next line easier.

Alt-Text Example for Images

Figure 1
Professor Patrick Gunning and doctoral student Eugenia Duodu talking by chemistry fume hood

Consider figure 1. If the intended purpose of the image is...

  • ... to have an image depiciting scientists purely for visual appeal.
    • The following alt-text would be appropriate: "Two scientists in discussion".
  • ... to show specific individuals or a specific focus.
    • The following would be appropriate: "From left-to-right: Eugenia Duodu and Patrick Gunning".
  • ... to show the actual contents of or the action within an image.
    • The following would be appropriate: "Professor Patrick Gunning and doctoral student Eugenia Duodo talking by a chemistry fume hood."

Accessible Text, Headings and Documentation

Tips for Creating Accessible Text, Headings and Documentation

  1. Avoid writing in all capitals. This slows down reading speed and makes it difficult for some users to read your text. You may be trying to emphasize something using all-caps, but the end result is making that item harder to read.
  2. All headings should be used hierarchically. They should not be used to obtain a certain visual style.
  3. Headings should only go down one level, or back up to a previous, higher level.
  4. While Heading 1 (H1 HTML tag) may be used multiple times within a page, it is advised that you restrict this to only the page title. As such, the heading 1 option has been removed; existing H1 tags will remain until the next time a containing page is saved.
  5. Some users using assistive tools may be navigating your site by grabbing a list of headings. If your page is using bolded text instead of an appropriate heading tag, it will not be picked up in these lists.
  6. Using headings appropriately will help give search engines a better picture of how your site is structured and will improve your position within search results.
  7. When describing things use multiple descriptors. Try to avoid describing by only size, colour and shape.
    • For example: "Click the button labelled 'Submit' at the end of the form." instead of "Click the large button."
  8. You must have accessible alternatives of any document you post (Word documents, Power Point presentations, PDF files, etc.).
  9. Avoid capital letters, spaces and special characters in file names. Use a dash ( - ) or underscore ( _ ) in place of spaces.

Example of Proper Heading Structure

The best way to think about heading structure is probably to consider headings like sections of an essay, an assignment, or a legal document.

For example:

1. Page title (Heading 1) [This is automatic]
    1.1. Heading 2
    1.2. Heading 2
        1.2.1. Heading 3
            1.2.1.1. Heading 4
            1.2.1.2. Heading 4
                1.2.1.2.1. Heading 5
        1.2.2. Heading 3
        1.2.3. Heading 3
            1.2.3.1. Heading 4
        1.2.4. Heading 3
    1.3 Heading 2
[ ... ]

As you can see from the above, a heading never decends more than a single level at a time, but it can ascend more than one level at a time to switch topics.

Accessible Navigation and Links

Navigation and Link Tips

  1. Try to give all your pages a navigation link in the main menu (where it makes logical sense).
    • This will generate the breadcrumb trail that will allow users to go back to parent pages if they are on the wrong page.
  2. Avoid having links open in a new window.
  3. Avoid link text such as "click here"; instead, try to use text that would make sense out of context.
    • Bad: To get more information click here. In this example, "click here" is meeaningless out of context.
    • Good: Get more information here. In this example, "more information here" could possibly make sense out of context of the paragraph it is in.
    • Great: Get more information on accessibility. The link text here makes sense when out of context with the rest of the page as meaning can be derived from the linked text.
  4. Enter a title for your links in the "Advisory title" field under the "Advanced" tab when creating a link.
    • See Example 1 on this page for an example of this field.
  5. If you are opening the link in a new window, ensure that you make it clear that the link will open in a new window.
    • This can be done by repeating the text of the link in the Advisory Title field described above and then stating that the link opens in a new window.
    • See Example 1.

Examples

 "opens in a new window"
Example 1 - The advisory title including "opens in a new window"

 

Accessible Tables

Table Tips

  1. Avoid tables for non-tabular data (i.e. Don't use tables for layouts).
    • Screen readers will read cells left to right, top to bottom. See Example 1.
    • If you're using a table for non-tabular data, the cells should make sense when read in the order outlined in Example 1.
  2. For tabular data, you should always include a header row or column. Within the context of the RTE, this is defined when creating a new table.
    • See Example 2 for an example of a table with a header row.

Examples

Example 1

1 2 3 4
5 6 7 8
9 10 11 etc...
Example 1 - Table read order.

Example 2

Header cell 1 Header cell 2 Header cell 3
Data cell 1 Data cell 2 Data cell 3
Data cell 4 Data cell 5 Data cell 6
Example 2 - Table with headers

Accessible Webforms

Webform Tips

  1. Try to use the appropriate field type for each piece fo data you are collecting.
    • For example, use the email field when capturing an e-mail address instead of a text field.
    • It is recommended that phone numbers (and if necessary, student numbers) should be captured using a text field. This is due to how some browsers render the number field type making mistakes easy to make.

Accessibility Resources

Tools

aChecker

http://achecker.ca

  • Provides a report based on WCAG 2.0 compliance rules.
  • Only checks a single page at a time.
  • Can provide false-positives in some cases as it does not check against items loaded from JavaScript or certain layout options.

Webaim WAVE tool

http://wave.webaim.org

  • Useful for getting a rough idea of the accessibility level of your site.
  • Subject to similar problems as those identified with aChecker.

Contrast checkers

http://snook.ca/technical/colour_contrast/colour.html

http://juicystudio.com/services/luminositycontrastratio.php

http://webaim.org/resources/contrastchecker/

  • Check the contrast between foreground and background colours.

Amara

http://www.amara.org/en/

  • Tool for creating captions for YouTube video.

CapScribe

http://www.inclusivemedia.ca/services/capscribe.shtml

  • Tool for creating captions for video files.

Other Resources

Accessibility for Ontarians with Disabilities Act (AODA) Office

University Office for AODA questions and concerns.

http://www.aoda.utoronto.ca

Council of Ontario Universities: Accessible Campus

Explains the responsibility of accessible websites in plain terms.

http://www.accessiblecampus.ca/administrators/iasr/information-communications/section-14/

W3C - Understanding WCAG 2.0

Provides a breakdown of each of the criteria for all three levels (A, AA, AAA).

http://www.w3.org/TR/2010/NOTE-UNDERSTANDING-WCAG20-20101014/

Understanding Web Accessibility eCourse

Goes through the accessibility guidelines and gives tips on how to correct them. 

http://courses.idrc.ocad.ca/go.php/1/index.php/p_course/1

Adobe Accessibility

Demos of creating accessible PDF files.

http://www.adobe.com/accessibility.html

https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

Accessibility in Office 2010

Shows how to check the accessibility of your Office documents.

http://office2010.microsoft.com/en-us/starter-help/accessibility-checker-HA010369192.aspx

Resources and Support

Getting Support

For questions related to:

  • Branding
  • Content
  • Navigation

Please contact UTM Marketing & Communications.


For technical support related to:

  • Bugs / errors displayed on the page
  • Display issues
  • Login issues
  • Adding or removing accounts
  • Request a new site
  • Request a non-public location to do a navigation overhaul
  • New site functionality
  • Turning on / off of certain features
  • Permanent redirects
  • Access to Google Analytics
  • Other technical problems

Please submit a trouble ticket to I&ITS via ServiceNow.

Additional items that can be requested

The following are items are available and would not require additional development:

  • Twitter Feed
  • Departmental contact block
  • Content type for showing off student papers
  • Additional Faculty & Staff Profile categories
  • Feature Image / Feature Box placement

Additional Resources

Ctrl+Alt+Drupal

Ctrl+Alt+Drupal
Ctrl+Alt+Drupal - a newsletter for those who control and alter Drupal sites at UTM

Ctrl+Alt+Drupal is a newsletter designed for UTM subsite content editors and is delivered to the Drupal user mailing list.

In each issue you will find:

  • Helpful tips to improve your website
  • Notices about upcoming training
  • News about new or upcoming features available to subsites
  • Scheduled maintenances
  • News that affects your Drupal sites

Past Issues

Google Analytics Campaigns

Google Analytics campaigns allow you to understand how you're acquiring your users and how they behave after arriving on your site.

There are three values that are required in order to track a campaign:

Campaign Name
This is the high-level name of your campaign. This should be the same across all mediums to group all of the results together. For example: 2017 Recruitment or Monthly Newsletter
Campaign Medium
This is the medium through which the campaign is being marketed. This would be the generalized method used. For example: social or email or paid ad or referral link
Campaign Source
This is the referrer. For example: may newsletter or mailing-list-name-l or departmental news article

You can create an analytics campaign right in the sharing bar. The campaign creation in the sharing bar is a simplified version of Google's URL builder. If you wish to use additional fields that are not located in the sharing bar, you should use the public link in combination with Google's URL Builder.

Note: You should never use this to get personally identifiable information. This is against the Analytics terms of service and is mentioned in the Analytics Best Practices.

Viewing Results

When signed into the Google Analytics site you can view your campaign data by going to Acquisition > Campaigns > All Campaigns.

Google Analytics Aquisition sidebar

More Resources

Known Issues

  • Settings required for eTokens cause the Rich Text Editor to not load in Internet Explorer. Please use an alternate browser such as Firefox or Chrome.
  • Media using an iframe embed is stripped out of the page. Please use the 'old embed code' if from YouTube. ( Old embed code generator )
  • Resizing within the File Manager is not currently working. The cause of the problem has been discovered and it will be corrected in an upcoming maintenance.