Creating a Program Page

• To Create A Program Page, you must select Content -> Add Content -> Program Page
  • This will bring up a blank canvas to edit
• Once in edit screen, you have the ability to edit the title, and the program acronym
• Select all affiliated degrees, and select a specialization if applicable (Ex: Co-op)

Editing A Program Page

• To edit a Program Page, you must select content, and find the page you want to edit
  • You can also search with title, or set the "Content Type" to "Program Page" and select "Filter" and find the page through this
• Once you have located the Program Page, select "Edit" to the right, under the "Operations" column

How to add other Content Types (Example: Employer, Career)

• At the bottom of the published page, you have the option to display possible careers and employers
  • To do this, search for the "Employer" or "Career" content type under the Content Tab, and insert the Program Acronym in an empty field. This will automatically add it to the page

How To Preview A Live Program Page

• Once you have published a Program Page, redirect to - https://preview-ugconthub.gtsb.io/ to find the page

Deleting A Program Page

• To delete a Program page, you must first find the edit screen for the page
• Once in the edit screen, scroll to the bottom and select the red "Delete" and confirm the deletion of the page

Creating a Basic Page

• To Create A Basic Page, you must select Content -> Add Content -> Basic Page
  • This will bring up a blank canvas to edit
• Once in edit screen, you have the ability to add a featured image - which will act as a banner
• You can select different widgets to add to the page depending on what you want to show
  • Example: Links Widget will display as a responsive image grid - which links and images on a page

Editing A Basic Page

• To edit a Basic Page, you must select content, and find the page you want to edit
  • You can also search with title, or set the "Content Type" to "Basic Page" and select "Filter" and find the page through this
• Once you have located the Basic Page, select "Edit" to the right, under the "Operations" column

How To Preview A Live Basic Page

• Once you have published a Basic Page, redirect to - https://preview-ugconthub.gtsb.io/ to find the page

Deleting A Basic Page

• To delete a basic page, you must first find the edit screen for the page
• Once in the edit screen, scroll to the bottom and select the red "Delete" and confirm the deletion of the page

*NOTE: Banners can be created now by inserting an image in the "Featured Image" section of a Program or Basic Page*​

• Creating a Banner Image​
• ​Editing a Banner Image​
• Removing a Banner Image​
• Displaying a Banner​
• ​Filtering Banner Images by Category on Specific Pages​
• Banner Block Spacing Issue​

Content Creators can create a site Banner with captions and a link. There can be multiple static banners that change every time the page is refreshed or they can be displayed as a slide show of up to 5 images. For properly displayed banner, the recommended image dimensions are 1140 x 292.

An Example of a Banner

Creating a Banner Image

1. On the Administration bar, navigate to Add Content > Banner.
2. Once selected, the following page will appear.

3. 

4. Enter the required information: 1. Title 2. Category 3. Headline: The main text attached to the image of the banner. 4. Headline Link: Used to hyperlink the headline text. The headline link can link to any URL. If the link is internal, please use a relative path. The headline link is mandatory. 5. Image: Choose the image that you would like to upload as the banner. Then select Upload. 6. Alt Text: You must enter Alt text describing the image if it is non-decorative. 7. Summary (Optional): Appears below the headline of the banner image. 8. Keywords (Optional): Like tags, keywords are a filtering mechanism.
5. Select the order in which you would like this banner image to appear (random order by default, 0 = first, 1 = second).
6. Once the above steps are completed, select Save.

Editing a Banner Image

1. On the Administration bar, select Find Content.
2. Filter the content by "Banner" using the "type" dropdown menu.

3. 

4. On the desired banner, select edit.
5. Make the required changes.
6. Once the above steps are completed, select Save.

Displaying a Banner

/! Note: Only Web Managers/Site Owners can configure & display banners.

1. On the Administration bar, select Structure.
2. Select Blocks.
3. Locate the "View: B1 - Image slider (Banner): Block - Autoplay" display.
4. Select configure.

5. After selecting configure, the banner block configure page will open.

   

6. Select "Top Bar" in the drop-down menu under "Region Settings".
7. Under "Show block on specific pages" in the "Visibility Settings" section, you can choose the following display options:

• all pages except those listed: The block will be displayed on all pages of the website EXCEPT for those listed in the field below.
• only the listed pages": The block will ONLY be displayed on the pages of the website listed in the field below.

1. Once the above steps are complete, select Save Block.

To Display The Banner On The Front/Home Page Only

1. On the Administration bar, select Structure.
2. Select Blocks.
3. Locate the "View: B1 - Image slider (Banner): Block - Autoplay" display.
4. Select configure.

5. After selecting configure, the banner block configure page will open.

   

6. Select "Top Bar" in the drop-down menu under "Region Settings".
7. Under "Show block on specific pages" select "only the listed pages".
8. In the text field below, enter <front>.
9. Once the above steps are complete, select "Save Block".

Filtering Banner Images by Category on Specific Pages

By following the steps below, you can create a banner slideshow that is (a) filtered by a specific category and will (b) only show on specific pages.

1. Creating a Banner Category 1. On the Administration bar, select Structure. 2. Select Taxonomy. 3. Locate "Banner Category" and select add terms. 4. Add a term to identify each unique slideshow (eg. Front Page). 5. Enter a description if needed. 6. Select Save. 7. After selecting save, take note of the term ID associated with your new term (you can find this is the URL when you edit the term after creating one and clicking the edit button). Write it down or remember it for later. 8. Navigate to each banner that you want to show in this slideshow and set its category to match the one you just created. For steps on how to do this follow the Editing a Banner Image section.

2. Create a Mini Panel for you new Banner Category 1. On the Administration bar, select Structure. 2. Select Mini panels. 3. Select Add. 4. Enter a descriptive administrative title for your unique slideshow. 5. Enter a description if needed. 6. Select Continue. 7. Select Continue again. 8. Select Continue again. 9. Select the cog icon in the top left corner of the Top section. 10. Select add content. 11. Under View panes select View: B1 - Image lider (Banner): Manual. 12. Add the category name in the category box and enter the number of items to show. 13. Select Finish. 14. Select the cog icon in the top left corner of the Top section. 15. Under Style select change. 16. Select Bootstrap and Save. 17. Select the cog icon on the right side of View: B1... 18. Under Style select change. 19. Select No markup at all and Next. 20. Select Finish.

3. Place your Mini Panel 1. On the Administration bar, select Structure. 2. Select Blocks. 3. Locate the minipanel you just created, select Configure. 4. Under UG Cornerstone Theme (default theme) select top bar. 5. Configure which pages you would like to display your banner on by adding their paths to and selecting Only the listed pages or select the pages you do not want to display the banner by adding their paths and selecting All pages except those listed. 6. To add the banner to the front page, add <Front> and select Only the listed pages. 6. Select Save Blocks.

Banner Block Spacing Issue

When you add a banner to a custom page using blocks, you will notice a small space underneath the banner, to fix that, take the following steps. 1. Go to Structure > Blocks. 2. Find the block you have added to the top bar Should be underneath the 'Top Bar' Section. 3. Click Configure and on then click Source on the WYSIWYG editor. 4. Wrap the small code bit in a <div> tag (if it isn't already). 5. An example of a image wrapped in a <div> tag is: Note: Don't forget the final </div> tag. 6. Scroll to the bottom and click Save blocks.

The current content types provided by the current Drupal platform are:

• Basic Page
• Banners
• Blocks
• Book
• Course Outlines
• Events
• FAQ
• Featured Item
• News Article
• Services
• Social Media Account
• People Profiles
• Webform

What are content types?

The expression "content types" is used to describe basic types of content that you will find on every Drupal site. Basic examples of content types used by every site are Page, News, and Events. Organising nodes into different content types allows Drupal to automatically know what type of information the node requires and what special fields are associated with that content type. Content types allow content creators to easily add and organize similar types of content.

Why are there specific content types?

CCS Web & Development solutions has customized and tested the current content types. The customization and testing of the content types was to ensure accessibility and standardization across the UG Drupal platform. The content types that are currently available are constantly undergoing accessibility testing, and they help to ensure that university sites follow a similar platform. Through a uniform platform, navigation between university and college websites is made simpler and easy for the user. If you happen to find any issues with current content types, please contact CCS so we are aware of the issue. For more information and a record of our current known platform issues, please check out our github issues..

Best practices for getting started when managing/editing your website include starting small and working towards more complex criteria. SiteImprove will help highlight issues and create reports for where your website needs improvement.

1. Start with the basics – Broken Links

Broken links negatively affect user perception of your website. Broken links most often occur because either the URL was entered incorrectly when the link was created, or the link destination has moved or no longer exists. There should be no broken links on your website.

2. 150 characters or less for metadata.

Keep it short. Metadata includes things like alt descriptions, summaries, captions, and other descriptive text. Meta descriptions are commonly used on search engine result pages (SERPs) to display preview snippets for a given page. Ideally, meta descriptions should be no more than 150 characters, or else you risk important information being cut off or being too long to be useful.

3. Misspellings

A misspelling can have a devastating effect on a visitors experience with a website, and therefore the image of the organization behind the website. There should be no misspellings on your website.

4. Keep it small

A simple thing to overlook when adding documents and media files to a website is their size. As a general rule of thumb, documents and files should not be bigger than 5MB otherwise they will cause a range of annoying problems for the user. They will slow the speed of your site, cause problems if you have a responsive design and put a serious dent in mobile users data plans.

5. Link it right

Writing descriptive link text is important for accessible websites. Ideally, link text should describe the destination even when taken out of the context of a paragraph it may appear in. This is why using ‘read more’ or ‘click here’ for link text should be avoided. The small change of writing descriptive link text will make a big difference to a number of users.

6. Testing 1, 2, 3

Use Siteimprove to help in assisting and finding accessibility issues such as broken links, misspellings, and WCAG 2.0 Accessibility testing.

Sidebar menus show up on the right side of the page, beside the main body content. They can be easily customized to display a portion of the main menu on all pages, or a few select pages.

There are two main methods for creating sidebar menus: Panels and Blocks. Panels are recommended for sidebar menus that show up on all pages, but if you would like your sidebar menu to appear on only a small number of pages, go with Blocks.

Note: You should have some menu links created before placing panels or blocks. For help with creating menus, see the Managing Menus page.

1. Panels Method

1. On the page you would like to add a sidebar menu to, select Customize this page at the bottom of your screen. Keep in mind that changes made here will affect all pages in the content type. For example, if you are adding a sidebar menu to a news item, the menu will show up on all news items.
2. Scroll down to the Right side region, and select the plus sign.

3. In the add content menu, select Menus from the side menu. Then select menu tree of the menu selected by the page.

   

    

4. In the configuration dialog, the "Starting level" drop-down controls how much of the main menu appears on the page. Starting from the secondary level is recommended, because it means that the portion of the main menu most relevant to the page will show up in the sidebar. Starting from the primary level means that the whole main menu will show up in the sidebar.
5. Select Finish. Try selecting Finish again if an error message appears.
6. When the configuration dialog closes, make sure to select Save at the bottom of the page.

2. Blocks Method

Creating and Configuring a Menu Block

1. From the administration bar, navigate to Structure > Blocks.
2. At the top of the page, select Add menu block.
3. Enter a title for the menu block if it should be different from the default title, determined by the menu. Enter <none> to display no title.
4. From the Menu dropdown, select either "Main menu" to display the whole menu in the sidebar, or <the menu selected by the page> to only display the portion of the main menu relevant to the page.
5. Select the starting level for the menu.

   

6. Under Visibility settings, specify the pages that the menu block should be displayed on, if desired. Specify pages using the internal path rather than the full URL.
7. Select Save block.

Placing a Menu Block

1. From the administration bar, navigate to Structure > Blocks.
2. Find the menu block you just created in the list of blocks, under "Disabled."
3. Drag your block from "Disabled" to "Secondary."
4. Scroll to the bottom of the page and select Save blocks.

Menus are a collection of links (menu items) that are used to navigate a website. Site Managers have the ability to remove, add, and rename menus and menu items/tabs. Editors can only add menu items to existing menus.

• Creating a New Menu
• Editing a Pre-existing Menu
• Adding/Editing Menu Links
• Adding Content to a Menu
• Using Categories in Menus

Creating a New Menu

1. Select Structure on the Administration Bar.

2. Select Menus.

3. Select Add Menu.

   

4. Enter the title you would like to give the menu in the "Title" field.
5. Enter the description you would like to give the menu in the "Description" field (optional). The description is not seen by site users.

6. Once completed, select Save.

Changing Menu Name & Description

1. Select Structure on the Administration Bar.
2. Select Menus.
3. Locate the menu you would like to edit.
4. Select edit menu.

5. Make the required changes. Select Save.

Adding a Link to the Menu

1. Select Structure from the Administration Bar.
2. Select Menus.
3. Locate the menu you would like to configure.
4. Select list links to edit the menu.

5. Select Add Link. On the new page, fill out the following:
   

6. Enter the title for the menu item in the "Menu link title" field.
7. Enter the path where the menu item leads in the "Path" field. /! Note: use relative links instead of absolute links. For more on links, see the guide to links.
8. Enter a description if needed.
9. If the menu item is a "parent" item for a dropdown menu, check Show as expanded. If the menu item is a "child" item, use the dropdown menu to select its parent link.
10. If you know the correct weight to give the item then you may change the weight here. Otherwise, you can use the interface on the previous page to reorder the menu items. /! Note: You can configure menu hierarchy through the drag interface.

11. Once the above steps are completed, select Save.

/! Note: When you add items to the parent menu and check "show as expanded", the menu will no longer be clickable. It will only bring up the drown-down menu. Consider adding a second link titled "Overview" as a child item that contains the information previously linked to the parent menu item.

Editing a Link in the Menu

1. Select Structure from the Administration Bar.
2. Select Menus.
3. Locate the menu item you would like to edit.
4. Select edit. To delete the link, select delete.
5. Once you have finished editing the menu link options, select Save.

   ---

Adding Content to a Menu

Located at the bottom of the content type edit page, there is the option to add the selected content item to a menu.

1. Select Menu Settings.
2. Ensure Provide a menu link is checked.
3. Enter the content's title in the "Menu Link Title" field.
4. Enter a description in the "Description" field. By adding a description, if a user's mouse hovers over this link, after a moment the description you type here will show.
5. Choose the menu parent item for the content type to be nested under by using the "Parent Item" dropdown menu.
6. You can adjust the weight of the page by using the "Weight" dropdown menu. A higher (heavier) weight means that the item will appear at the bottom of its menu list. Negative integers represent lower (lighter) weights, and will float to the top. The range of weights is -50 to 50.

7. Once completed, select Save.

Using Categories in Menus

The menus on your site can call for items that match specific taxonomy terms.

To create a menu using Taxonomy, follow these steps:

1. Find the autopath given to your taxonomy term by following these steps:

   1. Select Structure on the Administration Bar.
   2. Select Taxonomy.
   3. Locate the vocabulary name you would like and then click list terms.
   4. Select the term from the list of terms.
   5. Save/Copy the URL at the top of the page.
2. Once the above step is completed, select Structure on the Administration Bar.
3. Select Menus.
4. Select Add Link. On the new page, fill out the following:

   

5. Enter the title for the menu item in the "Menu link title" field.
6. Enter the path you copied in step one in the "Path" field.
7. Enter a description if needed.
8. If you know the correct weight to give the item then you may change the weight here. Otherwise, you can use the interface on the previous page to reorder the menu items. /! Note: You can configure menu hierarchy through the drag interface.
9. Once the above steps are completed, select Save.

Taxonomy is the practice of classifying content. In Drupal, the taxonomy module allows you to classify your website content and direct it at certain audiences. This module is useful for everything from menu and navigation organization, to view & display options.

Planning Taxonomies

The first step in establishing a taxonomy is creating a new vocabulary. Next, terms that fall within that vocabulary are defined. The arrangement can be "flat", as in a tagging system, or hierarchical, with parents and children. The University of Guelph's Drupal framework treats all terms as flat within the defined vocabulary.
An example of how you might create taxonomy for a site using our predefined vocabularies:
Vocabulary = Page Category
Term = Workshops
Our platform uses a controlled vocabulary, in which only Site Managers can assign terms to vocabularies.

Taxonomy Principles

• Each vocabulary consists of a set of terms associated with a particular feature.
• Each vocabulary can contain an unlimited number of terms.
• Keywords are a type of "tagging" vocabulary shared amongst all content types.

Working With Taxonomies

Vocabularies are managed on the Taxonomy page.

• It is found under Administration Bar > Structure (i.e. http://yoururl/admin/structure/taxonomy)

Adding Terms

The University of Guelph Drupal 7 template comes with a list of predefined vocabularies used by multiple UoG Modules. Most of these may need to be filled with terms. You may populate vocabularies with terms using Add Term. 1. Navigate to Structure > Taxonomies 2. Select Add Term for the vocabulary you want to edit. From there, Drupal will prompt for:

• Term name (Required) - The name for this term. Example: Technology.
• Description (Optional) - Description of the term (this item may be used by some modules and feeds but is not required).

To view or manage the terms of each vocabulary:

• Navigate to Structure > Taxonomies
• Click on its list terms link
• On the "List Terms" page you can edit each term by clicking the edit link. You can also a delete a term from here. 

Filtering with Taxonomies

The taxonomy filter is designed to assist narrowing down taxonomy listings to find topics that are tagged by multiple terms.

These are the user roles for creating, updating, and publishing content and media:

1. author
2. editor
3. reviewer
4. moderator
5. publisher

These are the workflow states that content and media can have:

1. Draft
2. Edit
3. Review
4. Moderation
5. Published
6. Archived

Draft

Only users with the author role can create new content. By default, any newly-created content is in the Draft state. When an author is ready for their content to be seen by an editor, they change the moderation state from Draft to Edit.

Edit

When the content is in the Edit state, a user with the editor role determines if it should undergo further revisions. If no revisions are necessary, they can change the moderation state to the Review state.

Review

Content in the Review state must be reviewed for accessibility issues. It is also an opportunity for reviewers to through both an accessibility review and a technical review. Once a user with the reviewer role approves the content, they can set it to the Moderation state.

Moderation

Users with the moderator role are responsible for ensuring other versions of the content (e.g. translations) are available if needed. Once this is taken care of, moderators can set content to the Published state.

Published

Once content is published, only users with the publisher role can unpublish that content by setting it to the Archived state.

Archived

Once content is in the Archived state, it can be republished by a publisher. If a new version of the content is needed, a new draft can also be created from the archived content.

Using Workflow

Changing the Moderation State

If you have the author, editor, or publisher role:

1. Edit the content.
2. At the bottom of the page, above Save, you will see the Current state of moderation.
3. Under Change to, select the desired moderation state.
4. Then select Save

If you do not have editing permissions (e.g. reviewer, moderator roles):

1. Go to admin/content/moderated for a list of content in a pending (i.e. unpublished) state.
2. Click the title of a piece of content to view it.
3. At the top of page, a box will appear showing its current Moderation state and the option to change it.

NOTE: only states a user has permission to access will appear in the Moderation state drop-down menu.