1. Drupal Training Series BASIC Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM v. 1.1

2. What is Drupal? Drupal is the Content Management System (CMS) used for the UNCP website. A CMS is a computer program used to run a complex website. It allows an organization to streamline creating, editing, organizing, and publishing content. The big three are Drupal, Wordpress, and Joomla. Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

3. The Drupal Framework Drupal makes running a large website easier by breaking all the elements down into smaller more manageable chunks. Unlike the early days of the web, Design and Content are now completely separate. Once the templates for the look and feel are built, all we have to do is fill in that framework with content. Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

4. The Drupal Framework Back in those early days, we could control a website’s look down to the pixel. Designers would pick a common monitor resolution like 1024x768 and build a site with that shape in mind. Now they design for flexibility using something called Responsive Design. People will view your site using computers, laptops, tablets, and cell phones. The layout automatically adapts to the device. It’s a tradeoff. You lose a little creativity, but you only have to code one version of your site for everyone. Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

5. The Drupal Framework Something else we need to keep in mind is Accessibility. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities. Examples: Alternative text for all images to accommodate screen reader programs that read pages aloud. Our YouTube videos use closed captioning for the hearing impaired. Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

6. Website Information Coordinators That’s still a LOT of content to handle on a site the size of ours, so that’s where Website Information Coordinators (WICs) come in. Each department has a primary WIC* responsible for their section of the site. * You can also assign secondary WICs Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

7. Website Information Coordinators Everyone in the department/program is responsible for ensuring site content is updated on a regular basis. While the WICs make the updates, everyone in the department/program should review the site at least once per semester. Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

8. Logging In To edit your website, login with any web browser – On Campus: www.uncp.edu/userwww.uncp.edu/user – Off Campus: https://www.uncp.edu/userhttps://www.uncp.edu/user Note the “s” in https for secure – If kicked out, change the URL to https:// Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM

9. Logging In The Username/Password is the same as your UNCP network account

10. Logging In Look for the black Drupal Admin Toolbar across top of page with the menu items My Workbench, Content, Structure, Configuration, and Help. If not present, press F5 on keyboard or browser’s refresh button.

11. How do I get to a page? You have 3 options on how you can get to the page you want to edit. 1.Click Menu on the left and click through the links until you reach the page. 2.Click Quick Links and click through the links until you reach the page. 3.Use the Search box.

12. How do I get to a page? There are three things to immediately look for that will tip you off that you’re in editing mode. 1.The URL bar up top shows https:// 2.The Drupal Admin bar is visible 3.Across the top of the middle of the page where the content starts, you will see a number of tabs: View Published, New Draft, Moderate, Webform, and Results Let’s go to the next slide and see what that actually looks like.

13. How do I get to a page?

14. Wait… I lost my Admin Bar Provided by University Communications & Marketing Web Publisher: 910-521-6820 http://uncp.edu/UCM Sometimes Drupal will flake out if you do a search to get to a page and your Admin Bar will disappear. Don’t panic. To bring it back, just go up to the URL bar and change the beginning of the URL from http:// to https:// to get back into editing mode.

15. How do I edit a page? To edit a page, click the New Draft tab.

16. The Editing Screen

17. Let’s look at this piece by piece. At the very top, in the URL bar, you see the word node and a number In Drupal, all of your content is contained in a node Think of a node as a big box to put all the information for that page into Drupal puts a number on the box so it can remember where it put it later

18. The Editing Screen When I go to the super long URL: www.uncp.edu/about- uncp/administration/departments/university -communications- marketing/departments/web, Drupal knows to go find box 15585 and show me what’s in there www.uncp.edu/about- uncp/administration/departments/university -communications- marketing/departments/web Node numbers are often useful for finding pages you’ve lost.

19. The Editing Screen Title: Enter or modify the page title Body: Modify content in the body (center column) of the page

20. The Editing Screen The editing interface is a WYSIWYG (What You See Is What You Get) It works like Microsoft Word From Left to Right the buttons are: Bold, Italic, Underline, Align Left, Align Center, Align Right, Bulleted List, Numbered List, Decrease Indent, Increase Indent, Undo, Redo, Insert/Edit Link, Unlink, Insert/Edit Anchor, Insert/Edit Image, Format, Block Quote, Insert Horizontal Line, Remove Formatting, Paste from Word, Insert/Edit Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells, Embedded Media, Linkit, and Toggle Spell Checker.

21. The Editing Screen That’s a lot of buttons, but most of them do exactly what you think they do To enable Spell Checker, click the last button on the toolbar Note: the Spell Checker button does not appear in Internet Explorer When editing content, click in the Body box and start typing For a Paragraph Break (double space): press enter For a Line Break (single space): press shift + enter

22. Paste From Word 1.When copying and pasting from Word or a webpage, copy the text 2.Click the Paste from Word button 3.Paste the content into the Paste from Word window 4.Click Insert 5.This removes unnecessary and often invisible extra code that tries to tag along

23. The Editing Screen Creating Section Headings – Three section headings are available: H2 > H3 > H4 – Tip: use headings and short paragraphs of content to allow readers to scan page – Also only use headings for section headings Creating Links – There are a handful of different types of links we can create in Drupal

24. Link to an External site or page 1.Highlight the text you want to create a link with 2.Click the Insert/Edit Link button in the toolbar 3.In the Link URL field, paste or type the URL 4.Set Target to Open Link in a New Window 5.Click Insert 6.The text is now linked and blue

25. Link to an UNCP page There are three ways you can do this: 1.Highlight text 2.Click the Linkit button in the toolbar 3.In the Search for content field, type the name of the page you’re linking to 4.Select the page from the Content-Basic Page list 5.The Link URL will fill in the node and number for you 6.Click Insert

26. Link to an UNCP page The second way: 1.Highlight the text you want to create a link with 2.Click the Insert/Edit Link button in the toolbar 3.In the Link URL field, type the page’s node # in the format /node/15484 4.Click Insert

27. Link to an UNCP page The third way: 1.Highlight text 2.Click the Insert/Edit Link button in the toolbar 3.In the Link URL field, copy and paste the path of the web page excluding “www.uncp.edu” 4.For example, linking to Undergraduate Admissions, you would paste in: /admissions-aid/undergraduate- admissions 5.Click Insert

28. Create an Email Link 1.Highlight text 2.Click the Insert/Edit Link button in the toolbar 3.In the Link URL field, without any spaces, type mailto:web@uncp.edu (replace with the email address you want to use) 4.Click Insert

29. Link to/Upload a document 1.Highlight text 2.Click the Insert/Edit Link button in the toolbar 3.Click the Browse button to the right of Link URL

30. Link to/Upload a document 4.In the File Browser window, click Images_Docs (1) 5.Navigate to the desired folder 6.Please upload the file(s) to the correct folder 7.Click the Upload button (2)

31. Link to/Upload a document 8.Click Add Files (3) to add the file you wish to upload 9.Once the file has been selected, click Open 10.Click Upload (4) 11.You be notified once the file has been uploaded 12.Click the small black X in the upper right corner

32. Link to/Upload a document 13.Back in the File Browser window, select the file you wish to link 14.Click Insert File (4) 15.This takes you back to the Insert/Edit Link window where you click Insert

33. Link to a previously uploaded file 1.Highlight text 2.Click the Insert/Edit Link button 3.Click the Browse button 4.In the File Browser window, click Images_Docs 5.Navigate to the desired folder 6.Click the file you want to link 7.Click Insert File 8.This takes you back to the Insert/Edit window 9.Click Insert

34. Rename or Delete a file 1.Click on the link 2.Click the Insert/Edit Link button 3.Click the Browse button 4.Navigate to the file 5.Click on it 6.Press the Delete or Rename button 7.If you rename a file, click on the file and choose relink text Tip: delete old/unused files from the server

35. Remove a Link 1.Highlight the link 2.Click the Unlink button in the toolbar

36. Subdirectories Creating subdirectories is a great way to organize your files Example: Under the Jones Center there is a folder for documents and one for photos You can create a subdirectory when uploading a file

37. Creating a Subdirectory 1.Highlight text 2.Click the Insert/Edit Link button 3.Click the Browse button 4.In the File Browser, click Images_Docs 5.Navigate to your directory 6.Click the Directory button 7.Type in the name using underscores for any spaces 8.Click Add

38. Renaming a Subdirectory 1.Click on the directory you want to rename 2.Click the Rename button across the top of the window 3.Type in the new name 4.Click the Rename button to the right

39. Deleting a Subdirectory Note: Please take great care when deleting a directory. Deletion is permanent. 1.Click on the parent folder for the subdirectory you want to delete 2.Click the Directory button 3.Type the exact name of the subdirectory you want to delete 4.Click Remove 5.If Remove was clicked, a pop-up box will appear to verify that you wish to delete that folder

40. Brain Break

41. Working with Images Image Dimensions – Resize photos outside of Drupal, preferably using Photoshop or www.picresize.comwww.picresize.com – Resize photos in Drupal using the Resize button in the File Browser – Width: no more than 460 pixels – Headshot Width: 100 pixels Inserting an image is very similar to uploading a document Tip: Create subfolders to organize images

42. How to Insert an Image 1.Click where you want to insert an image 2.Click Insert/Edit Image button on the toolbar 3.Click Browse 4.In the File Browser, click Image_Docs 5.Navigate to the folder where you want to store the image (or create a subfolder) 6.Click the Upload button on the top of the window 7.Click Add Files to add the file you want to upload 8.Once the file has been selected, click the Open button 9.Click the Upload button (bottom of the window) 10.You will be notified once the file is uploaded 11.Click the small black X in the upper right corner

43. How to Insert an Image 12.Click the file you want to insert 13.Click Insert File on the menu 14.This takes you back to the Insert/Edit Image window 15.Enter the Image Description and Title (THIS IS REQUIRED)

44. How to Insert an Image 16.Click the Appearance tab and set the Alignment (most likely left) 17.Click Insert 18.To change image properties once the image is already inserted in the body, click the image and then the Insert/Edit Image button

45. Insert a Previously Uploaded Image 1.Click where you want to insert an image 2.Click Insert/Edit Image button 3.In the Insert/Edit Image window, click Browse 4.In the File Browser windows, click Image_Docs 5.Navigate to the folder where the image resides 6.Click on the image you want to insert 7.Click Insert File on the menu 8.This takes you back to the Insert/Edit Image window 9.Enter the Image Description and Title (THIS IS REQUIRED) 10.If necessary, click the Appearance tab and set the alignment 11.Click Insert

46. Add a Link to an Image 1.Insert the image 2.Click on the image 3.Click the Insert/Edit Link button on the toolbar 4.Enter the Link URL 5.Click Update

47. How to Embed Media (YouTube) 1.First, we need to get the Embed code 2.Go to the video’s page on YouTube.com 3.Under the video, click Share (1) 4.On the menu that appears, click Embed (2)

48. How to Embed Media (YouTube) 5.Click on the Video size and select (3) 6.In the first box, enter 460 for the width 7.Hit TAB and the second box will automatically adjust the height 8.Copy the code from above the Video size field (4)

49. How to Embed Media (YouTube) 9.Back in Drupal, click in the body where you want to embed the video 10.Click Insert/Edit Embedded Media button Click the Source tab

50. How to Embed Media (YouTube) 11.Paste in the code from YouTube 12.Make sure the width of the video has been set to 460 pixels 13.Click Insert

51. Add an Anchor within the page Think of an Anchor as a shortcut to another section in your page. 1.Click where you want to insert an anchor 2.Click the Insert/Edit Anchor button 3.Type in the anchor name 4.We suggest one or two lowercase words connected with an underscore or hyphen

52. Link to an Anchor within the page 1.Highlight the text you want to link to the anchor 2.Click the Insert/Edit Link button 3.Type in the number sign (#) and the name of the anchor (no space between the number sign and the anchor) 4.Example: #section_name 5.Click Insert

53. Anchor for returning to the top An anchor named #top is included in each page. This anchor takes the visitor back to the top of the page. To use this anchor, type your text for the link at the bottom of the section (i.e. ) or insert an image (i.e. an arrow). 1.To link to the text, highlight the text 2.Click the Insert/Edit Link button 3.Type #top 4.Click Insert

54. Anchor for returning to the top 1.To link to an image, click the image 2.Click the Insert/Edit Link button 3.Type #top 4.Click Insert

55. How to Create a Slide Show You can add a slide show with multiple images and captions to the bottom of a page Image dimensions: 460 (width) by 260 (height) pixels Example Slide Show: http://uncp.edu/node/31641/ http://uncp.edu/node/31641/

56. How to Create a Slide Show To upload an image: 1.Click the Browse button and locate the image 2.Click Open 3.Click the Upload button 4.Enter the Alternative Text and Title 5.To add additional images, click Add a new file and repeat the previous step

57. How to Create a Slide Show To insert a previously uploaded image: 1.Click Open File Browser and locate the image 2.In the File Browser window, click Image_Docs 3.Navigate to where the image resides 4.Click the image you wish to include 5.Click Select from the menu 6.Enter the Alternative Text and Title

58. How to Create a Slide Show

59. Brain Break #2 Here’s a French Bulldog driving a car for absolutely no reason

60. Editing a Page – Lower on the Page

61. Site Sections Taxonomy Select the appropriate taxonomy term from the drop down menu This term determines the name of the department/programs that display in the upper right corner of the page and who can edit the page WIC access is based on this taxonomy term

62. Featured Content The dropdown menu under Feature Content has a few options None Image Video Promo Obviously None means there’s no featured media at the top of the page

63. Featured Content Image: Dimensions 700 pixels wide x 300 pixels high Click the Browser button under Featured Image to add a file and click Upload Click the Remove button to delete the image Video: Paste the video URL into Video URL field (YouTube video preferred) Promo: Promos will be covered in the Advanced Class

64. Featured Content Sources Here are a couple of resources: SmugMug – www.uncp.edu/photowww.uncp.edu/photo UNCP YouTube – www.youtube.com/uncpembroke1887 www.youtube.com/uncpembroke1887

65. Menu Settings (IMPORTANT) 1.Check Provide a Menu Link 2.Menu Link Title is the text that appears in the site navigation 3.From the Parent Item dropdown menu, select the parent for the page 4.Click Save

66. Publish Document After you’ve saved a new draft of the page, there’s one more step before it goes live. 1.Change the dropdown menu in the yellow box to Published and click Apply 2.Click the Edit Draft tab to continue editing the page before it’s published

67. Add a Page 1.From the Drupal toolbar, hover over Content, then Add Content, Click Basic Page 2.Follow the steps from Edit a Page section from above 3.Be sure to select and set the Menu Settings

68. Moderate/Unpublish a Page 1.Click the Moderate tab in the body of the page 2.WICs can revert to an earlier version of the page by clicking Revert for the desired version 3.Unpublish (not delete) the page by clicking Unpublish 4.To find an unpublished page, see the My Workbench section below 5.Tip: Hover over the Moderate button to see the page’s node #.

69. Delete a Page 1.Deletion is permanent 2.When in doubt, just Unpublish 3.To delete a page, create a New Draft and click the Delete button at the bottom of the page

70. Site Map 1.The Site Map, linked in the footer of every page, lists each page on the site 2.Use the Site Map or My Workbench to locate a lost page

71. My Workbench 1.Use My Workbench to review all content created 2.From the Drupal Admin toolbar, click My Workbench 3.Under My Edits, click View All to review all content created 4.To view unpublished content, set Published to “No” and click Apply

72. What’s Next? Be sure to sign up for the Advanced Class Learn about: Spotlights Promos Webforms