Training. Drupal Training Manual. Department Content Management and Administration. Prepared for: University of Maryland, School of Public Health

Transcription

1 Training Drupal Training Manual Department Content Management and Administration Prepared for: University of Maryland, School of Public Health Created By: The Canton Group 2920 O Donnell Street Baltimore, Maryland tel: fax:

2 Table of Contents Training... 1 Drupal Training Manual... 1 Department Content Management and Administration... 1 Data (Content Types)... 4 Department Basic Page... 5 Event... 8 News Slideshow Faculty Bio To Quick Reach a Faculty Bio. Page Editing Faculty Bio. Pages Staff Bio Content Type... 4 Student Alumni Bio Content Type... 8 Configure User Account Management Logging In Password Reset Change Existing Password Managing Content Menu Structure Modifying the Menu Structure Adding Links to the Main Navigation Nodequeues Other Managing Files Using the Content Editor HTML Heading Tags Altering Font Size and Styles Using Links... 23

3 Adding Images Adding Content from Microsoft Office Using Anchor Tags Embedding Media File Attachments Input Formats Using the CKFinder File Browser... 30

4 Data (Content Types) Within the Drupal CMS, data are stored in content types. The following data or content types have been created. When writing or inserting content for the web, it is important to remember to utilize the semantic markup available, such as headings, sub headings, lists, and block quotes. Proper use of these organizational tools allows the site to be accessible to users with disability and increases the clarity of the content. Content can be assigned to and moved around menus of the site. This can be accomplished when editing a page individually or via the Site Menu editing interface. When specifying the Weight of a menu item it will determine how it orders relative to other menu items. The lower the menu item s weight, the higher it will appear in a menu. Most content in the Drupal content management system is comprised of Nodes. They provide a base set of functionality that allows Drupal to build upon. Basic features include workflow, searching, and revisions. Nodes represent plain Items, users, and plain pages such as an about page. By default all nodes will be published when saved. To un publish a published or new node, uncheck the Published checkbox under the Publishing Options tab near the end of the node edit page and then save the form.

5 Department Basic Page This content type is used to create pages specifically for departments or centers that will appear on their sites, and within their menu structures and information architecture. For example, an About Us page: NOTE: While it can be used to create pages at the Global level, the Basic Page content type should used for that purpose. STEP 1: Add a title. STEP 2: Choose the Primary Organization this page will be a part of. This will also influence the available menus that you can initially add this content to.

6 STEP 3: Add descriptive test in the Body field. STEP 4: Add the page within the department/center menu structure.

7 STEP 5: Click preview to review, and then click Save.

8 Event This content type is used to create events, both at a global:

9 And department specific level: The method for creating a global event or a department event is similar, only differing at the primary and shared organization fields. Additionally, global events will be shown in the Event block on the main SPH website:

10 STEP 1: Add a title. STEP 2: Select the Primary Organization for the event. STEP 3: Select any Shared Organizations for the event. STEP 4: Select the type of Event.

11 STEP 5: Create a start and end date for the event. STEP 6: If required, add additional dates for the event. STEP 7: Add descriptive text in the Body field.

12 STEP 8: Upload an Image, if needed, for the event. STEP 9: Click the Featured Event checkbox if the event should be a featured event in the News Room. STEP 10: Upload an image that will be used if the event is a featured event. NOTE: If the event was created with a department or center selected as either Primary or Shared organization, it should also appear in the event listing for that department.

13

14 News STEP 1: Enter a title. STEP 2: Select the Primary Organization the News content is affiliated with. STEP 3: Select the Shared Organizations the News content will be shared with. STEP 4: Select categories for the News content.

15 STEP 5: Select event categories. STEP 6: Select the publication date. STEP 7: Enter content in the body field.

16 STEP 8: Enter and related links for the news content. STEP 9: Select an image.

17 STEP 10: Add content that will appear on the main page as an image caption. STEP 11: Specify if this content needs to be on the top of the News Room page if it is the latest featured news item. It must include a Featured Image that will be displayed in the Featured block on the News Room (the default image crop is 440x330).

18 STEP 12: Select an Image to be used for the Featured Image. This is the image that will be displayed in the Featured block on the News Room. Image size is 350pixels wide x 250 pixels high. This field is required when the news article's featured field is checked. NOTE: This Featured Image browser allows you to upload an image: Or, browse from available images already uploaded onto the site. STEP 13: Add a research publication, if applicable.

19 STEP 14: Add any additional URLs related to this News content. STEP 15: Link the news item to Faculty Members, Students, or Staff. The field will begin to generate names as you type. STEP 16: Select a related degree, if applicable. STEP 17: Select areas of expertise to associate with the content, if applicable.

20 STEP 18: You may add an image from Flickr using the Item Type, Item Id, and User Id fields. First, specify the Item Type if you want to reference one image from Flickr, or a Photoset. STEP 19: Enter the Item Id: The Item Id can be found within the URL of the image, following the username. Ex. Ex. STEP 20: Enter the User Id. The user id of the Flickr user who owns the photos. If this is left blank, the sites default user will be used. The current default id is @N08, which is representative of the School of Public Health s Flickr Account. To find your FlickrID, you may use this link:

21 STEP 21: Enter Media Outlet information. STEP 22: Click Preview to review the content, and click Save to publish the content.

22 Slideshow This content type is used to generate the Slideshow images at the home page level of the Global Site, and the Department and Center sites. STEP 1: Add a title. STEP 2: Select the Primary Organization. STEP 3: Select any Shared Organizations that will also have access to this Slideshow content.

23 STEP 4: Add a destination URL in the provided fields. STEP 5: Enter descriptive text in the Body field. STEP 6: Upload an image to be used in the Slideshow. STEP 7: Select the Background color for the Slideshow. These colors are associated with the global, department, or center designations.

24 STEP 7: Click Preview to review the content, and click Save to publish the content.

25 Faculty Bio. To Quick Reach a Faculty Bio. Page STEP 1: After logging into the website by using your CAS credentials, click Okay on the popup. STEP 2: Go to or click on the Faculty link in the People area of the menu. STEP 3: Locate your name on the Faculty List and select it to view your full bio record. Alternatively, you may search for your name using the provided fields. STEP 4: Click on the Edit tab to update your information. Alternatively, to create new Faculty Bio. content select Add Content from the Department Content dashboard, and then select Faculty Bio. Editing Faculty Bio. Pages STEP 1: Review your headshot. If needed, upload a headshot photo in.jpg format (recommended 400 x 600 pixels). STEP 2: Add a first name, last name, academic title, and administrative or functional title.

26 For Academic Title: Please provide your primary academic title. For UMB faculty or affiliates from other parts of UMD campus: use this field to indicate academic title with collaborative school (which may be different than academic title in the School of Medicine). For Administrative (Functional Title): Here you may include additional titles, such as affiliate appointments, or administrative roles. For UMB faculty or affiliates from other parts of UMD campus: Use this field as the place to put the primary academic title at the University of Maryland, Baltimore (such as: Professor, Epidemiology and Public Health, University of Maryland School of Medicine) or in the department within another school/college at UMD. STEP 3: Choose the Primary Department Affiliation. NOTE: If you have a joint appointment, or if you are core faculty in a research center, you may select more than one primary department (or center). STEP 4: Choose the Secondary Affiliation. NOTE: Select a secondary department or center if you have an affiliate appointment with one. You can select multiple affiliations.

27 STEP 5: Choose some areas of expertise from this list of high level terms, for use in "find an expert" search. Limit expertise terms to no more than ~six. More specific expertise terms should be included in your biography. The terms currently available are as follows: STEP 6: Add an address, office phone number, room number, location, and office hours.

28 Location note: Leave this blank if you are in the School of Public Health building as the default is "School of Public Health" if your campus is marked as "College Park." If not in the SPH building, please provide the building name where your office is located. You will enter room number in the field above. STEP 7: Please provide a brief biography which includes details on your research focus, and details about your teaching or other activities as appropriate. Be sure to include key terms associated with your area of expertise in this description. STEP 8: Upload a PDF file of your current curriculum vitae. STEP 9: Add a link to website, if available. If the link is external add the complete url, for example: If the link is internal, add the part of the URL path that follows the main SPH

29 website URL, for example instead of entering name, you would only use /department/person name. STEP 10: You may link to your laboratory site by selecting it from the provided drop down menu. If your lab site resides at a URL outside of the SPH website, leave this blank and add that URL to the "website" field above instead. STEP 11: Add education and training information.

30 STEP 12: Please provide up to 10 select publications (most recent or highest impact) sorted from most recent to oldest. You may also link to your page on scholarly research portals such as Researcher ID, Google Scholar, PubMed, etc. STEP 13: Add Honors and Awards information. STEP 14: Add collaborators information.

31 STEP 15: List current/recently taught courses, upload and link to PDF of course syllabi if possible. STEP 16: Please select the degree programs with which you are affiliated.

32 Below is a listing of the current related degree programs. BS, Behavioral and Community Health BS, Family Science Physical Education Master's Certification (K 12) BS, Kinesiology BS, Public Health Science (College Park) BS, Public Health Science (Shady Grove) Certificate, Gerontology Certificate, Global Health Certificate, Principles of Public Health MA, Kinesiology MHA, Health Services MPH, Behavioral and Community Health (CP) MPH, Biostatistics (CP) MPH, Community and Population Health MPH, Environmental Health Sciences (CP) MPH, Epidemiology (B) MPH, Epidemiology (CP) MPH, Global Health (B) MPH Physical Activity MPH, Public Health Practice and Policy (SG) MS, Couple and Family Therapy PhD, Behavioral and Community Health PhD, Epidemiology PhD, Family Science PhD, Health Services PhD, Kinesiology PhD, Maternal and Child Health PhD, Toxicology and Environmental Health

33 STEP 17: Please select the graduate students whom you advise. Search for users by entering part of their name. To add additional students, add a comma after the last name and start typing the next student's name. If you do not see your student advisees here, leave blank for time being. Student profiles are still being added to the database (7/22/14). STEP 18: You may associate the Faculty User Account with the Faculty Member by using the provided field. As you type it will begin to auto generate results based on the address associated with the user accounts. STEP 18: Faculty Group The faculty group should be set to "main" for faculty with primary appointments in the School of Public Health. Research staff (faculty research assistants), adjuncts and affiliates (which includes faculty from UMB) should be marked as such, as well as emeriti faculty. This enables proper grouping of faculty. STEP 19: Please specify campus location if not already indicated. Off campus is an option for adjuncts or research staff not based on one of the campuses.

34 STEP 20: Faculty with administrative roles should have "yes" checked here. This includes degree program directors, chairs, etc. STEP 21: Click Preview to review, and then click Save. STEP 22: Verify the changes you ve made are correct, re editing if needed. This content is reflected in the following areas of the site:

35 [MAIN SITE] People / Faculty [DEPARTMENT/CENTERS] People / Faculty (or in some cases Faculty/Staff) In both instances, the content is pulled into a sortable listing. At the global/main level the listing includes the varied departments and centers: At the department/center level, there is no such filter:

36 Staff Bio Content Type This content type is used to populate Staff information across the website. At the global site level this content is populated in the Staff area under People. At a department level the placement may vary but it is commonly populated in the People area of those sites as well. In either instance, the process to generate this content is very similar. STEP 1: Upload an image to be used as a headshot. If no image is provided, a default image will be used.

37 STEP 2: Enter the first and last name. STEP 3: Enter the job title. STEP 4: Select the primary affiliation for the staff member. STEP 5: Select any additional organizational affiliations.

38 STEP 6: Enter the staff member s address. STEP 7: Enter the office phone number. STEP 8: Select the campus. STEP 9: Staff members who play a role in the school or department administration should be marked as yes here.

39 STEP 10: Enter biographical information. STEP 11: If available, enter a personal website URL (internal or external). STEP 12: Click Preview to review, and then Click Save.

40 Student Alumni Bio Content Type This content type is used to populate Graduate Student and Alumni information across the website. At the global site level this content is populated in the Graduate Student area under People. STEP 1: Upload an image to be used as a headshot. If no image is provided, a default image will be used. STEP 2: Enter the first and last name.

41 STEP 3: Select the primary department affiliation for the student/alumni. STEP 4: Select any additional organizational affiliations.

42 STEP 5: Enter the Academic Title. STEP 6: Select the Academic Degree from the dropdown. STEP 7: Enter the student/alumni s address. STEP 8: Enter the office phone number. STEP 9: Enter the Room Number. STEP 10: Select the Faculty Advisor.

43 STEP 11: Enter biographical information. STEP 12: If available, enter any selected publications information. STEP 13: Select the Campus.

44 STEP 14: Enter Fun Facts. STEP 15: Click Preview to review, and then Click Save. Configure This section describes the Drupal 7 CMS configuration. Items covered in this section include the following: User Account Management Roles and Permissions Basic Page Layout (Regions and Blocks) Modules Reports and Statistics

45 User Account Management Logging In Logging in is done by referencing the URL of the website and adding /user and then entering the username/password credentials for the account. Password Reset If you have forgotten your username or password: STEP 1: Click on the Request New Password tab. STEP 2: Enter your username or address to have a link to reset your password ed to you. Change Existing Password STEP 1: After logging in, click on the username link in the upper right hand corner of the top Drupal menu.

46 STEP 2: Click the edit tab. Enter the new user name in both the Password and Confirm Password fields, and then click Save. Managing Content The Department Content area of the Drupal Administration Menu allows you to review content within your group.

47 Menu Structure Modifying the Menu Structure These are the primary navigation elements in your web site. There are typically more than one set of menus, such as Primary, Navigation, or General. Each set of menus is a block, and is assigned to one of the regions on your web site. You can also create and add your own menu structures to a region as well. Note: Although Drupal supports adding and changing menus on the fly, doing so may break your site theme, especially if graphics are involved. STEP 1: Select Structure > Menus from the Drupal Administration Menu

48 STEP 2: Click on the menu you would like to organize. The menu that governs the main site navigation is called Main Menu, presented below. All other menus are shown in the Menus area, however, as that functionality is governed in the same administrative area with a users ability to edit menus determined by their user role and permissions. Click List Links: STEP 3: Drag and drop menus or click on Add Link.

49 Dragging a menu option under another creates a sub page of the main navigation item. For example dragging School at a Glance under Mission and Vision : ` STEP 4: Click Save Configuration when you re done dragging and reordering. NOTE: You may also use the POWER EDIT option to re order your menu structure. This can be accessed from the menu area by clicking the Power Edit tab.

50 This will provide a similar view of the menu structure but also provide the ability to alter the title and path of the entire menu at the same time. Adding Links to the Main Navigation While creating content, a user has the option to add that content to the navigational structure of the website. STEP 1: Select Provide a menu link in the Menu Settings area of the content creation area. STEP 2: At this stage you can give the content a menu name independent of the title of the content and select where the content will go in the hierarchy of the navigation. NOTE: You can also change the placement of the content within the navigation after this stage. Please reference the section of this guide called Menus for more information.

51 Nodequeues The Nodequeue module allows users to collect nodes in an arbitrarily ordered list. The order in the list can be used for any purpose, such as a block listing teasers for the five top news stories on a site. Nodequeue provides a simple drag and drop interface to manually order any queue. Additionally, it allows nodes to be added and removed from queues without needing edit permissions to the node. Currently the only instances of nodequeues on the website are the Homepage Global Slideshow and the Slideshow Organization, pictured below. This area is reached by hovering over Structure and then selecting Nodequeues. To view the content within a Nodequeue, click the View link in the Operations column.

52 Much like the menu structure, the order of the nodequeues can be rearranged by clicking and dragging the drag icon next to the title of the slide item. When you move any of the items, a message will be presented that illustrates the changes will not be saved unless you click Save. Additionally, these Nodequeues are generated using the Slideshow content type, so when a user clicks Edit within the nodequeue area they are taken to editing that specific type of content. Please review the workflow associated with the Slideshow content type in the Content Types section of this manual for more information.

53 Other Managing Files There are two methods for managing files on the website. The first is done through the File Browser pictured below. This is accessed by using the Browse server button in either the Image Properties or the Link Properties window. NOTE: You may also create sub directories/folders by following these steps: STEP 1: Select Browse Server from the Image Properties window, or the Link window. Right click in the folders listing. STEP 2: Click New Subfolder. STEP 3: You may assign the folder as a subdirectory of any existing directory/folder by selecting the error next to the field. STEP 4: Click Ok to add the directory/folder to the existing folder structure. The second method is using the Media Browser located in some content types, for instance News, pictured below.

54 Using the Content Editor The CKEditor allows creation of HTML content using an editor that is very similar to other desktop word processors such as Microsoft Word or Open Office. Available styles include Bold, Italic, Underline, Lists, Tables, and Custom Styles built into the theme. HTML Heading Tags Most formatting for headings and subheadings are styled using HTML Heading Tags such as H1, H2, H3, etc. These HTML Heading Tags are predefined in terms of content formatting and style for your particular web site.

55 When writing or inserting content for the web, it is important to remember to utilize the semantic markup available, such as headings, sub headings, lists, and block quotes. Proper use of these organizational tools allows the site to be accessible to users with disability and increases the clarity of the content. Altering Font Size and Styles Using Links STEP 1: First, highlight the text you would like to be linked and click on the chain image. STEP 2: Next, the Insert/Edit link dialogue will appear.

56 In the Link URL field, type in the URL where you would like to have the link point to this can be an external link (starting with ) or an on site link (starting with / ). STEP 3: Optionally, enter Title text that will appear when a user hovers over the link with their mouse or their screen reader reaches the link. When ready, click the Insert button and the link will be created in the WYSIWYG editor. NOTE: The Target tab is used to determine if the link opens in the same window or a new window: The following options are available for link targets:

57 Open in New Window (_blank): Load in a new window Open in Top Frame (Replaces All Frames) (_top): Load in the full body of the window Open in This Window (_self): Load in the same frame as it was clicked Open in Parent Window/Frame (_parent): Load in the parent frameset Adding Images Images are uploaded and inserted as easily as links are created. STEP 1: Place the cursor where you would like the image inserted and click the image icon. STEP 2: The Insert/edit Image dialogue will appear. You can then upload an image by clicking on Browse Server. From the File Browser dialog you can select images that have already been uploaded to the server.

58 STEP 3: If the image you need is not on the server you can upload it by clicking on the Upload link at the top of the file browser dialog. The upload link at the top of the dialog window will resemble the graphic here: NOTE: Before clicking upload, make sure that your department folder is selected. STEP 4: Pick the file from your local computer:

59 Then check any thumbnail sizes you would also like created, and then click Upload. Your file will be sent to the server and resized as needed. Once the server has the file the page will be refreshed and your image should display. STEP 5: Enter a description of the image as it is require for Section 508 compliance and click Insert from the Insert/edit Image dialog. Your picture will be added to the content of the page and should appear in the editor.

60 The image can now be positioned using the alignment buttons around it., allowing the text to flow Adding Content from Microsoft Office As a result of the formatting code inherent in Office documents, Drupal is equipped with functionality to paste from Word without the formatting. STEP 1: First, select the text or content you want to copy from an Office document (either by selecting Copy from the menu within the Office program, or by selecting the text and pressing Ctrl+C ). STEP 2: Next, within the text editor in Drupal, click the Paste From Word button. The Paste From Word dialog box will appear, where you will be instructed to press Ctrl+V to paste the text into the window. Using Anchor Tags An anchor element is called an anchor because it can be used to anchor a URL to text elsewhere on a web page. It is especially useful to navigate pages with large amounts of text or other content. 1. Place the cursor where you like the anchor to be located and click the anchor icon. The Insert/edit Anchor dialogue will appear. 2. After naming the Anchor and inserting the anchor in the content, a smaller Anchor icon will appear, showing where the link will go when clicked. To use the Anchor, outline existing content and click the insert/edit link button. The insert/edit link dialogue box will appear and you can select the Anchor from the drop down menu. Select the Anchor

61 you created, in this instance called Test. The Link URL will automatically populate after selecting the Anchor. Click on Insert to set the anchor. Embedding Media Embedding a video within the WYSIWYG Editor is done by using the Embed Media button. After clicking the Embed Media button, the Embed Media Dialog will pop up. This allows a user to insert the code from media such as YouTube, Vimeo, QuickTime, or other video sharing and distribution services. After clicking OK the embed code will appear as a solid block within the content area. Once the content is saved, the embedded media will appear within the content area. File Attachments Files can be attached to any node using the File Attachments or Downloadable Materials feature near the end of the Add/Edit page. STEP 1: To upload a file, click the Choose File button and select a file from your computer. STEP 2: Then click the Upload button and the file will be uploaded to Drupal and you will be given a URL to the file and the ability to hide the file from listing at the bottom of the node.

62 STEP 3: To delete the file, click the Remove button and save the page. Input Formats There are multiple options for inputs within the editor; however, only three are normally applicable: Filtered HTML: Allows for a select subset of allowable HTML. All other formats not mentioned will be removed. o Web page addresses and e mail addresses turn into links automatically. o Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> Full HTML: This is the preferred option. This allows you to fully use all standard HTML code. o Web page addresses and e mail addresses turn into links automatically. o Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines. Full HTML + Insert Blocks: This is used when there is a need to display inline blocks, for example a sub site specific navigation block. o You may use [block:module=delta] tags to display the contents of block delta for module. o Use [accordion] and [/accordion] with <h3> header tags to create a jquery UI Accordion widget. Using [accordion collapsed] will start with the accordion closed. o Web page addresses and e mail addresses turn into links automatically. o Lines and paragraphs break automatically. Plain Text: This option is used to show the source code for the body content. o No HTML tags allowed. o Web page addresses and e mail addresses turn into links automatically. o Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines. Using the CKFinder File Browser To access files using the File Browser, click the Link button and from the Link popup, select Browse Server.

63 After clicking Browse Server, the contents of the server will be displayed:

64 From the CKFinder, files can be deleted, resized, etc. Right click on an image, for instance, to bring up additional file options.