# Introduction ![](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LgDtFe0CSLn4le0b2kR%2F-LgDtMGlvpQVrIdEirhs%2FComputing%20%26%20Communications%20Services_Black.png?alt=media\&token=cafe0d10-172c-460e-9302-b036eec71f9e) Welcome to the CCS Web & Development Solutions Client Training Materials and Accessibility Guidelines Document! This manual is available to users in the following formats: * [HTML](https://www.gitbook.com/read/book/ccswbs/uog-drupal-training) * [PDF](https://www.gitbook.com/download/pdf/book/ccswbs/uog-drupal-training) * [ePub](https://www.gitbook.com/download/epub/book/ccswbs/uog-drupal-training) * [Mobi](https://www.gitbook.com/download/mobi/book/ccswbs/uog-drupal-training) ## Introduction This documentation provides users with an abundence of information. This information includes: * [Introduction to the Drupal Platform](/drupal_features_terms_acroynms) * [Accessibility Basics](/accessiblecontentguide/accessibilitybasics) * [Drupal Websites: Getting Started](/basicbeginner) * [UG Drupal Content Types](/ugcontenttypes) * Other Platform Provided Additions * [Style Guide](/styleguide) * [FAQ Section](/freqaq) ### Conventions Used in This Documentation * *Emphasis* or *Italic* * Used for pathnames, filenames, program names, side notes. * **Strong** or **Bold** * Used for options, titles, new terms where they are defined. * `Constant Width` * For things the user will see and read on the screen. ## What is Drupal? ### A Brief Description Websites are often thought of as a collection of static pages, perhaps with some functions like a blog or a comments section. Site managers often think of their site in terms of a tree-like hierarchy of pages that they will edit. **The University of Guelph Business Web & Development Solutions** department uses a **Content Management System** (CMS) called **Drupal**. Drupal, unlike traditional websites, treats most [Content Types](/drupal_features_terms_acroynms#content-type) as variations on the same concept: a *Node* (more on this in a moment). Static pages, blog posts, and news items (some possible node types) are all stored in the same way, and the site's navigation structure is designed separately by editing menus, views (lists of content), and blocks. ## Where to Start? A lot can be accomplished through exploration of the Drupal interface. Exploring the Drupal interface is probably the best way to learn how to use Drupal. Along with exploration, it is encouraged that you read the differenst sections of this documentation as many of the frequently asked questions have been answered and explained along with detailed documentation of the numerous content types associated with the Drupal platform that we provide. ## Contributing to the Training Module The University of Guelph Business Web & Development Solutions department strives to provide top notch documentation to users. In order to help us improve this documentation you can submit an email to with your feedback. Alternatively, if you want to directly contribute to this module, you have a few options: 1. [Submit a pull request on github](https://github.com/ccswbs/UoGd7-Training.git) for updates or new chapters 2. Subscribe to the repository and review new updates as they come in 3. Contact CCS Web Business Solutions ### Basic Github Workflow Guidelines * The Documentation Team takes note when a new feature is being developed/prepared for testing. * Create a new issue to track the feature and discuss. * When ready, open a pull/fork to start iterating on the content. * When the content is in a good place, @mention the doc team and have a peer editor review the content and edits. * When the feature is ready to go to its master, merge the pull request into the documentation master. GitBooks will update automatically unless it is a new article, in which case a link will be made to the doc in GitBooks. * Update book the module on the CCS Website to keep it up to date. Created by: Pasquale J. Mancuso & Saman Asif Edited By: Nicholas Macedo, Kabir Olatinwo, Morgan Rees, Noah Guta # Drupal Platform Introduction ## Administration Menu Bar When Logged in as a Site Manager or Content Creator, the first bar at the top of the page is called the **Administration Menu Bar** and it allows users with the correct permissions to add/view/delete/edit content as well as other administration-specific tasks. ![Administration Menu Bar](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95XbJz00gt7XSm6H%2Fadmin_menu_bar.png?generation=1556827639551763\&alt=media) ## Nodes A node is the generic term for a piece of content on your website. The content type of the node will define what fields are included with it. Depending on the type of node, different fields will be attached, and this is known as a content type. For example, a basic Page content type has attached fields such as title and body fields. Other examples of content types include Book pages for use in Books, Discussion topics in forums, Blog pages in blogs, and News articles. ### The Flexibility of Nodes Essentially, a **node** is a set of related bits of information. When you create a new blog post, you are not only defining its body text, but also its title, content, author link, creation date, taxonomy (tags), etc. Some of these elements will be shown by the theme layer when the node is displayed. Others are meta-data that control when the node will show up at all - such as taxonomy or publishing status. ## Regions and Blocks ![Image of Block Areas highlighted](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Xd0uSUulyHzw0Z%2FBlock_Areas.jpg?generation=1556827639990943\&alt=media) Blocks are a method for positioning data within a page. **Nodes** on your Drupal site are laid out in **Regions**. These can include the header, footer, sidebars, and main content regions. Your theme may define additional regions. **Blocks** are discrete chunks of information that are displayed in the regions of your site's pages. Blocks can take the form of static chunks of HTML or text, menus (which are for site navigation), the output from modules (e.g. hot forum topics), or dynamic listings that you've created yourself (e.g. a list of upcoming events). ## Positioning Nodes Using In-Place Editor ### Content Type Every node belongs to a single *node type* or *content type*, which defines various default settings for nodes of that type, such as whether the node is published automatically and whether comments are permitted. Content types can have different fields and modules can define their own content types. The core Drupal Book and News modules are two examples of modules that define content types. ### Site Architecture - Content Types the UoG Template Provides: 1. [Basic Page](/ugcontenttypes/howto-page) * The **Basic page** content type is used for static content that can be linked into the main navigation bar. This is one of the most basic content types and can be very flexible. 2. [Featured Items](/ugcontenttypes/howto-featured) * The **Featured Item** allows content authors to create a lead-in to any page content on the website (e.g. Events, News, Basic Page, People Profiles, etc.) or an external URL. 3. [Banner](/ugcontenttypes/howto-banner) * The **Banner** feature provides editors with an image carousel at the top of the page which can feature multiple pieces of content. The Banner can be configured for manual rotation (controlled by the user), or autoplay. 4. [News](/ugcontenttypes/howto-news) * The **News** feature allows content authors to add news articles to the website and display them in a Listing Page view, an Article Detail Page view, and a Recent News Teaser List view. Any article can be featured on any page using the Featured News Article view. Site visitors can also browse for news articles by date and category tag. 5. [Events](/ugcontenttypes/howto-events) * The **Events** feature allows content editors to add events to the website and display them in a Listing Page view, a Weekly Events view, a Monthly Calendar view, an Event Detail Page view, and an Upcoming Events Teaser List view. Any event can be highlighted (or “featured”) on any page using the Featured Events block. Site visitors can also browse for events by date and event category. 6. [Social Media](/ugcontenttypes/howto-socialmedia) * The **Social Media** feature allows Anonymous Users to share pages on their favorite networks and visit a variety of (external) social media pages affiliated with the website. They can also access Twitter, Facebook and RSS feeds directly on the website. 7. [Services](/ugcontenttypes/howto-services) * The **Services** feature provides a method for outlining and featuring the services that you offer. Users can find Services alphabetically, by service category, or by audience (eligible user). They can also search for services by keyword (tags). 8. [FAQ](/ugcontenttypes/howto-faq) * The **Frequently Asked Questions (FAQ)** feature allows editors to create a repository of commonly asked questions and their corresponding answers. 9. [Book](/ugcontenttypes/howto-book) * The **Book** feature is a set of pages tied together in a hierarchical sequence, perhaps with chapters, sections, subsections, and so on. You can use books for manuals, site resource guides, Frequently Asked Questions (FAQs), or whatever you'd like. 10. [People Profiles](/ugcontenttypes/howto-profiles) * The **People Profiles** feature allows an authorized user to create and edit an organizational profile. Anonymous users can browse through these profiles in a Listing Page view and find more detail about a specific member of the organization in the Profile Detail Page view. Editors can highlight (or “feature”) any profile on any page using the Featured Profile view. 11. [Web Forms](/ugcontenttypes/howto-webforms) * The **Web Forms** feature is for making forms and surveys in Drupal. After a submission, users may be sent an e-mail "receipt," and administrators can also be notified. Results can be exported into Excel or other spreadsheet applications. 12. Landing Page * A **Landing Page** is a basic page that is created by the Drupal platform and is used to link all pages related to each other under a menu item. This page is created because the "breadcrumbs" that track site navigation require a page that acts as a parent for all subsequent pages below it ("children") in the menu hierarchy structure. 13. [Course Outlines](/ugcontenttypes/howto-courseoutlines) * The **Course Outlines** content type allows content creators to create and edit course outlines. Anonymous users can browse through these outlines in a listing page view and find more detail about a specific course. 14. [Custom Content (Style Guide)](/styleguide) * The **Style Guide** allows content creators to create custom content that can be easily inserted into their code as well as being accessible. The style guide features many examples of code as well as snippets of code that can be reused within the page. ## Field *Fields* are elements of data that can be attached to a node or other Drupal entity. Fields commonly contain text, images, or terms. ## Input format These are settings that define the filtering of user-entered text before it is displayed. This can be used to control formatting or malicious input. ## Menus *Menus* refer to the navigation elements on a page, and to Drupal's internal system for handling requests. When a request is sent to Drupal, the menu system uses the provided URL to determine what functions to call. There are four standard menus in Drupal 7: 1. **The Main Menu** is built by site administrators and displayed automatically in the page header of many themes (and if not, you can enable their blocks to display them). 2. **Management** is the Administration Bar Menu, and is presented as the first item at the top of the page for Content Creators and Site Managers. 3. **Navigation** is a catch-all menu that usually contains links supplied by modules on your site. 4. **User Menu** contains links to the User account and the logout link. ## Module A module is software (code) that extends Drupal features and functionality. The University of Guelph supplies and maintains its own modules for compliance with **AODA** - within this documentation they are generally called **Features**. ## Path In Drupal terms, path is the unique, last part of the URL for a specific function or piece of content. For instance, for a page whose full URL is , the path is "CCS/AODA". ## Path Alias This changes default paths such as node/7 into user-friendly paths such as about/contact. This is automated with UoG enabled modules. ## Taxonomy Drupal has a system for classifying content known as taxonomy. This is provided by the core Taxonomy module. You can define your own vocabularies (groups of taxonomy terms) and add terms to each vocabulary. Each vocabulary can then be attached to one or more content types, and in this way, nodes on your site can be grouped into categories, tagged, or classified in any way you choose. Go to [the taxonomies page for more information.](/basicbeginner/taxonomies) ## Users, Permissions, and Roles Every visitor to your site, whether they have an account and log in or visit the site anonymously, is considered a user to Drupal. Every user when created also has a role assigned to them, these roles grant the user certain permissions. When those users are logged in, Drupal will let them do the actions that role has permissions for. ### Types of UoG Users #### Anonymous User This is anyone visiting the website who is not logged in. * Can view the front-end of the website. #### Authenticated User These users are assigned a user ID when they register for the website. A user name and email address is associated with any user that isn't anonymous (therefore must be logged in). * Can log in to the back-end of the website. * Can edit their own user profile. #### Author * Can create new content drafts. * Can edit their own content drafts. * Can view their content revisions. #### Editor * Can view/edit all project data, create/edit all content types. * Can edit any content (drafts or published). * Can approve any content drafts for publishing. * Can publish any content. #### Site Manager * User: administer permissions. * User: administer users. * User: Allow editing of page layouts, includes: changing view categories, titles, and number of items to display. * Can create/edit taxonomies. * Can create/edit menus. ## WYSIWYG *WYSIWYG* is an acronym for *What You See Is What You Get*, used in computing to describe a method in which content is edited and formatted by interacting with an interface that closely resembles the final product. We use a WYSIWYG editor for adding main body content. [Read the guide on our WYSIWYG editor for helpful tips](/basicbeginner/wysiwyg-editor). # Drupal User Roles & Responsibilities Provided with the current UG Drupal CMS, there are three main user roles. These roles are: ### Web Managers/Site Owners A user with the role of **Site Manager** can edit and manage users, basic site layout, view categories, titles, menus, site-specific taxonomies, and more. The role of a site manager is to ensure AODA compliance and to monitor for any broken links and misspellings using Siteimprove. We recommend that there only be 1-2 Site Managers to ensure that site maintenance and conformity to WCAG 2.0 Standards is kept and that the ability to divide up responsibility is easier to achieve and enforce. As a Web Manager/Site Owner, you have the responsibility of ensuring accessibility for the users of the website you manage. The University of Guelph has a goal for all websites to be Level AA Compliant in regards to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) Normative Criteria. To manage the other Content Creators/Editors, it is necessary that you have a fundamental understanding of these criteria and to ensure you are within the guidelines. It is also important that you communicate and train your Content Creators/Editors on how to publish content in an accessible way. A good place to start in regards to accessibility testing is finding tools that can assist you in getting a quick overview of issues. For large websites the effort most likely needs to be prioritized. ### Content Creators & Content Editors A user with the role of **Content Creator OR Content Editor** has the ability to create and edit the various content types provided with the UG Drupal platform. There are two types of Content Creator. Types of Content Creators are: * **Authors**: Ability to create, edit and publish/unpublish their OWN content. * **Editors**: Ability to create, edit, and publish/unpublish any content produced by them or others. As a **Content Creator or Content Editor** you must familiarize yourself with the normative criteria of [WCAG 2.0](https://www.w3.org/TR/WCAG20/). Content Creators and Content Editors are responsible for ensuring the accessibility of any web content that they upload or publish on the website. In many cases the Drupal Platform will cover the basic WCAG 2.0 Criteria but it is up to the Content Creator/Content Editor to ensure that the content they produce is WCAG 2.0 compliant. # Workbench Moderation The Workbench Moderation Feature enables Workbench for various content types to enhance the existing publishing work-flow. Workbench moderation introduces the concept of **states** to Drupal content and then using permissions user roles determine who may change a content from one state to another and ultimately publish web pages. ### Publishing States There are 3 publishing states: * Draft * Needs Review * Published Content may be in one of these states during the publishing process. Not until the content reaches the **published** state is it view-able publicly. ### Content State Transitions Workbench uses roles to define publishing permissions. For People Profiles, two roles have been defined: the **author** and the **publisher**. Content may move from one state to another. Below are the transitions permitted for *People Profile* content and the required minimum role to perform transition. | State transition | Required role | | ------------------------ | ---------------------- | | Draft → Needs Review | Author/Editor | | Needs Review → Draft | Author/Editor | | Needs Review → Published | Publisher/Site manager | | Draft → Published | publisher/Site manager | The **author/editor** role has permissions to create new profile content as drafts, create new drafts of existing content, and submit the draft content for review before publishing. The author may also 'take back' a **Needs Review** request and change the state back to draft. The **publisher** role has permissions to review draft content that has been submitted for review and then publish the content. It is worth noting that once a document is publish the Workbench workflow is complete. It is not possible to move published content back to draft. ## Using Workbench Moderation In general, content edits (or drafts) will be created, submitted for review and then published. These activities along with the primary role responsible for each are listed below. | Activity | Primary role | | ---------------------------------------------------------------------------- | ---------------------- | | [Create draft](/workbench-moderation#creating-a-draft) | Author/Editor | | [Submit draft for approval](/workbench-moderation#submit-draft-for-approval) | Author/Editor | | [Approve draft and publish](/workbench-moderation#publish-document) | Publisher/Site manager | ### Creating a draft Draft content is created by two methods. 1. When new content is created: When new content is created, it is set to a **draft state** by default. 2. The second is by editing existing content. ### Create new draft from existing content ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b28SUwJajj6Pxy%2FworkbenchModeratingPeopleProfiles-NewDraft.png?generation=1556827632356226\&alt=media) 1. Visit the page you wish to edit. From the page click the **New draft** tab to open the edit page. 2. Make changes to the page. Saving these changes will keep the page in the **Draft** state (the default state for all new drafts). 3. If the page is saved as a draft then the next time you visit the page the **New draft** tab will be replaced by 2 new tabs: **View Draft** and **Edit Draft** ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b4rI0FxSzQLthU%2FworkbenchModeratingPeopleProfiles-EditDraft.png?generation=1556827634754311\&alt=media) 4. Use the **View published** and **View draft** tabs to review changes in the content. 5. Use the **Edit draft** tab to edit the draft and make further changes to the content. 6. Save draft when edits are complete. ### Submit draft for approval Once an Author's draft is complete they may submit it for review. 1. Click the Moderate tab to go to the moderation window: ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b6qMRMJNK_lyC-%2FworkbenchModeratingPeopleProfiles-Moderate.png?generation=1556827631911594\&alt=media) 2. The moderation window shows the current published page (green), the current draft (red) and past edits (grey). For the draft (red) there will be a drop-down menu. 'Needs Review' will be selected automatically in the drop-down menu. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b8Dy0A0I_FNG35%2FworkbenchModeratingPeopleProfiles-NeedsReview.png?generation=1556827632589200\&alt=media) 3. Click **Apply** button. This will send a notification to the publisher/site managers that the draft is ready for review and needs publishing. ### Publish document 1. Visit 'My Workbench' 2. Visit 'Needs Review' tab 3. Select page that needs review by clicking 'View Moderation History' 4. The current draft that needs review will be marked in red ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bAD2v9voNLlTm0%2FworkbenchModeratingPeopleProfiles-Published.png?generation=1556827632962207\&alt=media) 5. click 'View' to see the review the draft. 6. If satisfied, return to moderate window by selecting the 'Moderate' tab ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bCIBHfrhs6bmbg%2FworkbenchModeratingPeopleProfiles-Moderate2.png?generation=1556827635738737\&alt=media) 7. The state drop-down menu should already be set to **Published**. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bES2UDEPJEVp7o%2FworkbenchModeratingPeopleProfiles-Published2.png?generation=1556827634418099\&alt=media) 8. Click **Apply** to publish the page. The Author will be notified that the document is published. ***\*Note about rejected edits (Publisher)*** Publisher drafts may be rejected. The Publisher may make edits to any draft, but if this happens, the Publisher takes ownership of the draft and the Author will not be able to make any additional changes. To avoid preventing the Author from being able to make additional changes, the Publisher may notify the Author (outside of Drupal, ie. email or phone) to ask them to edit their "Needs Review" draft and then resubmit for review. ### Changing Needs Review to Draft (Author/Editor) In the event a draft is rejected by a Publisher/Site manager or an Author/Editor wishes to make additional changes to submitted draft, an Author/Editor may change the state of page from **Needs Review** back to **Draft**. 1. Select the **My Workbench** link from the black admin menu at the top of the page. This will open the My Workbench view. 2. From My Workbench click the **Needs Review** tab to show the list of pages sent for review. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bGe-IOoiZoFk6g%2FworkbenchModeratingPeopleProfiles-NeedsReview2.png?generation=1556827634451110\&alt=media) 3. From the **Needs Review** admin page, click the link **Change to** ***Draft*** to set the page back to Draft. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bItC8d0VRbMXCv%2FworkbenchModeratingPeopleProfiles-ChangetoDraft.png?generation=1556827634216271\&alt=media) 4. Edit the draft as before. See [Create Draft](/workbench-moderation#creating-a-draft) section of help for more information. # Drupal Websites: Getting Started This guide is designed to help those who are just starting their journey with the UG Drupal platform. If you require more advanced information and how to use specific content types, please check out the [UG Drupal Content Types](/ugcontenttypes) section or the [Advanced Guide to Drupal Websites](/advancedguide) section of the training module. This guide will cover: * [How to Login/Logout](/basicbeginner#logging-in) * [Introduction to the Admin Menu Bar](/basicbeginner#introduction-to-the-admin-menu-bar) * [Creating Basic Content](/basicbeginner#creating-basic-content) * [Editing Pre-existing Content](/basicbeginner#editing-pre-existing-content) * [Adding Users to the Website](/basicbeginner#adding-users-to-the-website) * [WYSIWYG Editor](/basicbeginner/wysiwyg-editor) * [Managing Menus](/menuitems) * [Taxonomies](/basicbeginner/taxonomies) ## How to Log in/Log out ### Logging In 1. Navigate to your website: [www.uoguelph.ca/\_sitename\_/user](http://www.uoguelph.ca/_sitename_/user). Once there, you will be brought to the following page: ![Login example](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADRXxvgV0WPS3b9%2Fuserlogin.png?generation=1556827651288199\&alt=media) 2. Enter your Central Login ID in the "Username" field. 3. Enter your Central Login Password in the "Password" field. 4. Select `Log in`. ### Logging Out There are many ways in which a user can log out. The simplest way is to click the `Log out` option located on the menu bar. ## Introduction to the Admin Menu Bar When logged in as a Site Manager or Content Creator, the first bar at the top of the page is called the **Administration Menu Bar** and it allows users with the correct permissions to add/view/delete/edit content as well as other administration-specific tasks. ![Admin Menu Bar](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95XbJz00gt7XSm6H%2Fadmin_menu_bar.png?generation=1556827639551763\&alt=media) On the Admin Bar, the important features to note are: * **House Icon**: When selected, the user will be brought to the home page. * **Content**: When selected, the user will be brought to a table in which all content types are listed and availiable for selection. * **Structure**: When selected, the user will be brought to a list of content types in which they can edit the overall structure of those types. * **People**: When selected, the user will be brought to a table in which all users registered with the site are listed. ## Creating Basic Content In order to publish content on your website, you must select a content type in which this new content should be displayed. Once you have selected the content type in which to put your content, the rest is easy. There are a few ways to add content to your website: ### Option 1 Select the `Add Content` shortcut located in the Administration Bar. ![Add Content Button on Administration Bar](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9AD_iZl2n-g7HQPb%2FContent.png?generation=1556827651235658\&alt=media) ### Option 2 Select the `Content` button in the Administration Bar and then selecting the `Add Content` option. Both Option 1 and Option 2 will bring you to the "Add Content" menu. ![Add Content Menu](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADbbNcKomLKDtT0%2Faddcon.png?generation=1556827656053916\&alt=media) From this step, select the content type in which you would like to add content. For more information in regards to each content type, please visit the [UG Drupal Content Types](/ugcontenttypes) section. ## Editing Pre-existing Content All content created on your website can be viewed by selecting the `Find Content` shortcut located in the Administration Menu shortcut bar, or by selecting `Content` in the Administration Bar itself. ![Find Content Button Highlighted](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADe1UKSSZudb7zo%2Ffindcontent.png?generation=1556827651256098\&alt=media) Once selected, you will be brought to a page with the content listed in a table. ![Website Content Listings](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADgNirm6y6qozQ1%2FcontentMenu.png?generation=1556827651341033\&alt=media) You can search for specific content through the "SHOW ONLY ITEMS WHERE" filter options. Use the drop-down menus to filter by content status and type to find what you're looking for. ![Filter and edit content options displayed](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADi1dftGFKLn1dy%2Ffilterandedit.png?generation=1556827651661583\&alt=media) ## Adding Users to the Website Arguably the most straight forward way to add users to a website is to ask the user to log in to the site using their Central Login-ID and password (see [How to Login](/basicbeginner#how-to-log-inlog-out)). By doing this, the user is added into the system as an authenticated user of the website. Once a successful login has occurred, the user can be assigned roles by a site manager adding user roles (see [Managing User Roles](/basicbeginner#managing-user-roles)). What if the user doesn't have a Central Login-ID or if the user is unable to login? Alternatively users can be added by an individual with the site manager role. If you already know the Central Login-ID and email address, or the user is not U of G authenticated, accounts can be set-up without having the user attempt the intial login. ### Adding a New User 1. At the top of the Administration Menu Bar select `People`. 2. Select `Add User`. 3. Under the "Role" category, select the roles you would like the user to have. * All Unchecked (Except Authenticated User): User is a normal user with no content creation/editing capabilities. * For more information on the user roles, please visit the [Drupal User Roles and Responsibilities](/rolesandresp) section. 4. For the sake of saving the information you just edited, enter a *random* password in the "Password" and "Confirm Password" field. This step is purely for the sake of saving. This password is **NOT IMPORTANT**!!! It will not be retained since the User's Central Login ID and Password will override and provide that user access to the website. 5. Leave the LDAP Options section blank. 6. Select `Save`. ![Add New User Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADkUKB98M4oAlLe%2FnewUser.png?generation=1556827656102367\&alt=media) ### About User Roles In Drupal, access and permissions are granted to defined user roles. User roles are in turn assigned to individual users. The U of G Drupal platform has the following predefined roles each with unique permissions allowing for different types of users with different limitations on tasks they are premitted to perform: * Anonymous User * Authenticated User * Author * Editor * Publisher * Site Manager If you are not familiar with types of users (or user roles) you can review the [Types of UoG Users](/drupal_features_terms_acroynms#types-of-uog-users) in the Drupal Platform Introduction. ### Managing User Roles **Note:** The ability to manage user roles is restricted to Site Managers. #### Changing Roles for One User 1. At the top of the Administration Menu Bar select `People`. ![Add New User Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADm5vsr3IHAHojo%2FuserEditPeopleAdmMenu.png?generation=1556827657083310\&alt=media) 2. Locate the appropriate user you would like to change roles for. You can do this by either using the filter provided, scrolling through the list, or using the in-browser search feature (ctrl + f). 3. Once the user is located, select `edit` for that user. ![Add New User Image(1)](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LeHM0NSr4sZCyL7rIyx%2F-LeHM24VjOKXbf2RNn6O%2FEdit_user_roles.PNG?generation=1557233678981890\&alt=media) 4. Under the "Role" category, select or deselect the roles you would like the user to have. * All Unchecked (Except Authenticated User): User is a normal user with no creation/editing capabilities. * For more information on the user roles, please visit the [Drupal User Roles and Responsibilities](/rolesandresp) section. * In the example below we are adding the roles 'editor' and 'publisher' for the user. ![Add New User Image(2)](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADqaFrO4Rd5_cNq%2FuserEditUser.png?generation=1556827651257704\&alt=media) 5. Select `Save`. **Note:** Ignore the password field for edits - if left blank the password remains unchanged which is desired in most cases. #### Changing Roles for Multiple Users 1. At the top of the Administration Menu Bar select `People`. ![Add New User Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADsetwbaAF0qCxF%2FuserEditPeopleAdmMenu.png?generation=1556827651300045\&alt=media) 2. Select all the individuals you wish to change the roles. ![Add New User Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADuvZ8ITg6iOGjO%2FuserPeopleWindowMultipleSelect.png?generation=1556827651247077\&alt=media) 3. From the Update Options dropdown menu select the new role you wish to add to all selected users. For the example below the role of 'editor' is being added. ![Add New User Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ADw_p3ySXo4pysv%2FuserPeopleWindowMultipleRoleSet.png?generation=1556827655424226\&alt=media) 4. Select `Update`. #### Additional Resource * Lynda.com video turtorial - [Drupal 7 Essential Training: Defining user roles](https://www.lynda.com/Drupal-tutorials/Defining-user-roles/73655/78828-4.html?org=uoguelph.ca) ## Common Web Errors When creating, editing, or managing content with the Drupal platform there are a few common web errors to look out for. These web errors are not only found on our Drupal platform, so it's benificial to know and understand their causes. These common web errors include: * **Error 404**: This error arises when the URL you have navigated to points to something that does not exist. Common causes of this error are typos in the URL provided when clicking a link, or deletion/non-existance of the node that the URL links to. To fix these problems, simply update the link with the correct one, create the page the link points to, or add a URL Alias to a page that should have this link but does not. * **Error 403**: This error arises when the user does not have permission to access the URL they have navigated to. Common causes of this error are unauthenticated users (users not logged in to the website) trying to access webpages that are either unpublished or private. Pages that are private may also limit access to specific types of users through their authentication privileges. * **Error 500**: This error arises when the webpage you have navigated to has problems connecting with its back-end server. This is most commonly seen from a content creator/editor and site manager point of view. Common causes of this error are timing out (more common) or input of incorrect information during critical periods (less common). To fix this error, simply refresh the page. If the error persists, ensure that the data you are inputting is correct, then contact your Web Manager/Site Owner. # Drupal Text (WYSIWYG) Editor Drupal provides its users with a simple text editor that is universal amongst all content types. The Drupal Text Editor (A.K.A the WYSIWYG Editor) allows users to add custom content to the page through its collection of tools. *WYSIWYG* stands for "What You See Is What You Get." Here is what the Drupal Text (WYSIWYG) Editor's operations look like: ![Drupal Text (WYSIWYG) Editor](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95N8Q_pIXlpE8-kb%2Fwysiwyg-operation.png?generation=1556827641287824\&alt=media) ## Buttons on the Drupal Text (WYSIWYG) Editor ### First Row * **Source**: Allows the user to input raw HTML and CSS. Commonly used for adding content from the [Style Guide](/styleguide) into your content. * **Cut (Scissors)**: Acts like a basic cut functionality in MS Word. * **Paste (Papers)**: Acts like a basic paste functionality in MS Word. * **Paste as Plain Text (Clipboard with T)**: Pastes entered content into the editor and removes **ALL** text styling. * **Paste as "Plain Text" from Word (Clipboard with W)**: Pastes entered content into the editor and removes text styling but keeps formatting. * **Remove Existing Text Formatting (Tx)**: Removes styling from selected text. * **Undo & Redo (Arrows)**: Undo/Redo the most recent action done in the editor. * **Insert Image (Image Icon)**: Allows the user to insert an image. * **Insert Table (Table Icon)**: Allows the user to insert a table. * **Insert Thematic Break (Horizontal Line)**: Produces a horizontal line in your content. Most commonly used for separating different sections within a page. * **Insert Special Character (Omega Symbol)**: Allows the user to insert special characters and symbols into the page. ### Second Row * **Bold & Italics (B and I)**: Bold and Italicize selected text. * **Subscript and Superscript**: Subscript and superscript text. * **Numbered List (Numbered List Icon)**: Create a numbered list or place selected items into a numbered list. * **Unordered List (Unordered List Icon)**: Create an unordered list or place selected items into an unordered list. * **Decrease Indent**: Decrease an existing indent on selected text. * **Increase Indent**: Indent selected text. * **Insert Block Quote (Quotation mark)**: Create a block quote or place selected information into a block quote. For more information on block quotes check out the [Official Bootstrap Style Guide](http://v4-alpha.getbootstrap.com/content/typography/#blockquotes). * **Text Align (Left, Center, Right, Justify)**: Align selected text. * **Create Hyperlink (Chain link icon)**: Allows the user to hyperlink selected text. * **Remove Hyperlink (Chain link icon with x)**: Allows the user to remove a hyperlink from text. * **Create Anchor (Flag)**: Allows the user to create a text anchor. More information about anchors below. ### Third Row * **Text Sizing Dropdown Menu**: Allows the user to place the selected text into headings. This should not be used for font sizing and should only be used to mark correct headings as headings. * **Image Styles Dropdown Menu**: Allows images to be aligned left, centred, or aligned right. * **Full Screen Text Editor**: When selected, the Drupal Text Editor will expand and take up the entire screen. Select again to close. * **Show Blocks (Vertical and Horizontal Lines)**: Allows the user to see the different code blocks within the Drupal Text Editor. ## Inserting an Image 1. Ensure that the location you are trying to add the image to is correct. 2. In the respective Drupal Text (WYSIWYG) Editor, click on the image icon. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NG2_OUuRYBUCf8%2Fimgsel.png?generation=1556827641601293\&alt=media) 3. On the new popup window, select `Browse Server`. If the image is already uploaded, then proceed to step 5. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NKlF5gYlFuC5Sx%2Fimgprop.png?generation=1556827641031178\&alt=media) 4. Uploaded the image to the website file system by selecting `Upload` from the menu bar. Upload the file and select the appropriate settings, then select `Upload`. ![upload](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NOc402jNxFvI7e%2Fdialogpic-new-dir.png?generation=1556827641547830\&alt=media) 5. Locate the image you would like to insert. Then, select `Insert File` on the menu bar. 6. Ensure that you give the image appropriate alternative text. For more information on appropriate altetnative text, please visit [the WebAIM turotial on alternative text](http://webaim.org/techniques/alttext/). 7. Once your image has been selected and the appropriate alternative text has been added, insert the image by selecting `OK`. ## Create and Delete Sub-Directories The users can create and delete sub-directories under the **root/uploads** directory only. Make sure that the **uploads** directory/sub-directory is selected/highlighted. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NSnZtoXXYgmOKj%2Fimce_create_dir.png?generation=1556827640647396\&alt=media) ## Inserting a Table The **WCAG 2.0** standard for table settings dictates that table markup must be properly structured to differentiate and properly link between header and data cells. 1. Ensure that the location you are trying to add the table to is correct. 2. In the respective Drupal Text (WYSIWYG) Editor, click on the table icon. ![Insert Table Button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NUQCUXjpfqbh2K%2Finsertab.png?generation=1556827640746801\&alt=media) 3. In the new popup window, enter the number of columns (vertical), and rows (horizontal), in their respective input fields. 4. If your table requires table headers, select the appropriate markup using the "Headers" dropdown menu. For more information about table headers, please visit [the WebAIM tutorial on tables](http://webaim.org/techniques/tables/data). 5. Add a `Caption` if a title is not provided elsewhere. A caption will act as a title above a table. 6. Adding a `Summary` is optional, but recommended if the table is complicated and the information is not provided elsewhere. ![Insert Table Window](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NWMhtcddYM7zp0%2FinsertTableWindow.png?generation=1556827650084823\&alt=media) 7. Upon completing the above steps, select `OK`. Once selected, the table should be inserted into the text area of the editor. You may proceed to insert the information into the table. **/! Note**: To modify an existing table, right-click on a cell in the table and additional options will be displayed. ## Creating and Removing Hyperlinked Text/Images The **WCAG 2.0** standard for links dictates that the purpose of each link can be determined by the link text alone (AAA), or by the link text and its surrounding context (AA). **Example** Do not use: > To search the internet click [here](https://www.google.ca). Use this format instead: > [Visit Google's homepage](https://www.google.ca). 1. Ensure that the location you are trying to add the hyperlinked text to is correct. 2. In the respective Drupal Text (WYSIWYG) Editor, highlight the text in which you are trying to hyperlink. 3. Once the text has been highlighted, select the hyperlink button on the Drupal Text Editor. ![Hyperlink Button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NYaY5EMpTeb1Nb%2Flink%20icon.png?generation=1556827640689143\&alt=media) 4. On the popup window, Specify the link type by selecting one of the options in the dropdown menu: * **Internal path**: Any link that is under [www.uoguelph.ca/\_yourSiteName](http://www.uoguelph.ca/_yourSiteName)\_ * Ensure that the "link type" dropdown menu is set to `internal path`. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Na3iLruVUfi67Q%2Fckeditorlinkinternalpath.png?generation=1556827641386126\&alt=media) * Search for the internal page by typing the first few characters of the page name in the "Link" field. * Select the page you want to link from the list of suggestions. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NcX4nbxTzJpqdy%2Fckeditorlinksuggestions.png?generation=1556827640698492\&alt=media) * Once completed, select `OK`. * **URL (External Path)**: Any link that is NOT under [www.uoguelph.ca/\_yourSiteName](http://www.uoguelph.ca/_yourSiteName)\_ * Ensure that the "link type" dropdown menu is set to `URL`. ![External URL Hyperlink](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Ne8Oq8EYh5bmuW%2FexternalURL.png?generation=1556827641543835\&alt=media) * Paste the link where you would like this text to hyperlink to (Eg: ) in the "URL" field. * Once completed, select `OK`. * **Link to Anchor in Text**: This option can be used to direct the user to a pre-existing anchor on the page. * Ensure that the "link type" dropdown menu is set to `Link to Anchor in the Text`. ![Insert Anchor Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NgkQf3HCkrCVuP%2FselectAnchor.png?generation=1556827641646172\&alt=media) * Select the anchor you would like this text to link to by selecting the anchor name from the "By Element ID" dropdown menu. * Once completed, select `OK`. * **Email**: Hyperlink text to an email address that, upon selection, will prompt the user to email the specified address. * Ensure that the "link type" dropdown menu is set to `E-mail`. ![Insert Email Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95NkofKEuc-L5Sk3%2FemailLink.png?generation=1556827640826354\&alt=media) * Enter the email address you would like this text to hyperlink to. * If applicable, enter the email subject and message body into their respective fields. * Once completed, click `OK`. # Taxonomies *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. ) ### 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: 1. Navigate to `Structure` > `Taxonomies` 2. Click on its `list terms` link 3. 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. # Managing Menus 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](/menuitems#creating-a-new-menu) * [Editing a Pre-existing Menu](/menuitems#editing-a-pre-existing-menu) * [Adding/Editing Menu Links](/menuitems#adding--editing-menu-links) * [Adding Content to a Menu](/menuitems#adding-content-to-a-menu) * [Using Categories in Menus](/menuitems#using-categories-in-menus) ## Creating a New Menu 1. Select `Structure` on the Admininistration Bar. 2. Select `Menus`. 3. Select `Add Menu`. ![Add Menu Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Hg6HOIJfuFSALZ%2FcreateMenu.png?generation=1556827639351391\&alt=media) 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 Admininistration 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 Admininistration 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: ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Hi18mjWi47DzxU%2FaddMenuLink.png?generation=1556827638150762\&alt=media) 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](/accessiblecontentguide/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 Admininistration 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. ![Add Item to Menu](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Hos6lUpgNBgV0I%2Fpagekeyoptmenu.png?generation=1556827639649840\&alt=media) 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 Admininistration 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 Admininistration Bar. 3. Select `Menus`. 4. Select `Add Link`. On the new page, fill out the following: ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95Ht-BRRKIImPFlT%2FaddMenuLink.png?generation=1556827638398391\&alt=media) 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`. # Sidebar Menus 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](/menuitems) 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`. ![Add content menu with menu tree highlighted](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93cMLrAFRHrja4Ds%2Fmenu-selected-by-the-page.png?generation=1556827629611818\&alt=media) 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 `` to display no title. 4. From the Menu dropdown, select either "Main menu" to display the whole menu in the sidebar, or `` to only display the portion of the main menu relevant to the page. 5. Select the starting level for the menu. ![Add menu block window](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93caamN9Cu9VumDv%2Fadd-menu-block.png?generation=1556827630393072\&alt=media) 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`. # Best Practice Tips Best practices for getting started when managing/editing your website include starting small and working towards more complex criteria. [SiteImprove](http://my.siteimprove.com) 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. # UG Drupal Content Types The current content types provided by the current Drupal platform are: * [Basic Page](/ugcontenttypes/howto-page) * [Banners](/ugcontenttypes/howto-banner) * [Blocks](/advancedguide/howto-blocks) * [Book](/ugcontenttypes/howto-book) * [Course Outlines](/ugcontenttypes/howto-courseoutlines) * [Events](/ugcontenttypes/howto-events) * [FAQ](/ugcontenttypes/howto-faq) * [Featured Item](/ugcontenttypes/howto-featured) * [News Article](/ugcontenttypes/howto-news) * [Services](/ugcontenttypes/howto-services) * [Social Media Account](/ugcontenttypes/howto-socialmedia) * [People Profiles](/ugcontenttypes/howto-profiles) * [Webform](/ugcontenttypes/howto-webforms) ## 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 organise similar types of content. ## Why are there specific content types? CCS Web & Development solutions has customised 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 availiable 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.](https://github.com/ccswbs/hjckrrh/issues). # Banners * [Creating a Banner Image](/ugcontenttypes/howto-banner#creating-a-banner-image) * [Editing a Banner Image](/ugcontenttypes/howto-banner#editing-a-banner-image) * [Removing a Banner Image](/ugcontenttypes/howto-banner#removing-a-banner-image) * [Displaying a Banner](/ugcontenttypes/howto-banner#displaying-a-banner) * [Filtering Banner Images by Category on Specific Pages](/ugcontenttypes/howto-banner#filtering-banner-images-by-category-on-specific-pages) * [Banner Block Spacing Issue](/ugcontenttypes/howto-banner#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](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9Am2Rk4vXcGwaVwa%2Fbaex.png?generation=1556827653977823\&alt=media) ## Creating a Banner Image 1. On the Administration bar, navigate to `Add Content` > `Banner`. 2. Once selected, the folowing page will appear. ![Banner Creation Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9Am9YxK1BXi_eDi3%2FbannerCreate.png?generation=1556827654068354\&alt=media) 3. 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. 4. Select the order in which you would like this banner image to appear (random order by default, 0 = first, 1 = second). 5. 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. ![Banner Sort](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9AmEqds3paditHKj%2FfilterBanner.png?generation=1556827654029551\&alt=media) 3. On the desired banner, select `edit`. 4. Make the required changes. 5. Once the above steps are completed, select `Save`. ## Removing a Banner Image 1. On the Administration bar, select `Find Content`. 2. Filter the content by "Banner" using the "type" dropdown menu. ![Banner Sort](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9AmQPPm8xybbJoDg%2FfilterBanner.png?generation=1556827654103744\&alt=media) 3. On the desired banner, select `delete`. **!IMPORTANT!**: Ensure that you are removing the correct banner image. ## 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. ![Configure Banner Block Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9Am_lOTTadMANrG4%2FconfigureBannerBlock.png?generation=1556827657993980\&alt=media) 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. 8. 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. ![Configure Banner Block Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9AmiKuKEGlWJk5d3%2FconfigureBannerBlock.png?generation=1556827654090214\&alt=media) 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 ``. 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](/ugcontenttypes/howto-banner#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. ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9Amo3UM84LI_OxKQ%2FcreateBannerPanel.jpg?generation=1556827654147365\&alt=media) 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 `` 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 `
` tag (if it isn't already). 5. An example of a image wrapped in a `
` tag is: ![](https://github.com/ccswbs/UoGd7-Training/tree/bbc19358d0cd69c9426a38c047f024ea7007324a/sites/default/files/YOURIMG.jpg) **Note: Don't forget the final `
` tag.** 6. Scroll to the bottom and click `Save blocks`. # Book * [Creating a Book](/ugcontenttypes/howto-book#creating-a-book) * [Editing a Book Page](/ugcontenttypes/howto-book#editing-a-book-page) * [Deleting a Book Page](/ugcontenttypes/howto-book#deleting-a-book-page) * [Attaching a File to a Book](/ugcontenttypes/howto-book#attaching-a-file-to-a-book) * [Assigning a Category to a Book](/ugcontenttypes/howto-book#assigning-a-category-to-a-book) The Book Feature permits **content creators** to organize content into ordered sections, similar to the chapters and pages of physical books. Books have a built-in hierarchical navigation, which means that they can be organized to be read in a particular order. Each book page contains a link to its parent page, as well as to the previous and next pages in the order specified. ![Example of a Book Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu96EXjCzN95EvXlFD%2Fbooksample.png?generation=1556827644058373\&alt=media) ## Creating a Book 1. On the Administration bar, select `Add Content`. ![Add Content Highlighted](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu96EZftZB9pBflJcj%2Fambac.png?generation=1556827643955174\&alt=media) 2. Select `Book Page`. 3. Enter the title of the book in the "Title" field. 4. If you have [book categories](/basicbeginner/taxonomies) defined, select the appropriate one. For more information, please see the [Assigning a Category to a book](/ugcontenttypes/howto-book#assigning-a-category-to-a-book) section. 5. Use the [Drupal Text (WYSIWYG) Editor](/basicbeginner/wysiwyg-editor) to fill the book with your desired content. 6. If you want to add any files (PDF, Docs, Images) to be attached to the book page and available for download by the user, you can do so by attaching them using the "File Attachment" option. For more iinformation, please see the [Attaching a File to a Book](/ugcontenttypes/howto-page#attaching-a-file-to-a-page) section. 7. Enter any *tags* or *keywords* that help categorize and organize your book page. 8. Under `Book outline`, select the book you want to publish the page to. If this is the first page of a new book, select the `create a new book` and enter the appropriate information. ![Book outline options](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu96EaR5g-HejSXs96%2Fbookoutline.png?generation=1556827644048607\&alt=media) 9. Under Book Outline, you have two options as to where to place the new Book Page: 1. **Create a new book**: This will create a new Book and make the current page the "Top Level Page". 2. **pick from previously created books**: This will add the book page to an already existing book. You have the ability to choose the location of the new page within the book. If adding a book page to a specific book, it is important to add a **Parent item** in the book and select the appropriate "weight" for the page. ![Book parent item option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu96Ec-qCX5aYoWalI%2Fbookparentitem.png?generation=1556827650876705\&alt=media) 10. If you have the [proper authority](/rolesandresp) to publish right away, ensure that the `Published` checkbox is checked under "Publishing options". 11. Once the above steps are completed, select `Save`. ## Editing a Book Page **/! Note**: Only one user can edit a book page at a time. If multiple users are editing a book page then content may be unsaved or lost. 1. Navigate to the book page you would like to edit. 2. Once you are at the book page you would like to edit, select `Edit`. ![Edit Tab](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U1_BXwXsrUFJ0y%2FcontentEditTab.png?generation=1556827639919609\&alt=media) 3. Edit the content on the book page by using the Drupal Text (WYSIWYG) Editor. 4. Once you have completed the above steps, select `Save`. ## Deleting a Book Page **/! Note**: If the book page is a parent item in a menu for other book pages, the book page will be deleted from the book page hierarchy. 1. Select `Find Content` on the Administration Bar. 2. Find the book page you would like to delete. **!IMPORTANT!**:Ensure you are deleting the correct book page. 3. Select `delete`. ## Attaching a File to a Book In order to attach a file to a book, the file must be **less than 20MB** and one of the following formats: * .txt * .pdf * .doc * .docx * .rtf * .png * .gif * .jpg * .jpeg * .zip * .xls * .xlsx * .ppt * .pptx * .csv * .dmg To attach a document to the book, please follow these steps: 1. Navigate to the book you would like to edit. 2. Select `Edit`. 3. Navigate to the "File Attachments" section. ![File Attachment Option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U7hylts7GxuX-4%2Fpageattach.png?generation=1556827640235693\&alt=media) 4. Select the `Choose file` button and navigate to the file you would like to attach. 5. Select `Upload`. 6. Once the file is uploaded, it will appear in the file attachments table. ![File Attachment Table](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95UATIvJa0ILqf9p%2Ffileattachmentchart-new.png?generation=1556827640890082\&alt=media) 7. For each attachment, you have the following options: * **Description Field**: Provide a description for the file so the user knows what the file contains. * **Display Checkbox**: If checked, the book attachment is visible to all users. If unchecked, the file is still attached to the book page and may be linked to, but it is not visible to site users. * **Remove Button**: Once selected, the attacment is removed. ## Assigning a Category to a Book Book categories allow for Books to be sorted via the given term/category. **/! Note**: The following steps assume that the book category has already been created. 1. Navigate to the book you would like to edit. 2. Select `Edit`. 3. Select the category you would like to place the book under using the dropdown menu under "Book Category." 4. Select `Save`. # Course Outlines The course outlines feature allows **Content Creators** to create and edit course outlines. Anonymous users can browse through these outlines in a listing page view and find more details about a specific course. ## Creating Terms for Vocabularies Before creating course outlines, add terms to the following vocabularies: * **Course outline category:** Create terms in this vocabulary to filter course outlines by area of study (e.g. Philosophy or History). * **Course outline term:** Use terms in this vocabulary to filter and group course outlines by academic term. The default values are Fall, Winter, and Spring. * **Course outline subject:** A list of course subjects (e.g. HIST, PSYC). * **Course outline academic department:** A list of academic departments. ## To Add Course Outlines 1. On the Administration bar, select `Add Content`. 2. Select `Course Outline`. 3. Enter a **Course name** and **Course code**. 4. Fill in any optional fields. If you decide to add a course instructor URL (can be used to link an instructor's profile or personal website), then entering a name in the "Course instructor" field is required. 5. Attach the course outline document. 6. Click `Save` when you are done. ## Add a menu link 1. On the Administration bar, select `Structure` > `Menus`. 2. Select **Main menu**: `add link`. 3. Enter a menu link title (e.g. Course outlines). 4. Enter the link path `course-outlines`. To create a menu link that lists course outlines for a single term, enter the path `course-outlines/[term-id]`, where \[term-id] is the term ID of a term in the Course outline term vocabulary. ## Filtering by category 1. On a course outline listing page, click `Customize this page`. 2. Select the cog icon (settings) for "View: C01 - Listing page for Mulitple Course Outlines." 3. In the "Category" field, enter the term ID of a term in the Course outline category vocabulary. # Events The Events feature allows **Content Creators** to add events to the website and display them in a Listing Page view, a Weekly Events view, a Monthly Calendar view, an Event Detail Page view, and an Upcoming Events Teaser List view. Any event can be featured on any page using the Featured Items block. Site visitors can also browse for events by date and event category. ![Example of an Event Display](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94BVP4EQbeP0kWrP%2Fevex.png?generation=1556827631156056\&alt=media) ## To Create an Event 1. From the top administration bar, navigate to `Add Content` > `Event`. 2. Enter a **Title**. 3. Enter the starting and ending **Dates and Time**. ![An example of Event Title and Time](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94BXZe0DtjbjFkIh%2Feventtitletime.png?generation=1556827631241501\&alt=media) 4. Enter a **Location**. ![An example of location](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94BZ00hEuHCEOGI1%2FLocation.png?generation=1556827633705497\&alt=media) 5. In the **Body field**, enter information about the event. ![An example of the body field](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94BaXoGEuyEAm0p_%2Feventbody.png?generation=1556827631564583\&alt=media) 6. Select your **Section** if you have defined one. * For sections, a **Taxonomy** for `Event_headings` needs to be created by the Site Manager. Example Sections: *Cost*, *Extra Directions*, *Dinner Menu Items*. Sections are optional. 7. Add a `feature image` if there is one for the event, such as a poster image. Images must be no smaller than 200x160 pixels and no larger than 1140x570 pixels. 8. Add a descriptive **Alternative Text**. 9. **Caption** is optional. ![An example of the body field](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94BcWnRJMbJpv_b_%2Feventfeatalt.png?generation=1556827633679482\&alt=media) 10. Add any files relevant to the Event and enter, and/or a related website with a descriptive title. 11. If you have the proper authority to publish, select `Published` in "Publishing options." 12. Select `Save`. # FAQ The *Frequently Asked Questions (FAQ)* feature allows **content editors** to create a repository of commonly asked questions and their corresponding answers. The FAQ page is automatically generated from the FAQ nodes configured and the layout of this page can be modified on the settings page. The generated FAQ page is always found at [www.uoguelph.ca/sitename/faq](http://www.uoguelph.ca/sitename/faq). * [Creating FAQ Nodes](/ugcontenttypes/howto-faq#creating-faq-nodes-questions-and-answers) * [FAQ Categories](/ugcontenttypes/howto-faq#faq-categories) * [FAQ Tags](/ugcontenttypes/howto-faq#faq-tags) ![Image example of an FAQ](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94SJJOLR8pFI2kqU%2FFAQexample.png?generation=1556827633427359\&alt=media) ## Creating FAQ Nodes (Questions and Answers) 1. On the Administration bar, navigate to `Add Content` > `FAQ`. 2. If you have [FAQ categories](/basicbeginner/taxonomies#categories) defined, select the appropriate one. See more information on categories below. 3. Enter the Question in the "Question" field. 4. Enter the Answer in the "Answer" field. ![Image of an FAQ](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94SN-t1dfoG4zuUh%2Ffaq.png?generation=1556827635405478\&alt=media) 1. Enter any tags or keywords that help categorize and organize your FAQ page. 2. Select `Save`. ## FAQ Categories Your website may have a variety of FAQs that are directed at different groups of people. When this is the case, you can use categories to organize FAQs. One FAQ can only be associated with **one** category. ### Creating FAQ Categories 1. When logged into your website, navigate to `Structure` > `Taxonomy`. 2. Select `list terms` from the `FAQ category` row. 3. Select `Add term`. 4. Enter a name for the FAQ category. Keep in mind that these names will be visible to your site users. Examples include "Students FAQ" and "Faculty FAQ." 5. Select `Save`. 6. When you navigate to your FAQ page at [www.uoguelph.ca/sitename/faq](http://www.uoguelph.ca/sitename/faq), you will see a sidebar list called "FAQ Topics" that has been generated for you. ### Assigning Categories to FAQ Nodes 1. Now that you have created an FAQ category, you need to assign questions to it. 2. From your FAQ page, select a question. You will be brought to that question's page. 3. Select `Edit`. 4. Using the "Category" drop-down menu, select the appropriate category. 5. Select `Save`. ## FAQ Keywords Your website may have some questions that apply to two or more groups of site users. In this case, you must use *keywords* instead of categories to organize FAQs. Additionally, tags can be used across Drupal content types, not just FAQs. This means you can tag a variety of news articles, events, FAQs, features, and more, as they pertain to a particular group. ### Creating Keywords 1. When logged into your website, navigate to `Structure` > `Taxonomy`. 2. Select `list terms` from the `Tags` row. 3. Select `Add term`. 4. Enter a name for the tag. Keep in mind that these names will be visible to your site users. Examples include "Undergraduate Students" and "Graduate Students." 5. Select `Save`. ### Associating Keywords with FAQ Nodes 1. Now that you have created a tag, you need to associate questions with it. 2. From your FAQ page, select a question. You will be brought to that question's page. 3. Select `Edit`. 4. In the "Keywords" field, type in the name of the tag. You can add multiple tags if needed, separated by a comma and a space. ![FAQ Keyword Field](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94SQkUqsytkXc7xF%2FFAQ-tags.png?generation=1556827634997198\&alt=media) 5. Select `Save`. 6. When you return to the question page you were editing, you should see a listing of its associated keywords (tags) in the sidebar. ![FAQ Associated Keyword Listing](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94SS4VlZyEQ0oSK7%2FFAQ-keyword%20listing.png?generation=1556827633578680\&alt=media) # Featured Item The *Featured Item* allows **Content Creators** to create a lead-in to any page content on the website (e.g. Events, News, Basic Page, People Profiles, etc.) or an external URL. Featured Items are usually set to be displayed on the front page. * [Creating a Featured Item](/ugcontenttypes/howto-featured#to-create-a-featured-item) * [Featured Item Views](/ugcontenttypes/howto-featured#featured-item-views) * [Features Listing Page](/ugcontenttypes/howto-featured#features-listing-page) ![An Example of a Featured Item](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95WyV64mwYcKUpdT%2FfIex.png?generation=1556827639312152\&alt=media) ## To Create a Featured Item 1. From the top administration bar, navigate to `Add Content` > `Feature`. 2. Enter a **Title**. 3. If you have [page categories](/basicbeginner/taxonomies) defined, select the appropriate one. 4. Upload an **Image** for the Featured Item by selecting `choose file`. * Add descriptive **alternative text**. If the image is a link, the alt text must describe the destination. * Featured images should be 760x570px and should pertain to the subject matter. 5. Enter the direct link to the Featured Item, such as an Event or News Article page, in the "Link" field. ![Feature Item link options](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X0knKfLGfDiAm-%2Ffeatitleimglink.png?generation=1556827638686735\&alt=media) 6. Enter a short **Summary**. 7. Enter a few **Keywords** to help tag the Featured Item. ![Feature Item link options](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X22Jx3zn_qRHn1%2Ffeatitleimglink.png?generation=1556827638611544\&alt=media) 8. If you have the proper authority to publish, select `Published` in "Publishing options." ![Example of publishing options](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X4Qo9VAsqQwdNG%2Fpubopt.png?generation=1556827639283351\&alt=media) 9. Select `Save`. ## Featured Item Views In-Place Editor allows you to arrange panes and edit some settings on the fly. 1. On the main page, select **Customize this page**. ![Customize This Page highlighted](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X6-rxbc9SW5JwN%2FCustomize.png?generation=1556827638995273\&alt=media) 1. Choose any of the location areas to place a new view (i.e. top, middle column, right side, etc.) and select `+`. ![Add button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LdteRI9Xr8u4saEoR5u%2F-LdteW33GyPd768Rn6LV%2Fadd.png?generation=1556819351077162\&alt=media) 2. Select `View Panes` and then select either `FT3` or `FT3 - Random` views, depending on your needs. ![add button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95XAj3xQDRzci0gc%2Fft3view.png?generation=1556827639987101\&alt=media) 3. Select `Continue`. 4. Select `Finish`. ## Features Listing Page If you navigate to [www.uoguelph.ca/sitename/features](http://www.uoguelph.ca/sitename/features), you will find the Features listing page, where a list of all your features is stored. This listing page can also be filtered by categories and keywords. This is useful if your website houses multiple departments with their own features, or if different features pertain to different audiences. To filter features, add terms to the "Feature category" vocabulary under `Structure` > `Taxonomy`. Add Keywords by navigating to `Structure` > `Taxonomy` > `Tags`. For more information on categories and keywords, see the [Taxonomies](/basicbeginner/taxonomies) page. # News The *News* feature allows **Content Creators** to add news articles to the website and display them in a Listing Page view, an Article Detail Page view, and a Recent News Teaser List view. Any article can be featured on any page using the Featured News Article view. Site visitors can also browse for news articles by date and category tag. ![An Example of a News Item.](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu949rHjk-QS1S3xk7%2Fneex.png?generation=1556827633978848\&alt=media) ## To Add a News Article 1. On the Administration bar, navigate to `Add Content` > `News`. 2. Enter a **Title**. 3. If you have [news categories](/basicbeginner/taxonomies) defined, select the appropriate one. 4. Enter a **Written by** personal or organizational name. 5. In the body field, enter what you want displayed on your web page. [Here is more information on how to use the WYSIWYG editor.](/basicbeginner/wysiwyg-editor) ![Example of Written by and Body fields](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu949uUX7ufsac_fQx%2Fnewstitlebody.png?generation=1556827633519775\&alt=media) 6. Add a feature image if there is one for the news, such as an image of the subject matter. **Alternative Text** is required if the image is not a decorative one. Images must be no smaller than 640x240 pixels and no larger than 1140x570 pixels. 7. Add a **Caption**. ![Example of Featured Image option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu949wUTJcASq8fsNx%2Fnewsfeatureimg.png?generation=1556827632949740\&alt=media) 8. Enter any *tags* or *keywords* that help categorize and organize your article. 9. If you have the proper authority to publish, select `Published` in "Publishing options." 10. Select `Save`. # Page * [Creating a Page](/ugcontenttypes/howto-page#creating-a-page) * [Editing a Page](/ugcontenttypes/howto-page#editing-a-page) * [Deleting a Page](/ugcontenttypes/howto-page#deleting-a-page) * [Attaching a File to a Page](/ugcontenttypes/howto-page#attaching-a-file-to-a-page) * [Assigning a Category to a Page](/ugcontenttypes/howto-page#assigning-a-category-to-a-page) * [Page Keywords](/ugcontenttypes/howto-page#page-keywords) The **Page** content type is used for static content that can be linked into the main navigation bar. This is one of the most basic content types and is very flexible. ![Example of a Basic Page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U-uPFMojj1-jBI%2Fpaex.png?generation=1556827640725655\&alt=media) ## Creating a Page 1. From the Administration bar, navigate to `Add Content` > `Page`. 2. Enter the title of the page in the "Title" field. 3. If you have [page categories](/basicbeginner/taxonomies) defined, select the appropriate one. For more please see the [Assigning a Category to a Page](/ugcontenttypes/howto-page#assigning-a-category-to-a-page) section. 4. Use the [Drupal Text (WYSIWYG) Editor](/basicbeginner/wysiwyg-editor) to fill the page with your desired content. 5. If you want to attach any files (PDF, Docs, Images) to the page and be availiable for download by the user, you can do so using the "File Attachment" option. For more please see the [Attaching a File to a Page](/ugcontenttypes/howto-page#attaching-a-file-to-a-page) section. 6. If you want this web page to be accessed through your website menus, visit the [Managing Menus](https://github.com/ccswbs/UoGd7-Training/tree/aa9e2af0dea5bf798b73544e291e912caea4a6e4/menuitems.html#adding-content-to-a-menu) section. 7. If you have the [proper authority](/rolesandresp) to publish, ensure that the `Published` checkbox is checked under "Publishing options." 8. Once the above steps are completed, select `Save`. ## Editing a Page **/! Note**: Only one user can edit a page at a time. If multiple users are editing a page then content may be unsaved or lost. 1. Navigate to the page you would like to edit. 2. Once you are at the page you would like to edit, select the `Edit` option. ![Edit Tab](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U1_BXwXsrUFJ0y%2FcontentEditTab.png?generation=1556827639919609\&alt=media) 3. Edit the content you would like to edit on the page by using the Drupal Text (WYSIWYG) Editor. 4. Once you have completed the above steps, select `Save`. ### Reverting a Page If you would like to go back to a previous version of the page, follow these steps: 1. Navigate to the page you would like to edit. 2. Once you are at the page you would like to edit, select `Revisions`. ![Revisions Tab](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U3lOdE2A3i_ViG%2FcontentRevisionsTab.png?generation=1556827640387830\&alt=media) 3. You will see a page that lists the previous versions of the page. Every time a page is saved a new revision version is created. ![File Attachment option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U5M0R_cJDuePo1%2FrevisionsPage.png?generation=1556827640187171\&alt=media) 4. You can compare revisions by selecting two versions of the page and selecting `Compare`. ## Deleting a Page **/! Note**: If the page is a parent item in a menu for other pages, the page will be deleted but not removed from the menu structure. Therefore, if selected, the user will encounter a [404 Error](/basicbeginner#common-web-errors). 1. Select `Find Content` on the Administration Bar. 2. Find the page you would like to delete. **!IMPORTANT!**:Ensure that the page selected is the page you would like to delete. 3. Select `delete`. ## Attaching a File to a Page In order to attach a file to a page, the file must be **less than 20MB** and in one of the following formats: * .txt * .pdf * .doc * .docx * .rtf * .png * .gif * .jpg * .jpeg * .zip * .xls * .xlsx * .ppt * .pptx * .csv * .dmg To attach a document to the page, please follow these steps: 1. Navigate to the page you would like to edit. 2. Select `Edit`. 3. Navigate to the "File Attachments" section. ![File Attachment Option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95U7hylts7GxuX-4%2Fpageattach.png?generation=1556827640235693\&alt=media) 4. Select `Choose file` and navigate to the file you would like to attach. 5. Select `Upload`. 6. Once the file is uploaded, it will appear in a table under "File Attachments." ![File Attachment Table](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95UATIvJa0ILqf9p%2Ffileattachmentchart-new.png?generation=1556827640890082\&alt=media) 7. For each attachment, you have the following options: * **Description Field**: Provide a description for the file so the user knows what the file contains. * **Display Checkbox**: If checked, the page attachment is visible to all users. If unchecked, the file remains attached to the page and can be linked to, but it is not visible to site users. * **Remove Button**: Once selected, the attachment is removed. ### Linking to Attached Files If you would like to create a link to a file on your webpage, the AODA Remediation Team recommends attaching the file to the page first. To link to an attached file, follow these steps: 1. In the Drupal text editor, locate the piece of text you would like to use for your link text and highlight it. 2. With the link text highlighted, click the "link" button. This will open the link dialog box 3. From the "Link Type" dropdown menu, select `URL`. 4. With the file opened in a new tab, copy the **path** and paste it into the URL field. The path is the part of the URL **after** . 5. Select `OK`. 6. Scroll to the bottom of the editing page and select `Save`. ## Assigning a Category to a Page Page categories allow for pages to be sorted via the given term/category. **/! Note**: The following steps assume that the category has already been created. 1. Navigate to the page you would like to edit. 2. Select `Edit`. 3. Select the category you would like to place the page under using the dropdown menu under "Page Category." 4. Select `Save`. ## Page Keywords 1. Navigate to the page you would like to edit. 2. Select `Edit`. 3. Navigate to the "Keywords" section. ![Keywords Section](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95UCzv5QkCGRq1x4%2FpageKeywordsEmpty.png?generation=1556827640186646\&alt=media) 4. Enter the keywords for the page. Separate each word with a comma, but no space (eg: example,test,showcase). ![Example Keywords Filled](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95UKoSX8_7_Ino83%2FpageKeywordsFull.png?generation=1556827640577731\&alt=media) 5. Select `Save`. # People Profiles The people profiles feature allows **Content Creators** to create and edit an organizational profile. Anonymous users can browse through these profiles in a listing page view and find more detail about a specific member of an organization by clicking on that member's name. * [Using Taxonomy for People Profiles](/ugcontenttypes/howto-profiles#using-taxonomy-for-people-profiles) * [How to Add People Profiles](/ugcontenttypes/howto-profiles#how-to-add-people-profiles) * [NEW: Tabbed layouts for People Profiles](/ugcontenttypes/howto-profiles#new-tabbed-layouts-for-people-profiles) * [Customizing People Profiles Layout](/ugcontenttypes/howto-profiles#customizing-people-profiles-listing-page) ## Using Taxonomy for People Profiles Before creating a profile, it is suggested that the following taxonomy vocabularies are filled with terms. Otherwise, most of the people profile features will be unusable. Add terms to the following: 1. **Area of research:** If applicable, you can describe the different areas of research for your department/users. This is optional. Example: *Molecular Interactions of Di-hydrogen Monoxide*. 2. **Profile category:** This is a way to filter views. Example: *create a teaser view for specific departments within a college*. 3. **Profile field labels:** This is for adding extra field headings that are not already supported by the platform. Examples: *Interests, Office Extension, Favorite Color, etc.* 4. **Profile section labels:** Profile sections are used to separate and organize parts of the people profile. Examples: *Research, Education, Selected Publications, etc.* 5. **Profile role:** Clients can create any number of positions/roles for their needs. Examples: *Staff, Faculty, Students, Co-op, etc.* 6. **Profile unit:** This describes the title of the department or faculty an individual is a part of. 7. **Profile sub unit:** This is the sub-unit of a department. Example: *Web Business Solutions* is a sub-unit of *CCS*. ### How to Add Vocabulary Terms 1. Using the administration bar, navigate to `Structure` > `Taxonomy`. 2. You will see a long list of vocabularies. Seven of these vocabularies (listed above) are related to people profiles. Select `list terms` for the vocabulary you would like to add terms to. 3. From the vocabulary (list of terms) page, select `Add term`. 4. Enter a name for the term. Enter a description if needed. 5. Select `Save`. #### Taxonomy: Profile Field Labels This vocabulary allows you to add custom fields to your people profiles. Add terms to this vocabulary to determine the field labels. For instance, if the field were to show "*Interests:* Sports", then "Interests" would be a term in the `profile field labels` category. After custom fields are created through taxonomy, they can be added through the "*PROFILE FIELDS*" section that appears when creating or editing a profile. The Label drop-down menu is populated with the terms from the vocabulary above. Fields will appear in the same order as they are entered, but can be reordered by dragging. Custom fields will always appear *after* preset fields (i.e. Email, Phone Number, Fax, Office, and Lab). Do not confuse this vocabulary with `profile section labels` vocabulary, which is used for adding larger sections that use the Drupal text editor. ## How to Add People Profiles 1. On the Administration bar, navigate to `Add Content` > `Profile`. 2. Begin filling out the profile, starting with adding a **Preferred name** and **Last name**. 3. Many of the fields in the profile are optional, but it is recommended to add at least a name, role, and contact information. 4. Add any related **File** or **Image Attachments**. Remember to select `Upload` after choosing your file. 5. If the member also has a `Website Link` then include a **title** and **URL**. 6. In order to add `Profile Sections`, select a value under **Heading** and enter any **Content** needed. Keep in mind that by clicking **Add another item**, you can add as many `Profile Sections` as you like. 7. Enter any *tags or keywords* that help categorize and organize your people profiles. 8. Select `Save` when you are done. ### NEW: Tabbed layouts for People Profiles If you used `Profile Sections` as per Step 6 above, all the values you filled in for **Heading** and **Content** will automatically be output in tabbed format as shown in the screenshot below: ![Example of tabs generated by Profile Sections](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93asCZegBFN4P-tW%2Ftabbed-profile.png?generation=1556827632667929\&alt=media) Any content entered in the `Summary` and `Body` fields will remain as-is. If you have an existing profile where all the content and headings (e.g. *Research*, *Awards*, *Publications*, etc) were entered in the `Body` field, consider using `Profile Sections` instead if you'd like to get the new tabbed layout (available as of [Release v27.2](https://github.com/ccswbs/hjckrrh/releases/tag/7.x-27.2)) ## Customizing People Profiles Listing Page You have the ability to change the size and alignment of the pictures on the people profile listing page, which is visible to site users. Follow these steps to customize your listing page: 1. Navigate to [www.uoguelph.ca/sitename/people](http://www.uoguelph.ca/sitename/people), or navigate to your people profiles page via your site menu. 2. Select `Customize this page` at the bottom of the screen. 3. You will see the PP1 view pane in the `Left` section, similar to this image: ![Example of PP1 view pane](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93awo_rRdPC5Q08J%2Fprofiles-PP1view.png?generation=1556827634711483\&alt=media) 4. To change either the size or alignment of the images, first, delete the PP1 viewpane by selecting the trash can button. This will *not* delete your people profiles. 5. Under the `Left` section, select `+` (plus sign). The "Add Content" window will open. 6. In the side menu, select `View panes`. From the list of view panes, select `View: PP6 Custom Listing`. 7. When the "Configure new View: PP6 Custom Listing" opens, check **ONE** of `Content: Image (Small Image)` or `Content: Image (Large Image)`. 8. Check `Content: Align names` if desired. This will ensure that on the listing page, names with no image are aligned with other names, for a neater presentation. ![Example of Configure new View: PP6 Custom Listing Window](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93aywAhK9ZzeOGzr%2Fprofiles-configurePP6-2.png?generation=1556827634405328\&alt=media) 9. Select `Finish`. 10. When the configuration window closes, make sure to select `Save` at the bottom of the screen. 11. If you need to reconfigure the settings for the PP6 view pane, simply select the cog button at the top of the view pane. # Service "Service" is a UG Drupal content type that designed for departments that offer a variety of detailed services. The content type provides a convenient way to describe services, and can also organize services by the audience they are directed at. * [How to Add Services](/ugcontenttypes/howto-services#how-to-add-services) * [Creating Service Categories](/ugcontenttypes/howto-services#creating-service-categories) * [Creating Service Detail Headings](/ugcontenttypes/howto-services#creating-service-detail-headings) * [Creating Service Audiences](/ugcontenttypes/howto-services#creating-service-audiences) * [Creating Internal Notes Headings](/ugcontenttypes/howto-services#creating-internal-notes-headings) **/! Note:** Before adding a service, make sure to use [Taxonomy](/basicbeginner/taxonomies) to add service categories, service detail headings, service audiences, and internal notes headings. Instructions are found on this page. ## How to Add Services 1. From the top administration bar, navigate to `Add Content` > `Service`. 2. Enter a title for the service. 3. Select the correct service category. 4. Add a brief description of the service and a price, in the "price" text field, if applicable. 5. If needed, add more content in the "Service Details" section. Select `Add another item` to add more detail sections. 6. Under "Who can use this service?" check the appropriate audience(s). 7. If needed, add internal notes. These are not visible to website users. 8. If appropriate, add Keywords and select any Related Services. 9. Select `Save`. ## Creating Service Categories 1. From the top administration bar, navigate to `Structure` > `Taxonomy`. 2. In the "Service category" row, select `add terms`. 3. Enter a name. Select a service icon from the drop-down menu if desired. 4. Select `Save`. ## Creating Service Detail Headings 1. From the top administration bar, navigate to `Structure` > `Taxonomy`. 2. In the "Service public heading" row, select `add terms`. 3. Enter a name. 4. Select `Save`. ## Creating Service Audiences 1. From the top administration bar, navigate to `Structure` > `Taxonomy`. 2. In the "Service audience" row, select `add terms`. 3. Enter a name. 4. Select `Save`. ## Creating Internal Notes Headings 1. From the top administration bar, navigate to `Structure` > `Taxonomy`. 2. In the "Service private heading" row, select `add terms`. 3. Enter a name. 4. Select `Save`. # Social Media Account The social media feature permits **Content Creators** to add social media links to their website and display them on any page. Site visitors can click on the social media icon and be directed to the associated web page. Drupal also allows live social media feeds to be shown on your webiste. For a list of all social media accounts attached to a website, add `/connect` to the end of the homepage URL (Eg. ). ## To Add "Follow Us" Social Media Links: **First**, add a social media account: ### To Add a Social Media Account: 1. From the Administration bar, navigate to `Add Content` > `Social Media Account`. 2. Enter a **Title**. 3. If you have an [Account Category](/basicbeginner/taxonomies) defined, select the appropriate one. 4. Select the social media network from the drop down list. 5. Enter your Account URL - *Usually found by going to your social media homepage and copying the URL.* 6. Enter any *tags* or *keywords* that may assist in categorizing and organizing your social media. * ![Description](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu965h7_pX0IUzGLmH%2FDescription.png?generation=1556827642165137\&alt=media) 7. Select `Save` when you are done. **Next**, add the view pane to display social media icons: ### To Display Social Media Icons: 1. Go back to the *Home page* and select `Customize this page` at the bottom of the Web Page. * ![Customize button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X6-rxbc9SW5JwN%2FCustomize.png?generation=1556827638995273\&alt=media) 2. Choose any of the location areas to place your social media links (i.e. top, middle column, right side, etc) and select `+`. * ![Add button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X8T_fUwntToGsu%2Fadd.png?generation=1556827639875570\&alt=media) 3. Click on `View Panes` and select either `S3` or `S4` views depending on your needs. * ![add button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu965jMESLezXawOQO%2Fviewsocial.png?generation=1556827642691480\&alt=media) 4. Select `Continue`. 5. Select `Finish`. # Live Feeds * [Live Twitter Feeds](/ugcontenttypes/howto-socialmedia/howto-livefeeds#to-add-a-live-twitter-feed-to-the-home-page) * [External Source Live Feed](/ugcontenttypes/howto-socialmedia/howto-livefeeds#to-display-a-live-feed-from-an-external-source) * [Multiple Combined Event Feeds](/ugcontenttypes/howto-socialmedia/howto-livefeeds#to-display-multiple-combined-event-feeds) * [Multiple Combined Feeds (All Feeds)](/ugcontenttypes/howto-socialmedia/howto-livefeeds#to-display-multiple-combined-feeds-all-feeds) ## To Add a Live Twitter Feed to the Home Page: 1. From the top administration bar, navigate to `Configuration` > `Web Services` > `Twitter`. 2. At least one authenticated Twitter account is needed to have a live feed work properly. After the authenticated account is set up, you can also pull tweets from non-authenticated accounts, as long as you know the twitter handle (@username). 3. Select `Go to Twitter to add an authenticated account`. You will be prompted to sign into your Twitter account. 4. Enter your username and password, then select `Authorize app`. 5. Now that your authenticated account has been added, add any required non-authenticated accounts but pasting the handle in the "Twitter account name" field. 6. Next, return to the home page. Select `Customize this page` at the botton of the screen. 7. For the appropriate region, select `+` (plus sign). 8. When the Add Content window opens, select `View panes` from the side menu. 9. Select `View: S5 - Live Feed (Twitter)` from the list. 10. In the "Num item" field, enter the number of tweets you would like to be displayed at a time. 11. Select `Finish`. 12. Select `Save` at the bottom of your screen. ## To Display a Live Feed from an External Source: ### Step One: Add the Live Feed 1. From the administration bar, navigate to `Configuration` > `Feed aggregator` > `Add feed`. 2. Enter the title and URL for the feed. 3. Set the update interval and number of news items shown in the block. 4. Categorize the news items if categories are defined. 5. Select `Save`. ### Step Two: Find the Aggregator Feed ID 1. From the Feed aggregator menu, click on the name of the feed. In the URL, you will see the feed ID, at `/aggregator/sources/`. ### Step Three: Add the Live Feed View Pane 1. From the page you would like to add a live feed to, select `Customize this page` at the botton of the screen. 2. For the appropriate region, select `+` (plus sign). 3. When the Add Content window opens, select `View panes` from the side menu. 4. Select `View: S5 - Live Feed` from the list. 5. Override the title and add a new one if desired. If it is not overridden, no title will show. 6. Enter the Aggregator Feed ID. 7. Select `Finish`. 8. Select `Save` at the bottom of the page. ## To Display Multiple Combined Event Feeds: ### Step One: Create a Feed Category 1. From the administration bar, navigate to `Configuration` > `Feed aggregator` > `Add category`. 2. Enter a title for the feed category, like "Events." 3. Select `Save`. ### Step Two: Add Feeds to the Feed Category 1. On the Feed aggregator page, find the name of a feed you would like to add to your new category. 2. Select `edit` beside the feed's name, under "Operations." 3. Under "Categorize news items," select the name of your new category. 4. Select `Save`. 5. Repeat steps 1-4 for any additional feeds you would like to add to a category. ### Step Three: Add the `EA1 - Upcoming Events teaser list` View Pane 1. From the page you would like to add a combined live feed to, select `Customize this page` at the botton of the screen. 2. For the appropriate region, select `+` (plus sign). 3. When the Add Content window opens, select `View panes` from the side menu. 4. Select `View: EA1 - Upcoming Events teaser list` from the list. 5. Change the number of items to display and override the title if desired. 6. Select `Finish`. 7. Select `Save` at the bottom of the page. ## To Display Multiple Combined Feeds (All Feeds): ### Step One: Create a Feed Category 1. From the administration bar, navigate to `Configuration` > `Feed aggregator` > `Add category`. 2. Enter a title for the feed category. 3. Select `Save`. ### Step Two: Add Feeds to the Feed Category 1. On the Feed aggregator page, find the name of a feed you would like to add to your new category. 2. Select `edit` beside the feed's name, under "Operations." 3. Under "Categorize news items," select the name of your new category. 4. Select `Save`. 5. Repeat steps 1-4 for any additional feeds you would like to add to a category. ### Step Three: Find the Aggregator Feed ID 1. On the Feed aggregator page, you will see the category you created appear under "Category overview." 2. Click on the new category. 3. You will see the Aggregator category ID in the URL, at `/aggregator/categories/`. ### Step Four: Add the `S5 - Live Feed (Category)` View Pane 1. From the page you would like to add a combined live feed to, select `Customize this page` at the botton of the screen. 2. For the appropriate region, select `+` (plus sign). 3. When the Add Content window opens, select `View panes` from the side menu. 4. Select `View: S5 - Live Feed (Category)` from the list. 5. Override the title and add a new one if desired. If it is not overridden, no title will show. 6. Enter the Aggregator Category ID. 7. Select `Finish`. 8. Select `Save` at the bottom of the page. # Webform Drupal's Webform module allows you to collect information from site users. After a webform submission, users as well as adminsitrators can receive confirmation. Results can be exported into Excel or other spreadsheet applications. ***/! Note***: If Google reCAPTCHA is not enabled on your site please email your Drupal Contact at CCS or email to enable this feature. ## Creating a Webform ### Basic Form Details 1. From the Administration bar, navigate to `Add content` > `Webform`. 2. Enter a title for your webform and click `Save.` ### Form Components 1. Start adding components by entering the component label and the type of component it is, then click `Add`. 2. You can set any type of field as mandatory or optional. #### Add Textfield or Textarea A textfield is for short entries like names, while a textarea is a large area for longer responses. 1. Fill in a new label and choose the **Textfield** or **Textarea** type from the drop down menu. Click `Add`, and complete the options on the next screen. * On the next screen, you can specify the **Maxlength** of a textfield, a placeholder, or any prefix or postfix that you want to appear in the textfield. * You can also enable a textarea to be resizeable. #### Add a "Select" field 1. Fill in a new label and choose the **Select options** type from the drop down menu. Click `Add` and complete the options on the next screen. 2. To create the list of options, go to `Options` and create Key Value Pairs. * These pairs consist of a machine readable key and a plain language value separated by a "|" - you can find it by holding shift while pressing the backslash key "\\" key on most keyboards. 3. Key value pairs MUST be specified as **safe\_key|Some readable option**. 4. Enter one option per line. 5. Click `Save component`. NOTE: When you are creating lists, the default type is radio buttons. The option to select a listbox instead is found down the page in the "Display" section. For accessibility reasons, do not use the radio buttons or checkboxes option, as these options are not screen reader friendly will fail accessibility checks. ### Configure E-Mail options #### Receiving the submitted webform 1. Go to the `WEBFORM` tab and click on the `E-mails` sub-tab 2. Fill in the e-mail address you want the form to be sent to and click `Add`. You can add multiple e-mail addresses. 3. On the next page, you can set the Subject, From Address, From Name, and E-mail contents. #### Sending a Confirmation Email to Users who have Submitted a webform **Step 1a – Ensure that the webform has an Email input field (using Type: E-mail).** 1. Under `Find content`, search for your Webform and select `Edit`. 2. Select the `Webform` tab. 3. Select the `Form components` tab. 4. Under the list of form components, search for the Email form component that captures the email address for the confirmation email. * If there is an Email form component and the **Type** is `E-mail`, proceed to Step 2. * If there is an Email form component, but the **Type** is not `E-mail` proceed to Step 1b. * If there is no Email form component and you wish to add one, proceed to Step 1c. **Step 1b – Delete the old Email input field that is not using Type: E-mail** This step is only necessary if the “Type” for your Email form component is not `E-mail`. 1. At this point, you should be viewing the Webform/Form components tab of your webform. If you are not viewing this page, return to Step 1a. 2. Take note of any settings for the Email input field you wish to delete (eg. Label, Required checkbox). Remember that you will want to recreate these settings when you recreate the Email input field. 3. Select `Delete` on the Email form component row. 4. Proceed to Step 1c. **Step 1c – Create a new Email input field that uses Type: E-mail** 1. At this point, you should be viewing the Webform/Form components tab of your webform. If you are not viewing this page, return to Step 1a. 2. At the bottom of the Form components table, use the very last row to add a new component. * Add the name of your new component using the **New component name** input field. * Select `E-mail` under the "Type" dropdown for your new component row. * Check `Required` if the email field is required. * Select `Add`. **Step 2 – Configure your webform to send confirmation emails to users.** At this point, you should have at least one Email form component on your webform that uses Type: `E-mail`. If you do not have an Email form component of type `E-Mail`, return to Step 1c. 1. Under `Find content`, search for your webform. 2. Select `Edit`. 3. Select the `WEBFORM` tab. 4. Select the `E-mails` tab. 5. Click on the `Component value` radio button and select the component of the webform that captures the email address (it should match the label for your "Email" field). 6. Click on the `Add` button. 7. On the next page, you can set the E-mail subject, E-mail From Address, E-mail From Name, and E-mail contents. * Disclaimer: Users must switch from a `Default Template` to a `Custom Template`, otherwise the form submission values will not be included in the E-Mail 8. Once you’ve set the email details, click `Save e-mail settings`. # Accessible Content Guide This guide can be referred to for assistance with many aspects of accessible content creation. * [Accessibility Basics](/accessiblecontentguide/accessibilitybasics) * [Content Titles & Headings](/accessiblecontentguide/content-titles-and-headings) * [Links](/accessiblecontentguide/links) * [Colour](/accessiblecontentguide/colour) * [Documents](/accessiblecontentguide/documents) * [Images](/accessiblecontentguide/images) * [Tables](/accessiblecontentguide/tables) * [Lists](/accessiblecontentguide/lists) * [Audio & Video](/accessiblecontentguide/audio-video) * [Other content](/accessiblecontentguide/other-accessible-content) * [Known Issues](https://github.com/ccswbs/UoGd7-Training/blob/master/accessiblecontentguide/known-issues-a11ly.md) # Accessibility Basics ## [Accessibility First Content Development](/accessiblecontentguide/accessibilitybasics/whyaccessibility) This module provides an overview of the many benefits of accessible website design. It is targeted to site managers and owners. ## [HALT: Accessibility with the Drupal Text Editor](/accessiblecontentguide/accessibilitybasics/halt) This module provides an overview of how to make content accessible when using the Drupal text editor, or WYSIWYG editor. It is targeted to content creators whose focus is on writing and publishing basic content. ## [Accessible Design Intro](/accessiblecontentguide/accessibilitybasics/accessibilitytop) This module provides an overview of accessible website design. It is targeted to site managers or those who have control over a website's design and layout. # Accessibility First Content Development ## Accessibility and AODA Accessible design is good for all. Large public-sector organizations usually have large, multi-page, multi-department, and often cumbersome websites. How many times has someone tried to access information on such a site only to be frustrated and give up? How many times has that happened to you? It is a common experience for people both with and without disabilities. Fustrastions with finding information on websites can be lessened through accessible and universal design. This means that content, presentation, and navigation are all clear, streamlined, and flexible. An accessible website is beneficial to all users and certainly to the organizations that create them because it means the website is better able to reach all members of a target audience. **The Accessibility for Ontarians with Disabilities Act, 2005 (AODA)** became law on June 13, 2005. Under this landmark legislation, the Government of Ontario has developed mandatory accessibility standards that identifies, removes, and prevents barriers for people with disabilities. Disability impacts the lives of many Ontarians, and the numbers of people with disabilities is increasing. Today, 15.5% of Ontario’s population has a disability and this number will continue to grow as the population ages. ## WCAG 2.0 Principles, Guidelines and Criteria The AODA requires that beginning January 1, 2014, new public websites, significantly refreshed websites and any web content posted after January 1, 2012 must meet **Web Content Accessibility Guidelines (WCAG) 2.0** Level A. And beginning January 1, 2021, all public websites and web content posted after January 1, 2012 must meet **WCAG 2.0 Level AA**. WCAG 2.0 is an internationally accepted standard for web accessibility developed by the **World Wide Web Consortium (W3C)**, an international team of experts. Following these guidelines should make it easier for everyone to access your website and content. WCAG 2.0 has 12 guidelines that are organized under 4 principles: Perceivable, Operable, Understandable, and Robust. For each guideline, there are testable success criteria, which are ranked at 3 levels: A, AA, AAA. Redeveloping a website to better serve people with disabilities also has these additional benefits: ### Better Search Engine Optimization (SEO): * More headings and subheadings, as well as alt (alternative) texts for images, means more content is available for search engines to crawl over. ### Accessible design works well with good mobile design: * No organization can ignore the popularity of mobile devices to access the web. A University or College looking to recruit more students will want a website that works well on a small screen. Walk-in clinics and ERs will want information on their locations and hours of operation easily accessed on a cellphone. Accessible design and responsive design share many best practices. For example, always including keyboard commands for navigation. ### Reaching people less fluent online, people with low literacy, or those who are not fluent in the language of the site: * A University or College may also be looking to recruit continuing education or international students. A city website listing amenities and tourist attractions may be accessed by would-be vacationers speaking a myriad of languages. Accessible design includes these helpful elements: clear, simple, and consistent language; navigation and links; supplemental illustrations; blocks of information divided into groups with appropriately tagged headings and subheadings; text that does not blink or flash; and online forms that provide users enough time to read and use content. ### Reaching people accessing websites in noisy environments or with hearing disabilities: * Captioning of audio content is essential for this group. ### Reaching people with low-bandwidth connections or older technologies: * An organization cannot assume that everyone's access to the web is of the same quality. Accessible design emphasis on alt texts and text alternatives for all multimedia and images allows users to bypass these bandwidth-hogging elements without losing any information. ## More about Accessibility The following links will provide more information in regards to accessibility: * [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) * [AODA Legislation](https://www.ontario.ca/laws/regulation/110191) * [Siteimprove Resources](http://siteimprove.com/resources/) # HALT: Accessibility with the Drupal Text Editor This module is designed as an overview of techniques that content creators can use to make websites more accessible. Small changes based on these guidelines will make a big difference for assistive technology users. ## What is H.A.L.T? [**H**eadings](/accessiblecontentguide/accessibilitybasics/halt#headings) [**A**lternative Text](/accessiblecontentguide/accessibilitybasics/halt#alternative-text) [**L**ists](/accessiblecontentguide/accessibilitybasics/halt#lists) [**T**ables](/accessiblecontentguide/accessibilitybasics/halt#tables) H.A.L.T addresses some common accessibility issues for static content on the Drupal content management system (CMS). ## Headings For users who cannot visually perceive the layout of information on a web page, assistive technology helps them navigate quickly by reading a list of headings found on the page. However, assistive technology can only tell that a piece of text is a content heading if the code indicates that it is. In HTML, headings are denoted with `` tags. These tags have six levels: ![Heading Tag Levels H1-H6](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94wfg4jCQ1AWQZEb%2Fheading-tags.jpg?generation=1556827636543806\&alt=media) ![Heading Tags with Subheadings Shown](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94wh5cfTS3mayFpy%2Fheading-subheads.gif?generation=1556827637493482\&alt=media) When using Drupal, you can set headings with the rich text editor, also known as the WYSIWYG editor. Highlight some text, and then select a heading level from the "paragraph format" drop-down menu: ![WYSIWYG Editor with Headings Drop-Down Menu](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94XMWT61jyoqSrI9%2FHeadings-drop-down-WYSIWYG-2.png?generation=1556827634910553\&alt=media) For each piece of text, the bottom bar of the text editor lists the HTML elements it is marked up with, including any heading tags. **/! Note**: Do not use heading elements simply to increase font size, and do not use *empty* heading elements to create space on the page. These improper uses of headings will make the web page less accessible. ## Alternative Text Alternative text, or "alt text" for short, is a brief description of a image on a webpage. Alt text is not visible on the page, but it is essential for creating accessible content. Users who cannot see images on the screen depend on alt text, which can be read aloud by assistive technology. There are a few important things to know about alt text: * Alt text should be kept short and descriptive. * Alt text is necessary for images that provide information to the user. * Alt text should not be attached to images that are purely decorative. * Alt text for a linked image must describe the link destination, not the image itself. ### Adding Alt Text in the Drupal Text Editor 1. From the Drupal text editor, click on the image icon in the menu bar. This action will open a window like this: ![WYSIWYG image properties window](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94CpaQXIEc7S10-q%2Falt-text-wysiwyg.png?generation=1556827630970206\&alt=media) 1. Add short, descriptive alternative text in the "Alternative Text" field. 2. Click `OK`. 3. Click `Save`. ## Lists Lists are an important feature for organizing information on a web page. For a web page to be accessible, any content that is visually presented as a list must also be marked up as a list in the source code. In the Drupal text editor, content creators have the choice between ordered (numbered) and unordered (bulleted) lists. When creating a list, either select one of two list buttons and begin typing the list items, or highlight existing text and then select the list button to turn it into a list. Press `Enter` to go to the next list item, and press `Tab` to start a sub-list or nested list. Once the nested sub-list is complete and you need to return to the main list, press `Enter` twice. ![Drupal text editor example list](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93fa5y6FWlmvxdhA%2FLists-example-2.png?generation=1556827649213358\&alt=media) ## Tables Tables are useful for organizing information into a grid of cells. To make sure a table is accessible, it is important to keep it fairly simple. If your table is complex, with split or merged cells, consider dividing the information into multiple tables if possible. In order to assess complexity, imagine hearing the information over the phone. Can the it be understood without a visual aid? ### Using Tables in Drupal 1. Start by selecting the table button in the Drupal text editor. ![Highlight of the table button in the Drupal text editor](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94wq-5DCKTGkJAzR%2Ftables-1.png?generation=1556827634171940\&alt=media) 2. The Tabel Properties dialog box will appear. Enter the appropriate number of rows and columns. ![Table properties dialog box](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94wslLxpIm9TYrRy%2Ftables-2.png?generation=1556827634652366\&alt=media) 3. Using the drop-down `Headers` menu, select your preference for column and row headers. This will bold the text in the selected cells. 4. Add a caption to the table. This will serve as its title. 5. Add a summary if appropriate. This is useful if the table is meant to convey certain findings that can be briefly summarized in text. 6. Click `OK`. The empty cells will appear in the Drupal text editor for you to fill in: ![Empty table cells](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94wuHkcf6WP5i0zL%2Ftables-3.png?generation=1556827637814868\&alt=media) 7. Click `Save`. # Accessible Design Intro As content creators and managers you will not necessarily need to know all the WCAG 2.0 details. The following list was created with content managers and creators in mind: ## 1. Text for everyone * Make sure all text can be highlighted and read aloud so that screen readers and reading tools can access them. * Provide alternative text for images. These must reflect the purpose of the image: * Decorative: no alternative text. * Having a function: Describe the functionality. * Linking: Describe destination. * Avoid images of text where possible. Where not, make sure that text alternatives are equivalent. ## 2. Versatility Create a website that can be used by as many as possible, in as many ways as possible according to user needs. * All functionality can be used without a mouse – from the keyboard alone. * All functionality can be used with a mouse. * Users can adapt colour and font according to specific needs. * Ensure none of your content will cause seizures - **avoid** rapidly flashing content. ## 3. Association * Text, headings, buttons, fields, etc. that are visually connected must also be programmatically connected. * Make sure not to give instructions based solely on a location of content, such as 'In the box to your right.' This information is useless if you cannot see the screen. Supplement the instructions by naming a heading that users can navigate to. * Ensure link text can be read out of context. Avoid link test like 'Click here,' or 'Read more.' ## 4. Colour for everyone * Ensure that the colour of the background and the colour of the text are of sufficient contrast to each other. That way, people with low vision can also read it. * Ensure that information is not given by use of colour alone, such as 'Find more info in the green box.' Otherwise, problems can arise for visually impaired or colour blind users. ## 5. Robustness * Have a consistent design throughout the website. * Follow known website conventions. * Follow the standard for the format you are publishing in (HTML 5 syntax, for example) - this will optimize your website for many different platforms and user agents. # Content Titles & Headings ## Titles As part of the UG Drupal platform, every content type you create requires a title in order for the content to be successfully created. It is important that the title is unique among the webiste, descriptive of the content, but not too long. The title is the first thing that is shown on each page and it gives the user a general understanding of what the content following it. ![Basic Page Title](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94XKZD1HURZljFdk%2FpageTitleExaple.png?generation=1556827635302030\&alt=media) Page Titles will also appear in the tab in your browser. ## Headings When writing text for web pages, consider the fact that some users cannot get an overview of a page visually, and instead rely on structural presentation. Make sure that pages are divided into logical sections, each with a heading that is descriptive of the section. Headings can be selected in the Drupal text editor. Simply highlight some text, and then use the drop-down menu to select the heading level: ![WYSIWYG Editor with Headings Drop-Down Menu](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94XMWT61jyoqSrI9%2FHeadings-drop-down-WYSIWYG-2.png?generation=1556827634910553\&alt=media) **/! Note**: Do not use heading elements simply to increase font size, and do not use *empty* heading elements to create space on the page. These improper uses of headings will make the web page less accessible. **/! Strong Recomendation**: Headings should be used in successive order. This means that any headings related to the Overall Page title (h1) start with h2 and then follow in order. Picture example below: ![Example of Nested Headings](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94XOkWfq61mEdkq9%2FheadingExample.png?generation=1556827633315294\&alt=media) # Links * [Accessible Links](/accessiblecontentguide/links#accessible-links) * [External Links](/accessiblecontentguide/links#external-links) * [Internal Links](/accessiblecontentguide/links#internal-links) * [Email Links](/accessiblecontentguide/links#email-links) * [Anchor Links](/accessiblecontentguide/links#anchor-links) ## Accessible Links When adding links to a page, ensure that the user can determine the destination of the link. Avoid using ambiguous terms like "here," "more," or "this" for link text. Instead, use descriptive link text to help users with assistive technology understand the context and destination of the link. For example, instead of "click here" use something like "more information on \[topic]." ## External Links An external path is any link that is NOT under [www.uoguelph.ca/\_yourSiteName](http://www.uoguelph.ca/_yourSiteName)\_. 1. In the Drupal text editor, highlight your chosen link text. 2. Select the link button. This will open the Link dialog box. 3. Ensure that the "link type" dropdown menu is set to `URL`. ![External URL Hyperlink](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iNm55b8LL3RV7M%2FexternalURL.png?generation=1556827641268068\&alt=media) 4. Paste the link where you would like this text to hyperlink to (Eg:[www.google.ca](http://www.google.ca)) in the "URL" field. 5. Select `OK`. ## Internal Links An internal path is any link that is under [www.uoguelph.ca/\_yourSiteName](http://www.uoguelph.ca/_yourSiteName)\_ 1. In the Drupal text editor, highlight your chosen link text. 2. Select the link button. This will open the Link dialog box. 3. Ensure that the "link type" dropdown menu is set to `internal path`. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iPU_V5dAhpgYIl%2Fckeditorlinkinternalpath.png?generation=1556827648812636\&alt=media) 4. Search for the internal page by typing the first few characters of the page name in the "Link" field. 5. Select the page you want to link from the list of suggestions. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iRRN5Zd36fEXA8%2Fckeditorlinksuggestions.png?generation=1556827648525828\&alt=media) 6. Select `OK`. ## Email Links Upon selection, an email link will prompt the user to email the specified address is MS Outlook. 1. In the Drupal text editor, highlight your chosen link text. 2. Select the link button. This will open the Link dialog box. 3. Ensure that the "link type" dropdown menu is set to `E-mail`. ![Insert Email Image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iUCNgHv6db8Ce2%2FemailLink.png?generation=1556827641996245\&alt=media) 4. Enter the email address you would like this text to hyperlink to. 5. If applicable, enter the email subject and message body into their respective fields. 6. Click `OK`. ## Anchor Links Anchor links are links that will take the user to a specific spot on the same page. 1. In the Drupal text editor, highlight some text to be used as the anchor (the spot the link will jump to). 2. Select the anchor button (flag icon). This will open the Anchor Properties dialog box. ![Drupal text editor anchor button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iWLt9LT4Gs6OeN%2Fanchor-anchor-button.png?generation=1556827648925546\&alt=media) 3. Enter a name for the anchor. Select `OK`. ![Drupal text editor anchor dialog box](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95iYR0RVL8XYQOpn%2Fanchor-dialog-box-1.png?generation=1556827648038274\&alt=media) 4. Highlight text to be used as the link. 5. Select the link button (chain link icon). ![Drupal text editor link button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95i_cioiw1VXHXsg%2Fanchor-link-button.png?generation=1556827641348391\&alt=media) 6. The Link dialog box will open. Under link type, select "link to anchor in the text." 7. Using the "By element ID" drop-down menu, select the anchor's name. It is important that the anchor is selected by element ID and not by name. Select `OK`. ![Drupal text editor link dialog box](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95ibQP2kCyphhBNa%2Fanchor-link-dialog.png?generation=1556827641516941\&alt=media) # Colour * [Contrast Requirements](/accessiblecontentguide/colour#contrast-requirements) * [Use of Colour for Meaning](/accessiblecontentguide/colour#use-of-colour-for-meaning) ## Contrast Requirements The colour that is used in the text or image must have the correct contrast ratio: * Small Text & Images: Small-scale text and images of small-scale text must have a contrast ratio of at least 4.5:1. * Large Text & Images: Large-scale text and images of large-scale text must have a contrast ratio of at least 3:1; * Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast requirement. * Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. **/! Note**: In order to check if a colour is okay to use, you can use a [Colour Contrast Checker](https://snook.ca/technical/colour_contrast/colour.html) ## Use of Colour for Meaning Colour must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For example, a calendar that only shows what day it is by highlighting the day in green would fail the standard due to there being no other way of knowing what day it is other than through visual representation. # Documents When uploading documents to your website it is important to ask yourself these questions: 1. Can the content be uploaded as a web page instead of a [document](https://www.uoguelph.ca/accessibility/web/what-fix/documents)? 2. Can you request an accessible version of the document prior to posting it online? 3. Have you reviewed the Office of Diversity and Human Rights' [Tipsheets on Document Accessibility](https://www.uoguelph.ca/diversity-human-rights/accessibility/information-and-communication-document-accessibility)? 4. Have you visited the [Accessible Digital Office Document Project (ADOD)](http://adod.idrc.ocad.ca/) for additional guidance? **/! Strong Recomendation**: The AODA Team strongly suggests that any information in a document that can be is uploaded as a basic webpage. This will provide users with the most accessible content. # Images When you add images to a web page, consider the fact that some users cannot see images and therefore require a text alternative in order to recieve the same amount of information as a user who can see the image. In our CMS, providing a text alternative to images is referred to as ”alternative text” or ”alt text.” The text given here is not visually displayed on the page but is hidden in the code to be accessed by screen readers. ## Writing appropriate alternative "alt" text * Describe the purpose of the image and not necessarily the image itself. * If the image is functional, use the alt text to summarize the information provided or describe its purpose. * If the image is hyperlinked, it is important to describe the link destination, or what happens when the linked image is selected. * If the image is solely used for decorative purposes such as creating ambience or visual context, then it should have no alternative text (empty alt atribute --> `alt=""`) For more information on accessible images, please see the [W3C Image Tutorial](https://www.w3.org/WAI/tutorials/images/). ## Avoid using images of text Avoid using images of text. This means that you should avoid writing text in an image editing program and saving it as an image. Many assistive technology applications cannot read images of text. This is because you cannot highlight text within an image to have it read out to you. Images of text also tend to pixelate and become blurry upon magnification, making them difficult to read. ## How to add alt text 1. From the Drupal text editor, click on the image icon in the menu bar. This action will open a window like this: ![WYSIWYG image properties window](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94CpaQXIEc7S10-q%2Falt-text-wysiwyg.png?generation=1556827630970206\&alt=media) 2. Add short, descriptive alternative text in the "Alternative Text" field. 3. Click `OK`. 4. Click `Save`. # Tables Tables are useful for organizing information into a grid of cells. To make sure a table is accessible, it is important to keep it fairly simple. If your table is complex, with split or merged cells, consider dividing the information into multiple tables if possible. In order to assess complexity, imagine hearing the information over the phone. Can the it be understood without a visual aid? **/! Strong Recomendation**: The AODA Team strongly suggests that tables are purely used for tabluar data and not for layout. If you require assistance in terms of layout, please speak with your Web Manager/Site Owner for assistance. ## Using Tables in Drupal 1. Start by selecting the table button in the Drupal text editor. ![Highlight of the table button in the Drupal text editor](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94zgJ0MgJTbhBgTd%2Ftables-1.png?generation=1556827637119613\&alt=media) 2. The following dialog box will appear. Enter the appropriate number of rows and columns. ![Table properties dialog box](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94zjwClrT0Tb8Zjc%2Ftables-2.png?generation=1556827637401072\&alt=media) 3. Using the drop-down `Headers` menu, select your preference for column and row headers. This will bold the text in the selected cells. 4. Add a caption to the table. This will serve as its title. 5. Add a summary if appropriate. This is useful if the table is meant to convey certain findings that can be briefly summarized in text. 6. Click `OK`. The empty cells will appear in the Drupal text editor for you to fill in: ![Empty table cells](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94zlPi7tADsAjYht%2Ftables-3.png?generation=1556827634363886\&alt=media) 7. Click `Save`. # Lists Lists are an important feature for organizing information on a web page. For a web page to be accessible, any content that is visually presented as a list must also be marked up as a list in the source code. In the Drupal text editor, content creators have the choice between ordered (numbered) and unordered (bulleted) lists. When creating a list, either select one of two list buttons and begin typing the list items, or highlight existing text and then select the list button to turn it into a list. Press the `Enter` key to go to the next list item, and press `Tab` to start a sub-list or nested list. ![Drupal text editor example list](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93fa5y6FWlmvxdhA%2FLists-example-2.png?generation=1556827649213358\&alt=media) **/! Strong Recomendation**: The AODA Team strongly suggests that items that appear to be in a list on the page are also placed in a list in the code. Example: A list of links under a heading can be placed in a list. Avoid just making dots that look like a list (such as asterisk, dash etc.). ## Nesting Lists If you have a main list that requires a nested sub-list, you can use the same list formatting commands you would use in MS Word. To start a nested list, press `Enter` from the main list item, then press `Tab`. Once the nested sub-list is complete and you need to return to the main list, press `Enter` twice. ![Nested lists example](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93fc04G9pfRuiCTM%2FNested%20list%20example.png?generation=1556827629441029\&alt=media) To create a list that uses both numbered points and bullet points, start with a nested list like the one pictured above. Then, highlight the list items you would like to convert to numbered points or bullet points, and then select the appropriate list button. ![Mixed nested list example](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93feBn_avKwPKJp0%2FMixed%20list%20example.png?generation=1556827633063992\&alt=media) # Audio & Video If you are using video or audio clips on a web page, there are several criteria to consider, such as captioning and audio description of the video. Audio description is an extra track explaining what happens on the screen to visually impaired users. If you are not able to provide audio description for you videos, then give an alternative in the form of a transcript that is uploaded or linked to from the page. Be aware that without audio descriptions, your site cannot be Level AA-compliant, only Level A-compliant. If the content is solely visual (no sound) or only audio (no visual), then a text version is an accepted alternative on both levels. ## The University's position on web video is: * Web accessibility comes first and foremost when using videos. This means that there must always be a transcript and closed captioning on any video on your site. Find [Tips for Video Accessibility here](https://uoguelphca.sharepoint.com/sites/DARC/SitePages/Video.aspx). * It is okay to use youtube videos on your site. Use the embed code provided under the video you're trying to add. First click "share", then click "embed" and copy the HTML there. * Remember to include a video transcript next to each video. Please refer to [Multimedia Resources](https://uoguelphca.sharepoint.com/sites/DARC/SitePages/Multimedia-Resources.aspx) to find instructions on editing and creating video captions and transcripts # Other Accessible Content When adding other types of content, for example a button or icon, please keep in mind these [accessibility basics](/accessiblecontentguide/accessibilitybasics), and reference the [Style Guide](/styleguide) for assistance. If you require more assistance, we suggest that you reach out to your Web Managers/Site Owners. # Advanced Topics on Drupal Websites This guide is designed to cover more complicated topics on our Drupal platform. It is strongly suggested that you have a firm understanding of the Drupal platform before exploring these more complicated topics. The Advanced Guide to Drupal websites will cover: * [Blocks](/advancedguide/howto-blocks) * [Collapsible Sections (Accordions)](/advancedguide/howto-accordion) * [Categorizing and Displaying Profiles](/advancedguide/howto-categorizeanddisplayprofiles) * [Tabs](/advancedguide/howto-tabs) * [Customizing Content Layout](/advancedguide/customizingpage) * [Mini Panels](/advancedguide/howto-minipanels) * [Google Maps](/advancedguide/googlemaps) * [Google reCAPTCHA](/advancedguide/recaptcha) # Blocks 1. Scroll to the bottom of the page and click `Customize this page` * Click on `Left side` * Select Region Style (Paint Brush) * Ensure **Style** is **Bootstrap** and click `Next` button * Change **Column size** to **--None--** * Change **Offset size** to **--None--** * Click on `Middle Column` * Select Region Style (Paint Brush) * Ensure **Style** is **Bootstrap** and click `Next` button * Change **Column size** to **12** * Change **Offset size** to **--None--** * Click on `Right side` * Select Region Style (Paint Brush) * Ensure **Style** is **Bootstrap** and click `Next` button * Change **Column size** to **--None--** * Change **Offset size** to **--None--** 2. In the top menu, click `Structure` * To view block regions: * Click **Demonstrate block regions (UG Cornerstone Theme)** at the top * You will see a screen similar to the one below appear. Each block region will be listed and highlighted in yellow ![Block Regions](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b3h5g5X07sXvEI%2Fblock%20regions.png?generation=1556827632364273\&alt=media) * To add blocks: * You can scroll down to the **Disabled** Blocks region and add a block of your choice to a selected region * To create a new block click on `Add block` * Fill out the fields **Initial Block Settings** * **Block title:** Enter a title for your block. If you enable the option to show a title for your block, this is what will show. * **Block Description:** Used to help identify this particular block. If you had several blocks for example, unique descriptions will help you organize and manage your blocks. **Block body:** What you’re showing **Region Settings** * Setup where your block will appear **Visibility Settings** * **Pages:** allows you to restrict which pages this block will be displayed in * **Content types:** allows you to control which content types this block will appear with * Click `Save block` at the bottom of the page * If you wish to configure the blocks, you may do so after saving the blocks * Configuring a block allows you to edit the contents of the block, and deal with the visibility settings **2.1 Creating your Block** ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b7u9Ltc9RgI9Im%2FcreateBlock.PNG?generation=1556827644119667\&alt=media) **2.2 How it will appear on your site (Placed in Primary Region)** ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b9IRpHmzbdunsz%2FblockAppearance.PNG?generation=1556827628926824\&alt=media) ## Common Usage for Blocks 1. Display Menu on Specific Pages * Follow steps 1 and 2 under "How to Create a New Block" before completing the following steps. * When creating a new block, select Add Menu Block instead of Add Block. ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bBmyHDeCnFpT03%2FmenuBlock.jpg?generation=1556827633187403\&alt=media) * Fill out the Block Title and Administrative Title. * Select the menu you would like to display (based on the assumption the menu you would like to display already exists). * Select starting level. * At the bottom, select what pages you would like the menu to display on. ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bD5mT5NOkwTyE0%2FspecificPage.jpg?generation=1556827628789959\&alt=media) 2. Display Image/Logo on Specific Pages Follow the above steps with these steps in mind. ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bFtrDRONlVVDG0%2FlogoBlock.jpg?generation=1556827632369104\&alt=media) * Follow steps 1 and 2 under "How to Create a New Block" before completing the following steps. * Leave the title of the block empty. * Put the image, with appropriate alt text, in the block using the Drupal Text Editor. * At the bottom, select what pages you would like the menu to display on. ![Demo block being created](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93bHwc3f2iSlG34Y%2FspecificPage.jpg?generation=1556827629451481\&alt=media) # Collapsible Sections / Accordions Collapsible sections or "accordions" are another way to organize long documents or pages, while taking up less screen space. Readers can flip between the sections of your document by clicking or tapping to expand one section of the document at a time. Below is an example of collapsed and expanded accordion respectively. ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdtYclAzsl8OXvAv1fo%2Fuploads%2Fgit-blob-e72fc75fb167effdfd6e865b7994e3f01d87e934%2Faccord1.png?alt=media) ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdtYclAzsl8OXvAv1fo%2Fuploads%2Fgit-blob-edc0a59062c6ce575ee57b25b0fa7d8cd6718f10%2Faccord2.png?alt=media) To create collapsible sections in your content: 1. Under Text Format, ensure your page is set to "Full HTML" instead of "Filtered HTML" 2. Click the *Source* button on the editor toolbar to switch the editor to source editing mode ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdtYclAzsl8OXvAv1fo%2Fuploads%2Fgit-blob-8da4beb192b0964cd1568943ea292daf124a6ecd%2Fsource2.png?alt=media) 3. Copy and paste the following markup into the source editor ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LdtYclAzsl8OXvAv1fo%2Fuploads%2Fgit-blob-ae571c52f9ae04da2de3e2a8b419fa54ae1a6e58%2Fadd-accordion-code.png?alt=media) 4. Adjust the number and description of the sections to suit your content. When adding a new accordion section to your code, remember to update the values in the new section that reference "headingThree" or "collapseThree" so that the new section has unique values on the page (e.g. headingFour, collapseFour). ## Markup The following markup will show three accordion sections. All sections are closed when users initially load the page. ```html ``` If you wanted the first accordion section to appear open for users by default, you would update the first section as follows: ```html
...
``` To add additional (closed) sections, add the following code directly below the last accordion section and above the closing tag. Remember to update any values referencing "headingThree" or "collapseThree" so it is unique on the page (e.g. headingFour, collapseFour). ```html
...
``` # Categorizing and Displaying Profiles Some departments choose to display their staff profiles by the team they (belong) to, doing this with our Drupal platform will give you the following view. These instructions will guide you through the process of categorizing the profiles on your site by the teams they work in. ![An Example of a categorized profile page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95rIvq5XpRTAHdBA%2Fprofiles-main-image.png?generation=1556827642540853\&alt=media) ## Adding Profile Categories (e.g web & development solutions) 1. Add profile category terms using the steps in [How to Add Vocabulary Terms](/ugcontenttypes/howto-profiles#How-to-Add-Vocabulary-Terms) 2. Click edit beside each term you added and get the term Id from the URL (/taxonomy/term/`#`/) ![URL to retrieve taxonomy term](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95rLCiH5luw1g2yp%2Ftaxonomy-term.png?generation=1556827642566886\&alt=media) ## Adding the Terms to a Custom Menu Block on the Right Side of the Page 1. Using the administration bar, navigate to structure > menus 2. Select add menu ![blue add menu option with a plus sign](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LdtcKqOvtkPmy_O59MQ%2F-LdtcNaeHb_SPNW3LogT%2FAdd-menu.png?generation=1556818796490667\&alt=media) 3. Enter a menu title e.g. Faculty and Staff Directory 4. Click, save 5. Select Add link ![blue add link option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LdteRI9Xr8u4saEoR5u%2F-LdteUG5McrVEzOAHBs1%2FAdd-link.png?generation=1556819344727748\&alt=media) and do the following for each taxonomy term you created in step 1(Link to add vocabulary terms) * Enter a "title" e.g. a section name (Deans office) * Enter the term Id you copied from **step 2** in the following format `people/#` into the “path” field. Where `#` is the Id number ## Adding the People page 1. Navigate back to menus ![breadcrumb pathe to menus](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95rRX58OVk5Jpsmh%2Fback-to-menus.png?generation=1556827641946272\&alt=media) and click on "add link" on the right of the Main menu option 2. Enter a menu link title e.g. Staff & Faculty 3. Enter "**people**" into the “path” field ## Adding the Custom Menu as A block on profiles page 1. Navigate to structure > blocks 2. Select Add menu block ![Add menu block with a plus sign](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-LdteRI9Xr8u4saEoR5u%2F-LdteWF3_R20lbaObDaj%2Fadd-menu-block.png?generation=1556819351652304\&alt=media) 3. Enter a title you would like as the “Block title” and “administrative title” e.g. Faculty and Staff Directory 4. Select the menu title you created under the “menu” drop down 5. Select “starting level” as 1st level (Primary) 6. Within the region setting select secondary in the drop down 7. Select “Only the listed pages” radio button 8. In the text area enter the following paths * people * people/\* # Headings that Expand and Collapse Start with content that has a heading, e.g. ```markup

Section Title

Section text here

More text here

``` To make the section collapsible, it needs to be wrapped in `div` tags like this: ```markup

Section text here

More text here

``` After you've put the content in a div, give that div the class name `collapse` and a unique ID: ```markup

Section text here

More text here

``` Now turn your section title into a link with the following code: ```markup

``` Note that `href` has to equal the unique ID of the div. This is so the link, when clicked, knows which div it's supposed to expand or collapse. So if you want multiple divs on the page that can be expanded or collapsed, each one must have a unique ID. **Note:** If you want a section to be expanded by default when a page loads instead of hidden/collapsed, rewrite the link heading code as follows: ```markup

Section title here

``` That is, remove the code `class=collapsed` (when you include `class=collapsed`, it makes the link show up with a "Plus" icon to indicate the content can be expanded. This "Plus" icon changes to a "Minus" when the content is expanded). You also need to change the section's `div` code from: ```markup
``` to: ```markup
``` ## Markup for complete, working example: ```markup

This section expanded by default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

``` If you'd like to add a button that toggles multiple sections at the same time, you need to add one more class to each `div`. For this example, we'll call the class `collapse-all` though you can use whatever name you prefer: ```markup

Section 1 text here

Section 2 text here

Section 3 text here

``` The code for the button would look like this: ```markup ``` For `aria-controls`, list all the `div` IDs you want the button to control. For `data-target`, use the class `collapse-all` (or whatever name you chose - it just needs to be the same for each `div`). So the complete code would look something like this: ```markup

Section 1 text here

Section 2 text here

Section 3 text here

``` # Tabs ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b3zT80xvyEmALH%2FtabsExampleCapture.PNG?generation=1556827628132381\&alt=media) Tabs organize content into meaningful sections, while occupying less screen space. Use tabs to give readers quick access to sections of a long document or page, such as profile pages. To create tabs in your content: 1. Click the *Source* button on the editor toolbar ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b5UVR32dvxXCST%2FsourceButtonCapture.PNG?generation=1556827642780043\&alt=media) 1. Copy and paste the following markup 2. Edit the number and description of the tabs to suit your content ![image](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu93b7Dw7mQnP_BNr5%2FtabsCodingCapture2.png?generation=1556827644053878\&alt=media) ## Markup ```
(Add content)
(Add content)
(Add content)
(Add content)
``` # Customizing Content Layout ## Adding view panes 1. In order to customize the way a page appears, select the `Customize this page` option that appears at the bottom of your screen. *Please note:* **Only Site Managers** have access to this option. ![example of customize this page](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu95X6-rxbc9SW5JwN%2FCustomize.png?generation=1556827638995273\&alt=media) 2. Select the preferred side/column where you would like a "view pane" to be visible, then select `+`.![example of page layout](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9661wiVIaarq74ID%2Fpagelayout.png?generation=1556827643988105\&alt=media) 3. There are several content options listed that can be added to the page: 1. Menus - includes any menus that you created or are present by default. 2. Mini Panels - includes footer and other mini panels created by you. 3. View Panes - includes the different formats the content types can appear in. The most commonly used are the *Teaser Lists.* 4. New Custom Content - includes adding any customized content that will suit your needs.![example of content options](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu966361XI6zaildfL%2Fcontentoptions.png?generation=1556827649598640\&alt=media) ## Configure a view pane Each view pane permits content creators to configure the view panes in many ways: ### Override the title: 1. If you would like to add a title to your view pane, select `Override Title`. 2. Select `Finish`. * ![example of first step to override title](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9665PCjww8hSERV0%2Foverridetitle1.png?generation=1556827642931750\&alt=media) 3. Select the *Settings* option on the view pane and then type in your customized title. 4. Then, Select `Finish` again. * ![example of first step to override title](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9667B41wU8rUAVHP%2Foverridetitle2.png?generation=1556827642708941\&alt=media) ### Adding a "More" Button: 1. Select the `Provide a "more" link` option. 2. Type in some descriptive "more" text that indicates where the link is going (ex. More Features). 3. Select `Finish`. * ![example of adding more link text](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu96697YlKUo3wPMm_%2Fmorelink.png?generation=1556827642724809\&alt=media) ### Categorizing view panes: Taxonomy is used to categorize content so it is visible in desired locations. If you would like to categorize your view pane by using taxonomy: 1. Ensure the content type has a category. 2. Note down the **term number** that the category is associated with. The **term number** is located in the url on your screen (ex. ...). 3. Add the **term number** to the `Category` space, when configuring your view pane. 4. Select `Finish`. * ![example of adding a category](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu966B0lwEzBOMxWhK%2Fcategory.png?generation=1556827642784272\&alt=media) *Always* `save` *the page when you are done customizing.* # Mini Panel * [Creating a mini panel](/advancedguide/howto-minipanels#creating-a-mini-panel) * [Configure Mini Panels to appear on a page or homepage](/advancedguide/howto-minipanels#configure-mini-panels-to-appear-on-a-page-or-homepage) * [Activating Mini Panels under blocks](/advancedguide/howto-minipanels#activating-mini-panels-under-blocks) Mini panels are portable panels with 2 or 3 columns that display many types of content (custom content, view panes, menus, etc.) Once a mini panel is built it can then be placed as a block in any region of your site. ![An Example of a mini panel](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94onboS8AIEYB3kV%2FMini-panel-example.PNG?generation=1556827636936488\&alt=media) ## Creating a mini panel 1. Click on `Structure` in the Administration menu bar and select `Mini panels` 2. Click `+` Add ![Add option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94op44XlnCms1ocy%2Fadd-mini-panel.png?generation=1556827636686072\&alt=media) 3. Under Administrative title, enter a unique name for your mini panel. Click `Continue`. 4. Click `Continue` again (to skip the Context menu) and then select **Two Columns Stacked** and click `Continue`. 5. Select **Two Columns Stacked** or **Three Columns Stacked** depending on how many columns you need. Click `Continue`. 6. You can enter a title if you like, unless select the **No title** option under **Title type**. 7. Click on the gear ![gear button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94orw89juDpCKo2v%2Fgear.PNG?generation=1556827635860165\&alt=media) button for the section you would like to add content to and select `Add content` 8. Select **New custom content** 9. The WYSIWYG editor will open. Add a **title** and add content to the **body** section 10. Click `Finish` 11. Repeat steps 9 – 12 for all other sections you would like to add content to 12. Once sections have been filled, click on the gear ![gear button](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94otSgZyhxC-QZuf%2Fgear.PNG?generation=1556827636389894\&alt=media) on each section and do the following: * Select `Change` under **Style**. In the menu that pops up, select **Bootstrap**. Select `Next`. * Change Column Type to Small & medium devices. Change Column sizes (*They must add up to 12*). Set Offset size to none. Click `Save`. 13. Click `Save`. **/! Note**: Please note that this mini panel will not appear anywhere on your site until it’s activated under Blocks or added to a page. ## Configure Mini Panels to appear on a page or homepage 1. Click the `Home button` in the Administration menu bar. 2. Once on the home page, click `Customize this page` (found at bottom of your screen). 3. Under the **Top** or **Bottom** section, click `+` and select `Mini panel`. 4. Under Mini panel, select the title of the mini panel you created. Click `Finish`. 5. Click `Save` at the bottom of the screen. **/! Note**: Please note that if you use this method to add mini panels to a page it will show up on all your pages. If you add it the homepage it will show up on only the homepage. ## Activating Mini Panels under blocks 1. Click on `Structure` in the Administration menu bar and select `Blocks`. 2. Scroll down under the Disabled section of the list and look for your mini panel title it should be in the format: \*\*Mini panel: “Mini panel name”\*\*. 3. Click `configure`. 4. In the `Region Settings` section select **Content** from the drop-down list. 5. At the bottom of the page select the radio button option for **only the listed pages** 6. Enter the node number(s) of the page you would like the mini panel to appear on. With the format: node/number (*node number can be found in the URL of the edit page section*) ![block configuration](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu94ov4hcjDd-apS_6%2FMini-panel-block.PNG?generation=1556827638224219\&alt=media) 1. Click `Save block`. # Google Maps In order to put an embedded Google map into your website, you must ensure the following: * The map does not create a keyboard trap, i.e. the user is able to exit the map using only keyboard controls. * The map has a title attribute. * There is descriptive text before/after the map that details the important information relayed in the map. **Avoiding Keyboard Traps** To determine if your map has created a keyboard trap, you must test the map. This can be done by pressing the tab button on your keyboard and watching tab focus go down the page. If you are able to tab out of the map, the map is not a keyboard trap. **Google Map Text Alternatives** Along with the map, there should be explanations of the key points the map is trying to relay. General Use Cases for an Embedded Google Map: * Location/directions to a building: Provide routes from a couple key landmarks/intersections in the area. * Location of booths around campus: Provide a chart with the booth names and relative locations. **How to Embed a Google Map** * Using Google Maps, navigate to the location you would like to embed. * Click `Share` on the side menu. * Click the `Embed Map` tab. * Copy the given code and paste it into the plain text editor on the website. Click `Switch to plain text editor` and navigate to the part of the page you would like to place the map. ![Click Plain Text Option](https://3768947627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdtYclAzsl8OXvAv1fo%2F-Ldu91ZptuaorYV7iOpN%2F-Ldu9ABVhbiFYTf68OER%2FplainTextEditor.jpg?generation=1556827650289801\&alt=media) * In the code that you just pasted, locate the `