rush content editor guide mar12...migration training. 2. drupal cms overview the menu options for...

Rush University | Content Editor Guide | Friday, March 11, 2016 | page ! / !1 16

March 11, 2016

Bill McLaughlin

Chief Operating Officer

Michael Bolton

Web Analyst

Content Editor Guide to Using the Drupal CMS

Rush University Website Redesign

»

s m a r t s u s t a i n ab le s o lu t i o n s

Contents

1. Introduction 3 .........................................................................................................................................................

2. Drupal CMS Overview 4 .......................................................................................................................................

3. The WYSIWYG Editor 7 ........................................................................................................................................

4. Managing Content 10 ...........................................................................................................................................

5. Appendix: Templates and Styles 16.....................................................................................................................

Rush University | Content Editor Guide | Friday, March 11, 2016 | page ! / !2 16»

1. Introduction This document provides a detailed description of how to manage content within the Rush University

Drupal website. The document is intended for Content Editors who are focused on managing pages within

the site. Site management and administration tasks are not covered with this document.


Version Date Author Description

1.0 3/11/2016 Bolton,McLaughlin

First version delivered in conjunction with CMS migration training.

2. Drupal CMS Overview The menu options for managing content on the site are only available to logged-in users. When logged

into the system, the Administrative Menu will be seen as a black and gray ribbon across the top of the

browser window. This ribbon-based menu appears above all pages within the site; no matter where you

are in the site, all menu options are visible at the top of the page and do not interfere with any of the design

or content elements of the page. The black ribbon is the main content editing toolbar. The collapsible gray

ribbon is the editable shortcut toolbar.

To log in to the system:

1. Go to https://test-rushu.pantheon.io/user

2. Enter your username and password information

3. Click the “Log in” button

Home The “Home” button will take you to the homepage of the Drupal site.

My Workbench The “My Workbench” section is the recommended method for finding content on the site. At the top

right there are three tabs - “My Content” , “Create Content” and “My Sections.”

In the “My Content” tab there are two tables in the main area - My Edits and All Recent Content. These

are useful for quickly finding content that was most recently worked on by you or another content editor.

There are “view all” links at the bottom right of each table that will take you to another page that provides

content search tools. These pages can also be accessed by the “My Edits” and “All Recent Content”

buttons located just under the tabs at the top right.

In the “Create Content” tab there is a list that contains links that take you to content creation screens

where you can create content of the selected content type. See the “Managing Content” section of this

document for more details regarding creating and editing content.

The “My Sections” tab displays a list of the sections of the site that you have access to edit. Users can be

granted access to one, more than one, or all site sections. Site Sections are an important part of the

website architecture and work in conjunction with user roles and permissions to control authority levels.

• Permissions control the Content Types that one can managed. Permissions are assigned to Roles.


https://test-rushu.pantheon.io/user

• Roles in turn are assigned to Users.

• Site Sections determine the Pages on which a User can carry out the Permissions associated with

their assigned Role. Every Page in the site has one and only one Site Section. Users are given access to

one or more Site Sections. Sections can be nested; if a User has access to a Section that has children,

the User will have access to all Pages assigned to the child Sections.

• If a User has the Permission to edit a Page (based on the Content Type), they can only do so if they

also have been granted access to the Site Section associated with the page. This allows Rush

University to partion access to sections of the site. For example, Sally is a Content Editor with access

to The Rush Experience page. John is a Content Editor with access to all of the college pages. Event

though Sally and John have the same Role, Sally’s permissions are limited based on her Site Section

assignment.

Content The third option on the menu is “Content”. The Content page functionality is very similar to My

Workbench, but not as robust or easy to use. The default view sorts to show the most recently updated

content in reverse chronological order. You can re-sort the table by clicking on the header of any column.

You can filter the list by “status” and/or “type”.

At the top left of this tab is a “+ Add Content” link. This link takes you to a new screen where you can create

a new page for one of many content types. Please see the “Managing Content” section for more details on

content types. Below that link are two filters - “status” and “type”. These are used to filter the list of

content, allowing easier access to specific content.

The following Content Types are available to Content Editors within the Rush University website:

• Academics Page - a content type with a variety of options that is widely used for academic pages on

the site, including department pages, program pages, research pages, and research lab pages.

• Full Width Page - a variation on the Universal Page content type, this content type offers the

flexibility to display content in a one-column, wide format with no sidebars.

• Highlight - a content type that is used to generate image blocks that display in a grid format on pages

that use the Landing Page content type.

• Landing Page - a content type with a variety of options that is used for upper-level pages on the site,

including college pages, Current Students, Education & Training, Research, and The Rush Experience.

• Universal Page - the utility content type that is widely used on lower-level pages throughout the site.


Structure The fourth option on the menu is “Structure”. The Menus for the site can be managed is this area. The

most commonly used function will be the “list links” option for each menu. You can use this tool to

reorder the links in a menu, or to move a page to a different section of a menu, using drag and drop

functionality. The Rush University website consists of the following menus:

• _Rush Nav - Alumni Primary: the main navigation menu for the alumni section of the site.

• _Rush Nav - Audiences: a navigation menu that includes pages for important audience segments,

whose top-level links display in the menu at the right side of the header.

• _Rush Nav - Footer: a simple navigation menu for the links that display across the bottom of the

footer.

• _Rush Nav - Other Sites: a simple navigation menu for the links that display across the top of the

header.

• _Rush Nav - Primary: the main navigation menu for the site, whose top-level links display in the

menu bar across the bottom of the header.

• _Rush Other - Colleges & Academics: this menu contains the bulk of the academic pages on the

site. The top-level links in this menu do not display in a navigation tool on the site, and their URL

aliases are at the root level.

• _Rush Other - Policies: this menu contains a variety of policy related pages. The top-level links in

this menu do not display in a navigation tool on the site, and their URL aliases are at the root level.

• _Rush Other - Support: this menu contains pages related to supporting or giving to Rush. The top-

level links in this menu do not display in a navigation tool on the site, and their URL aliases are at the

root level.

• _Rush Other - Support Services: this menu contains offices related to student and academic

support, and similar pages. The top-level links in this menu do not display in a navigation tool on the

site, and their URL aliases are at the root level.

Configuration The fifth option on the menu is “Configuration”. This area will not be used and can be ignored.

Help The “Help” section contains standard Drupal help content.

User Profile and Log Out The “User Profile” section allows the user to view and edit their profile. This is also where the option to log

out of the site is located.


3. The WYSIWYG Editor At the center of any Content Management System is the rich text editor or What You See Is What You

Get (WYSIWYG) editor. The WYSIWYG editor is used throughout the website, within most Content

Types. This section provides an overview of the WYSIWYG editor options that are available on the

Rush University website.

Standard Formatting The first section of the toolbar contains the basic formatting options that are found in common word

processing software applications.

• Bold, Italicize, Underline

• Align Text Left, Align Text Center, Align Text Right, Justify Text

• Bulleted List, Numbered List

• Undo, Redo

Links, Quotes and Line Breaks The second section contains the following buttons:

• Link - To create an external link:

- Highlight the text you want to link and click the link icon.

- Enter the URL of the link in the URL field.

- In Target, enter “Open link in a new window” and the link will open a new window (recommended

when linking externally to your site).

- Click OK.

• To create an internal link, please see the description under LinkIt.

• Unlink - Highlight the text you want to unlink and click the unlink icon.

• Anchor - An anchor is a way to link to content within the same page. To create an anchor link:

- Go to the beginning of the text that will be the destination and click the Anchor button. Enter a

name for the anchor.

- Highlight the text that you would like to link and click the link button.

- Select “Link to anchor in the text”.

- In the “Select and Anchor” section, choose the anchor you just created from the list under “By

Anchor Name”


1 2 3 4 5

- Click OK.

• Insert Horizontal Line - This inserts a separator line within the WYSIWYG field. Drupal considers

everything above the line to be teaser text.

Copy and Paste Options The first three buttons (Cut, Copy and Paste) in the third section work exactly like they do in common

word processing software applications. The remaining buttons in this section are helpful in copying text

from other sources into the WYSIWYG editor:

• Paste as Plain Text - Will paste copy into the editor with no formatting.

• Paste from Microsoft Word - Attempts to strip out any extraneous styles or formatting from an MS

Word document. MS Word is notorious for embedding code within blocks of content that are

difficult for the WYSIWYG editor to remove - use with caution.

• Remove format - This is helpful when styles have been applied within the WYSIWYG that you wish to

remove. Select the text in question and click this icon. Note that this is not 100% effective at removing

styles that are pasted in from an outside source.

Inline Formats and Styles The fourth section of the toolbar contains the Format and Styles drop down lists.

• Formats are used to apply headings within the Body area. Highlight the text you want to be a heading,

and choose the heading style from the Format drop-down list. The Heading list displays the heading

as it will appear on the page. The most commonly used Heading is Heading 2. For search engine

optimization purposes, headings should be used in numerical, hierarchical order.

• Styles are customized for the Rush University site to match the site design. They allow editors to

apply design styles without knowing CSS or HTML. To apply a style, simply highlight the text and

choose the style from the Styles drop-down list. Please see the Appendix for more information about

styles.

Additional Features The last section of the toolbar contains several important, more advanced features of the WYSIWYG

editor.

• Select All

• iframe - use this button to add iframe content from another source

• LinkIt - This button is used to easily create internal links to other pages within the site, or to files

within the media library (.PDF, .DOCX, etc.).

- Highlight the text you want to be linked and click the LinkIt icon.

- Begin typing the name of the page or file. Select the desired page or file from the displayed list.

- Click Insert Link.


- If you are linking to a document, set the target to a new window by completing the following

steps. Highlight the link text and click the Link icon in the WYSIWYG toolbar. On the Target tab,

enter “Open link in a new window” and click OK.

• Templates - Templates are an important part of the website implementation as they contain pre-

formatted blocks of content with customized and advanced design elements. Templates are not

applied to existing text, they are added to the editor. After adding a template, you will need to replace

the default content with desired, actual content. Please see the Appendix for more information about

Templates.

• Media Library - The Add Media button provides access to images, multimedia, and files that can be

added to the page. There are several options for adding media.

- Media can be uploaded from your local machine via the Upload Tab.

- Media can be embedded into the page from other websites such as YouTube via the Web tab, by

pasting a URL into the Image URL field.

- The Library (MBP) tab is the recommended method for accessing the Media Library. On this

tab, you can navigate through the Media Library folder structure to find the items you wish to add

to the page. You can also search for files by name, filter by type, and change the sort order of the

page. Items can be dragged and dropped into different folders if they are not in the correct

location.

- My Files (MBP) provides the same options as the Library (MBP) tab, but filters the items so that

only media that you have added to the system is visible.

- The Library tab provides the same options as the Library (MBP) tab, but without the folder

structure. Therefore, it is not recommended.

- Ensure images have been sized to their appropriate ratio and minimum width before uploading.

- Ensure image file sizes have been optimized for the web, and are not unnecessarily large. This will

help to ensure that webpages load quickly.

- Always set the destination to Public when adding to the Media Library.

- Choose the appropriate Folder when adding to the Media Library.

- Follow the Migration Guidelines for assigning Alt tags to media.

View Options Below the WYSIWYG editor there is an option to change the Text format. The default setting is “Full HTML

- RICH.” This setting uses all WYSIWYG capabilities and is the recommended option. The “Plain Text”

option is useful when it is necessary to see the underlying HTML structures. When using “Plain Text”

mode, be sure to toggle back to “Full HTML - RICH” before saving the page.


4. Managing Content This section explains each of the Content Types in detail, including the page regions and key fields.

Content Editors can add content to the website from the “My Workbench” or “Content” options in the

black ribbon of the Administration Menu as well as from the “Add content” link in the gray ribbon.

Content Editors can find and edit existing content from the “My Workbench” or “Content” options in

the black ribbon of the Administration Menu.

There are a number of important, and over-arching things to keep in mind when working with Content

Types in Drupal:

1. Site Sections are an important part of the website architecture. All pages must be assigned a Site

Section. When editing a page, Users will only be allowed to assign Sections that they have access to.

This will make it easier to ensure the correct Section is assigned. Users with broader access should

carefully pick the Site Section for a page so that only the appropriate people can access the page.

2. Menu Settings are used to place pages into the site information architecture. This is important for

navigation purposes, and for URL auto-aliasing. When editing a page, assign the “Parent menu item”

to place the page in the correct portion of the menu. Rearranging links within a portion of the menu is

best managed from the Structure > Menus page, within the List Links option.

3. URL naming conventions are important for website easy-of-use and search engine optimization. By

default, Drupal auto-aliasing is enabled for all content types. Auto-aliasing rules are designated on a

per content type basis. For most content types, the auto-alias rule sets the URL based on the location

of the page within the site information architecture. This follows SEO best practices. Currently,

Content Editors have permission to override the URL auto-alias and set the URL manually, however

this is not recommended. If a special URL is needed for a page, consider working with a Content

Administrator to set up a URL redirect.

4. With auto-aliasing enabled, URL alias names WILL CHANGE when the Title of a page is changed.

The website is configured to automatically generate a URL redirect in this situation, to avoid any

broken links.

5. With auto-aliasing enabled, URL alias names WILL NOT CHANGE if a page is moved to a new

portion of the menu from the Structure > Menus page. The page itself needs to be edited and saved

in order for the URL alias to be reset to the new location in the menu system.


Universal Page The Universal Page is the utility content type that is widely used on lower-level pages throughout the site.

Key fields are outlined below.

1. Enter Body content

in the Page Content

section, using the

WYSIWYG editor to

format the text and

apply Templates and

Styles.

2. Choose whether or

not the social share

toolbar should

display.

3. The Gather Content

tab contains any files

that were uploaded

as part of the content

import process. This

tab will be removed

after content

migration. If there

are files on this tab, it

is a cue to the

migrator to use the

WYSIWYG editor to

insert the PDF from

the Media Library

into the page.


Full Width Page The Full Width Page is a variation on the Universal Page content type. This content type offers the

flexibility to display content in a one-column, wide format with no sidebars. The fields are identical to the

Universal Page, with the exception of the Gather Content tab, which is not present on this content type.


Academics Page The Academics Page is a content type with a variety of options that is widely used for academic pages on

the site, including department pages, program pages, research pages, and research lab pages. Key fields

are outlined below.

1. Enter copy in the Top

Content field, using

Templates within the

WYSIWYG editor to

pick from the various

options: gray block

with image, gray

block with sidebar

link list, or image

blocks.

2.Enter copy in the

Main Content area,

using the WYSIWYG

editor to format and

style the text.

3.Enter copy in the

Sidebar Content

area, using Templates

within the WYSIWYG

editor to pick from

the various sidebar

block options: block

with blue border,

block with yellow

border, buttons,

infographic, or links.


Highlight Highlight is a content type that is used to generate image blocks that display in a grid format on pages that

use the Landing Page content type. Key fields are outlined below.

1. For Highlights, always select “Microcontent” for the Section.

2. Menu settings are disabled for Highlights.

3. URL alias settings should not be changed on Highlights.

4. The content type is very simple and contains three fields: Image, Display Title, and Teaser. No

WYSIWYG templates, styles or inline media are needed on this content type.


Landing Page The Landing Page a content type with a variety of options that is used for upper-level pages on the site,

including college pages, Current Students, Education & Training, Research, and The Rush Experience.

1. Enter copy in the Top Content field,

using Templates within the WYSIWYG

editor to pick from the various options:

gray block with sidebar link list, image

blocks, right side image, or right side

blocks.

2. Pick and order Highlights from the

system for display in the 3-wide grid

format.

3. Enter copy in the Main Content area,

using the WYSIWYG editor to format

and style the text.

4. Select an image or video, and enter text

content into the designated fields for

the Blue, Green, and Purple Block

sections.

5. Enter copy in the Lower Content area,

using Templates within the WYSIWYG

editor to pick from the various options,

including the brag box.


5. Appendix: Templates and Styles The Rush University website contains many design elements that have been implemented in the

WYSIWYG editor as styles or templates.

Styles are applied via a drop-down to text that is already placed in the WYSIWYG editor. The styles on the

Rush website are:

• Intro text - a special font style for introductory paragraphs

• Bttn - green wide - a full width green button

• Bttn - green - a standard green button

• Bttn - blue - a blue button

• Bttn - green alt - a lighter green button

• Bttn - white green - a white button with a green border

• Bttn - white blue - a white button with a blue border

• Bttn - white white - a white button with a white border

• Bullet alt - an alternate bullet style

• Heading 1 through Heading 6

Templates are pre-formatted blocks of styled content that are added to the WYSIWYG via a drop-down.

Unlike styles, templates are not applied to existing text, they are added to blank spaces within the editor.

The Rush website has 45+ templates in the following categories:

• Blockquotes

• Multi-Column structures

• Feature blocks

• Images

• Page elements

• Sidebar blocks

• Tables

• Top section blocks

• Footer elements

A series of sample webpages have been created that demonstrate all of the styles and templates that have

been built as part of the implementation. These pages can be found at https://test-rushu.pantheon.io/

style-guides.


https://test-rushu.pantheon.io/style-guides

rush content editor guide mar12...migration training. 2. drupal cms overview the menu options for...

Documents