Drupal Training Series

1. Drupal Training Series • Discover Drupal 6 • 102: Content Types

2. What We’ll Be Covering… • Content Types • Book Page Content Type • Ex. 01 Create Book Structure • Parent Book Page • Child Book Page • Book Navigation Menu • Auto Navigation • View Printer-Friendly Book Content • Organizing Books • Announcement Content Type • Ex. 02 Create Announcement • Poll Content Type • Ex. 03 Create Poll • File Manager • File Management Best Practices • Ex. 04 Upload a File • Ex. 05 Resize an Image File • Ex. 06 Create an Image Thumbnail • Ex. 07 Delete a File • Ex. 08 File Links • Images • Image Best Practices • Ex. 09 Embed an Image • Ex. 10 Style & Position Images • Video • About MediaSpace • Video Content Type • Ex. 11 Create Video Content

3. Getting Started: Log In and Gather Lab Materials • Please use Mozilla Firefox as your browser for this workshop. • Go to: • http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6 • After logging in to the training site, please click on the Training Materials menu link at right. This will take you to CWS Training and the corresponding materials needed for this workshop. • Download and save the Content Types Materials to your desktop. • Extract the files from the zip file.

4. Content Types: Overview • In broad terms a content type is really just a big data entry form. Different content types are used for different “categories” of content. • These different categories of content contain their own respective features and behaviors – as an example: • Announcements – have publishing start and end dates. • Polls – receive simple input from an audience. • Really, it’s just a way to help sort and organize the various types of content that may be present on a Drupal site

5. Content Types: Overview – Default Content Types • The OSU Drupal 6 installation, by default, comes with six different content types: • Announcement • For content that has a publication start and end date. • Biblio • For bibliographic content. • Book Page • For hierarchical content. • Feed • For use with OSU RSS feeds. • Page • For content that doesn’t change often (a.k.a. “static” content). • Poll • Poses a single question and allows for set of possible responses. • Story • Identical to Page content type – intended for creating and displaying content such as press releases. • Video • Used for video content from third party providers • Webform • Identical to Page content type – intended for creating and displaying content such as press releases.

6. Content Types: Overview – Page v. Story Content Types • The OSU Drupal 6 Basics tutorial covers the Page content type in great detail therefore this content type won’t be a focal point for this workshop (though we will use it a bit later). • Incidentally, the Story content type is a duplicate of the Page content type. The only difference, in the OSU Drupal 6 installation, is the fact that, by default, the Page type is set to publish on Save where the Story is set to not publish on Save. • What the Story content type provides is a different node type, which can be used in combination with more advanced tools to create more dynamic displays of information – such as regularly updated human interest stories or press releases. • It is suggested that Page content type be used for static content, such as an About page, while the Story content type is used for more engaging material.

7. Content Types: Book Page – Overview • The Book Page content type is intended for content that has some sort of hierarchy. • As an example, a Book on Learning OSU Drupal may contain something like the following: • Learning OSU Drupal 6 • Creating Content • Page Content • Announcement Content • Managing Users • Adding Users • Changing Access Levels • Site Optimization • Creating CCK Types • Using Views This is the “Top” or Parent Page – it should be something like an overview or introduction Items indented directly below the Parent page are Child pages. These contain more specific information that details and/or supports the main topic of the Book Using Books provides a few other nice features as well, such as on-the-fly menu development, a pre-built Menu block, and a printer-friendly feature which prints up the entire Book in a book-style format

8. Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page • To create a Parent Book page, do the following: • In the Admin menu, click on Content management > Create content > Book page. • Title field = enter a title Note: If you use the same title as shown, enter your initials at the end. • Bodyfield = leave blank • Click on the Input formatfieldset to open it • Input formatoption = Full HTML • Click on the Book outline group to open it • Book field = create a new book 2 1 3 Leave blank 4 6 7 5

9. Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Paste Word Text • Now, open the d06-content-typeslab materials folder on your desktop: • Copy the Ex. 01asection from it. • Paste the text into the Body field. 1 2

10. Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Preview & Save • Save if satisfied with the results

11. Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Add Child Page • Now that a Parent Book page has been established Child Book pages can be easily added to it. • To add a Child Book page, just do the following: • Scroll to the bottom of the Parent page and click on the Add child page link. 1

12. Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Add Basic Information • Similar to the Parent Book page, complete all of the information first: • Title field = enter a title • Body field = leave blank • Click on the Input format group to open it Input format option = Full HTML • Click on the Book outline group and take a look at it. The Book and Parent item fields will be auto-filled. • Weight field = -15 Using this setting will put this Child Book page the top of the list of Child pages for this Book. 1 2 Leave blank 3 4 5

13. Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Paste Word Text • From within your lab document on your desktop: • Copy the Ex. 01b section of your lab document and paste the text into the Body field. 1

14. Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Preview & Save • Save if satisfied with the results.

15. Content Types: Book Page – Ex. 01 Create Book Structure – Now You Do It – Add Child Page Look to the right sidebar, in the Book navigation menu, and click on the top page of your book. Once the page shows, click on the Add child page link and enter the following information: Title field = Managing Users Body field = paste in section Ex. 01c Input format option = Full HTML Book outline Weight field = -14 Click the Save button when finished

16. Content Types: Book Page – Book Navigation Menu • As you may have noticed, when creating Book content the Book module will automatically place the item in its own Book navigation menu. • Child pages are automatically listed beneath the parent page. • The Book navigation menu block can be given another title, or not used at all, if desired. • You can also still use other menu options, such as Primary links. • Note: These are features and settings that are further described in the OSU Drupal 6 Site Structures and Engineering Blocks workshops.

17. Content Types: Book Page – Auto Navigation Features • The Book module, which controls all Book features in a Drupal site, also creates automatic navigation links at the bottom of book pages. This footer navigation can be toggled on and off in the OSU Standardtheme.

18. Content Types: Book Page – Printer Friendly Version Feature • The Printer friendly version link at the bottom of a Book page will provide a preview and print-up of the Drupal book, as if it were a book. To use this feature, do the following: • Click on the Printer friendly version link. • Note how every page of the book shows up in the preview. • To leave the preview, just click your browser’s Back button 2 1

19. Content Types: Book Page – Books Management – List • The Books menu is completely independent of Drupal’s default menu structure – but can work with it when specified. This is actually a good thing, because it gives the user the ability to run two menu sets at the same time. • To easily order books and book pages, go to Admin menu > Content management > Books • If multiple books exist on the site, they will be shown here. To edit the pages in a book, just click on the edit order and titles link for the respective book.

20. Content Types: Book Page – Books Management – Ordering • Once within a book, re-ordering the nodes is very simple. Just do the following: • Click on the directional “handle” of the page you want to move. • Drag the page up or down to the desired position. To make a page a child of another page, or to take it out of a hierarchy, just move the page to the right, to indent or left, to outdent. • Click the Save book pages button. 1 2 3

21. Content Types: Announcement • The Announcement content type is intended for content that has a publishing start and publishing end date. • This means that a contributor can pick a date for Announcement content to show itself on the site and also pick a date for that same content to “disappear”from the view. The content is not removed from the site itself, it merely no longer displays. • The Announcement content type is intended to be used with either the Announcements: Small List block or the Announcements: Summaries block for best results. • For the following exercise, we’ll use the Announcements: Small List block, which has been enabled in advance.

22. Content Types: Announcement – Ex. 02 Create Announcement 2 • To create an Announcement, do the following: • Go to Admin menu > Content management > Create Content > Announcement. • Enter a title in the Title field. • Leave the Body field blank for the time being. • Click on the Input Format group to open it and select the Full HTML option. • Leave today’s date in the Publication date field and enter tomorrow’s date in the Expiration date field . • Click on the Publishing options group to open it and uncheck the Promoted to front page option. 1 3 Leave Blank 4 5 6

23. Content Types: Announcement – Ex. 02 Create Announcement – Paste Word Text • From within the lab materials folder on your desktop: • Copy the Ex. 02 section of your lab materials doc and paste the text into the Bodyfield. 1

24. Content Types: Announcement – Ex. 02 Create Announcement – Preview & Save • Save if satisfied with the results.

25. Content Types: Announcement – Announcements : Small List Block • Note how the Announcements block now contains the new Announcement content. • Click on the title of your Announcement to open it and click on the Edit tab. • Change the Published date to yesterday’s date, the Expiration date to today’s date and Save the content to see the Announcement content type at work.

26. Content Types: Poll – Overview • The Poll content type allows contributors to create simple, single question opinion polls. • Poll content is quite flexible. It can be open to participation from the general public, if desired, without any need to log in through ONID. • Question and answer sets can be revised, as needed. • The Poll module, which creates the Poll content type, also automatically provides a simple, real-time bar graph after a participant responds, to provide instant poll status information to the user.

27. Content Types: Poll – Ex. 03 Create Poll – Enter Basic Information 2 • To create a Poll: • Go to Admin menu > Content management > Create Content > Poll link. • Enter a question in the Question field. • Enter at least two choices in the Choice fields – to add additional Choice fields, click the Add another choice button. • Leave the Poll status option at Active. • Set the Poll duration field to 1 day. • Click on the Publishing options group to open it and uncheck the Promoted to front page option. 3 1 4 6 5

28. Content Types: Poll – Ex. 03 Create Poll – Add Poll to Menu • Up until this point, we haven’t had to make a menu item for any content yet. For the poll, we’ll need to: • Scroll down the page to the Menu settings group and click to open it. • Enter a title in the Menu link title field. • In the Parent item drop-down box, select the <Poll Content> menu. • Leave the Weight field as is. • Click the Save button. 1 2 3 4 5

29. Content Types: Poll – Ex. 03 Create Poll – Test Your Poll • Test your new Poll by taking it: • Select a choice. • Click the Vote button. • A results screen will display with a bar graph. • Now choose one of the other polls in the Poll Content menu and take it (do a couple of them, if available). • You can cancel your vote by pressing the Cancel your vote button and you can retake the poll, but by default, each user can only have one answer logged at a time. 1 2 3

30. File Management: Overview – General • In the IT world, there are different “ends” – we, as users, spend most of our time at what’s known as the “front-end”. We see a screen and interact with it in some way to achieve some type of result. • There is also a “back-end”. This could be compared to what’s under the hood of a car. The “back-end” contains all of the components that are needed to make an IT system work. • Part of the Drupal back-end includes a fairly substantial file directory. • Everything that is uploaded into a Drupal site goes into a file directory. • For sites that become very large, sometimes this can get messy. • It doesn’t have to, though, with a little coordination and forethought from an Administrator.

31. File Management: Overview – IMCE File Browser • The OSU Drupal 6 installation uses the IMCE file browser module. • This contributed module was originally developed to work with the TinyMCE rich-text editor, developed by Moxie Code (which we also use). The IMCE acronym stands for Images for Moxie Code Editor. • This browser was originally built to help users easily embed images into their nodes. Over time it has grown into a full-fledged, multi-feature file browser. • First we’ll talk a bit about some good practices regarding file maintenance, and then we’ll get in and take a look at some of these features.

32. File Management: IMCE File Browser – Basic File System Structure • By default, an OSU Drupal 6 site’s file browser appears the same way the image at left appears. • Everything that is uploaded through the File attachment feature, or the Upload feature for images goes into the <root> folder. • For small sites – this structure works fine. For larger sites, though, a bit more structure is sometimes needed. • A site’s administrator can add folders.

33. File Management: IMCE File Browser – The Value of Structure • Some things to think about… • Structured directories make things easier to find which is helpful in the following cases: • If updates are required. • To remove obsolete material. • To locate files that you want to link to. • Once items are uploaded, if they are linked somewhere and then moved, the link will be broken and must be reset – structure is something that needs to be considered and communicated in advance.

34. File Management: IMCE File Browser – The Value of Structure – File Naming Conventions • File management on a website is extremely important. Drupal can be used to automate much of this, but setting it up and being consistent is something that a user must do. • Naming conventions for files should be established and adhered to for the following reasons: • Files stack in a logical order. • Easy to scan / read. • OSU Drupal 6 includes a small module called Filefield Paths, which will automatically perform the following file cleansing tasks: • Removes all illegal and non-UTF characters. • Forces all characters to lowercase. • Replaces spaces with underscores. Disordered Files Ordered Files

35. File Management: IMCE File Browser – Access via User List • Let’s look at the Discover Drupal 6 directory – which has been slightly modified for this example: • Click into your address bar. • Press your Alt and Enter keys (Option and Return keys for Mac) at the same time to open a new tab with the same URL in your browser. • Type a slash after your site’s root and the word profile then hit Enter. • The User List will appear. • Locate your username in the list and click it. http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6 1 http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6/profile 3 4 5

36. File Management: IMCE File Browser – User Profile Page • From your User profile page: • Click the File browser tab. • The File browser will display. 1 2

37. File Management: IMCE File Browser – Location • You may note that the Discover Drupal 6 browser has many more directories than a new, default site does. • Site administrators are able to create additional directories. Site contributors can then upload their content into specific directories, which helps to keep the back-end organized.

38. File Management: IMCE File Browser – Components – Directories – Expanding/Collapsing • The top level directory that will show in your file browser is the <root> directory. All other directories reside within it. Sometimes, this may be the only directory that shows – this is because the sub-directories are collapsed into it. To open any directory just do the following: • Click on the small plus sign next to the directory you wish to expand. • To re-collapse the directories, just click on the small minus sign next to the directory you wish to collapse. 1 2

39. File Management: IMCE File Browser – Components – Directories – Active • The state of a directory is either active or inactive. When a directory is selected and becomes active, the contents of that directory display in the right window. • Typically, the <root> directory will be the default active directory. • To look at the contents of another directory just click on the directory name. 1 2

40. File Management: IMCE File Browser – Components – Viewer • At the bottom of the file browser is a viewing screen. When an image file is selected, the image will preview in its full size. If the image is large, it will exceed the dimensions of the viewing pane. • If this happens, scroll bars will appear that you can use to pan across the large image.

41. File Management: IMCE File Browser – Ex. 04 Upload File to Directory 2 • To upload a file into a specific directory, do the following: • Click on the directory to upload to – in this case, click the test directory. • Click the Upload link at the top of the browser. • Click the Browse button, navigate to the lab materials folder on your desktop and select the drupal-surf.jpg file. • Click the Upload button. • The file will then upload and display with a blue highlight in the file list. • Note: By default, Drupal will not overwrite files. If a file with the same name already exists, it appends the new file with a sequential number 3 4 1 5

42. File Management: IMCE File Browser – Ex. 05 Resize Image File 1 2 • Images can be resized within the file browser by doing the following: • Click on the Resize link – this will display the Resize tool directly beneath. • Enter a single dimension in pixels – width is to the left, height is to the right. The unfilled field will automatically scale if you click in it. • Check the Create new image box. This is optional, but suggested. • Click the Resize button. • If the Create new image box has been checked, a new image will be created based on the provided dimensions. If the box is not checked, the original image will resize accordingly. 4 3

43. File Management: IMCE File Browser – Ex. 06 Create Image Thumbnail • Thumbnails are preset image dimensions that you can elect to treat your image uploads with. Three presets come, by default, but your administrator can define additional ones, if needed. To create thumbnails, do the following: • Select an image file from the file list. Note: Batch processing can be performed by selecting multiple files. • Click on the Thumbnails link. • Select a Thumbnail size. • Click the Create thumbnails button. • The new thumbnail image will display both in the file list and the viewer. 2 3 1 4 5

44. File Management: IMCE File Browser – Ex. 07 Delete File 2 • To delete files, do the following: • Select the two new files you’ve created (the resizing and the thumbnail). • Click the Delete link. • A deletion confirmation will appear, click OK. • The files will disappear. • Take care when deleting files. If the file happens to be embedded or linked on any node in the site and the link has not been removed or updated, a 404 error/File Not Found error will occur. 1 3 4

45. File Links • Understanding the file browser is important because this is where most of the media you display and distribute is stored. • We learned about the File Attachment feature in the Basics workshop. This feature attaches files to the bottom of your node. But what if you want the embedded file to appear as a link within your content area? • This is where you‘ll set a link from your node to a file within your file browser. • It’s actually quite similar to the links we learned how to set in the Basics workshop, except the link will be to a file instead of to another web page.

46. File Links: Ex. 08 Embed File Link • Let’s add a file link to the Book parent page created earlier: • Find your Book parent page in the Book navigationmenu. • Click the Edit tab. 2 1

47. File Links: Ex. 08 Embed File Link – Select Reference 2 • Within the Bodyarea: • Select the word or phrase you would like to use as your reference. • Click the Insert/Edit Link button in your toolbar. • Click the Browse button which is to the right of the Link URLfield – this will establish a connection to your file browser. 1 3

48. File Links: Ex. 08 Embed File Link – Select File • Once inside the file browser: • Locate the pdfs directory and click on it to make it the active directory – you may need to click on the <root> directory to expand it. • Select the drupal-works.pdf file • Click the Insert File tab – this will close the browser and send the link information to your Insert/edit link dialog box. 3 2 1

49. File Links: Ex. 08 Embed File Link – Insert Link • From within the Insert/edit linkdialog box: • Add some text to the Title field, if desired – this will display as a tool tip when the link is hovered on. • Click the Insertbutton. 1 2

50. File Links: Ex. 08 Embed File Link – Save File • Save if satisfied with the results. • Click on the link to open the file. • To leave the file preview, just click the Back button on your browser.