1. This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 United States LicenseCreative Commons Attribution- NonCommercial-ShareAlike 3.0 United States License Drupal Training Series Discover Drupal 6 Content Types

2. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 2 What We’ll Be Covering… Content Types Book Page – Ex. 01 Create Book Structure  Parent Book Page  Child Book Page  Book Navigation Menu  Auto Navigation  View Printer-Friendly Book Content  Organizing Books Announcement – Ex. 02 Create Announcement Poll – 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 Basic Images Image Best Practices – Ex. 08 Embed an Image – Ex. 09 Style & Position Images Media Manager About OSU Media Manager – Ex. 10 Embed OSU Media Manager Video – Ex. 11 Style Media Manager Embed

3. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 Content Types Materials menu link at left. This will take you to the CWS web training site, WebTrain, 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 5 Content Types: Overview – Default Content Types The OSU Drupal 6 installation, by default, comes with five different content types: Announcement – For content that has a publication start and end date Book Page – For hierarchical content 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

6. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 or Contact Us page, while the Story content type is used for more engaging material.

7. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 8 Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page To create a Parent Book page, do the following: 1.In the Navigation menu, click on Create content > Book page 2. Enter a title in the Title field Note: If you use the same title as shown, enter your initials at the end 3.Leave the Body field blank for the time being 4.Click on the Input format group to open it and select the Full HTML option 5.Click on the Book outline group to open it and select create a new book from the Book drop down box 1 2 Leave blank 3 5 4

9. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 9 Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Paste Word Text Now, open the Ex. 01a lab materials folder on your desktop: 1.Open the ex-01a.doc file and copy it 2.Paste the text into the Body field 1 2

10. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 10 Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Preview & Save Preview the content and Save if satisfied with the results

11. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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: 1.Scroll to the bottom of the Parent page and click on the Add child page link 1

12. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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: 1.Enter a title in the Title field 2.Leave the Body field blank for the time being 3.Click on the Input format group to open it and select the Full HTML option 4.Click on the Book outline group and take a look at it Note: The Book and Parent item fields will be auto-filled 5.Set the Weight field to -15 Note: Using this setting will put this Child Book page the top of the list of Child pages for this Book Leave blank 1 2 3 4 5

13. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 13 Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Paste Word Text From within the lab materials folder on your desktop: 1.Open the ex-01b.doc file and copy all text in the file 2.Paste the text into the Body field 1 2

14. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 14 Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Preview & Save Preview the content and Save if satisfied with the results

15. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 15 Content Types: Book Page – Ex. 01 Create Book Structure – Now You Do It – Add Child Page Look to the left 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 ex-01c.doc Input format option = Full HTML Book outline Weight field = -14 Click the Save button when finished

16. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 Formatting Blocks workshops

17. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 has been turned off for the OSU Grey and OSU Orange themes, but it is utilized by the OSU Confident and the upcoming OSU Authentic themes.

18. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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: 1.Click on the Printer friendly version link 2.Note how every page of the book shows up in the preview To leave the preview, just click your browser’s Back button 1 2

19. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 19 Content Types: Book Page – Books Management – Collection 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 Administer > 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 20 Content Types: Book Page – Books Management – Ordering Once within a book, re-ordering the pages is very simple. Just do the following: 1.Click on the directional “handle” of the page you want to move 2.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 3.Click the Save book pages button 1 2 3

21. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 21 Content Types: Announcement – Overview 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 22 Content Types: Announcement – Ex. 02 Create Announcement – Enter Basic Information To create an Announcement, do the following: 1.In the Navigation menu, click on Create Content > Announcement 2.Enter a title in the Title field 3.Leave the Body field blank for the time being 4. Click on the Input Format group to open it and select the Full HTML option 5.Leave today’s date in the Publication date field and enter tomorrow’s date in the Expiration date field 6.Click on the Publishing options group to open it and uncheck the Promoted to front page option 1 Leave Blank 2 3 5 4 6

23. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 23 Content Types: Announcement – Ex. 02 Create Announcement – Paste Word Text From within the lab materials folder on your desktop: 1.Open the ex-02.doc file and copy all text in the file 2.Paste the text into the Body field 1 2

24. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 24 Content Types: Announcement – Ex. 02 Create Announcement – Preview & Save Preview the content and Save if satisfied with the results

25. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 27 Content Types: Poll – Ex. 03 Create Poll – Enter Basic Information To create a Poll: 1.In the Navigation menu, click on the Create Content > Poll link 2.Enter a question in the Question field 3.Enter at least two choices in the Choice fields – to add additional Choice fields, click the Add another choice button 4.Leave the Poll status option at Active 5.Set the Poll duration field to 1 day 6.Click on the Publishing options group to open it and uncheck the Promoted to front page option 1 2 6 3 5 4

28. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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: 1.Scroll down the page to the Menu settings group and click to open it 2.Enter a title in the Menu link title field 3.In the Parent item drop- down box, select the menu 4.Leave the Weight field as is 5.Click the Save button 5 1 2 3 4

29. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 29 Content Types: Poll – Ex. 03 Create Poll – Test Your Poll Test your new Poll by taking it: 1.Select a choice 2.Click the Vote button 3.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) 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 sites/default/files folder. User profile pictures go into the pictures 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 A good, general rule of thumb All small case No spaces (use hyphens or underscores) Disordered Files Ordered Files

35. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 35 File Management: IMCE File Browser – Location Let’s look at the Discover Drupal 6 directory – which has been slightly modified for this example: 1.In the Navigation menu click on the My account link 2.Click on the File browser tab to open the browser 3.Note that three additional directories have been added –content-images –pdfs –test Contributors can upload into specific directories to help keep the back- end organized 1 2 3

36. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 36 File Management: IMCE File Browser – Components – Directories – Expanding/Collapsing The top level directory that will show in your file browser is sites/default/files. 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: 1.Click on the small plus sign next to the directory you wish to expand 2.To re-collapse the directories, just click on the small minus sign next to the directory you wish to collapse 1 2

37. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 37 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. 1.Typically, the sites/default/files directory will be the default active directory 2.To look at the contents of another directory just click on the directory name 1 2

38. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 38 File Management: IMCE File Browser – Components – Viewer At the bottom right side of the file browser is a viewing screen. When an image files 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, you can either use the scroll bars to pan across the large image, or you can right click on the image and select to view just the image from the pop up menu.

39. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 39 File Management: IMCE File Browser – Components – Uploader Files can be uploaded directly into the file browser by doing the following: 1.Click on the Upload link at the top left of the browser 2.The Upload tool will then expand open. 1 2

40. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 40 File Management: IMCE File Browser – Ex. 04 Upload File to Directory To upload a file into a specific directory, do the following: 1.Click on the directory to upload to – in this case, click the test directory 2.Click the Upload link at the top of the browser 3.Click the Browse button, navigate to the lab materials folder on your desktop and select the drupal-surf.jpg file from …lab/ex-04 folder 4.Click the Upload button 5.The file will then upload and display with a yellow 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 1 23 4 5

41. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 41 File Management: IMCE File Browser – Ex. 05 Resize Image File Images can be resized within the file browser by doing the following: 1.Click on the Resize link – this will display the Resize tool directly beneath 2.Enter a single dimension in pixels – width is to the left, height is to the right. The unfilled field will automatically scale. 3.Check the Create new image box This is optional, but suggested 4.Click the Resize button 5.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. 1 2 3 4 5

42. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 42 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: 1.Click on the Thumbnails link 2.Select a Thumbnail size 3.Select an image file from the file list Note: Batch processing can be performed by selecting multiple files 4.Click the Create thumbnails button 5.The new thumbnail image will display both in the file list and the viewer 1 2 3 4 5

43. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 43 File Management: IMCE File Browser – Ex. 07 Delete File To delete files, do the following: 1.Select the two new files you’ve created (the resizing and the thumbnail) 2.Click the Delete link 3.A deletion confirmation will appear in the log at the lower left side of the browser 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 2 3

44. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 44 Images: Overview Finally! The point you’ve probably wanted to be at from the beginning… There are some things to consider before we press on, though. 1.If you are unfamiliar with the area of digital imagery, it’s strongly suggested that, at some point, you at least study the CWS presentation material Web Publishing: Picture This, located at: http://oregonstate.edu/cws/webtrain/picture-this 2.University Advancement has an identity standard that must be maintained regarding the appearance of some elements of all college and department websites. You can find more information on this at : http://oregonstate.edu/ua/brand/web-standards

45. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 45 Images: Ex. 08 Embed Image – Create Story Content Type Let’s use a Story content type for this exercise: 1.In the Navigation menu, click on Create Content > Story 2.Enter a title in the Title field 3.Click on the Menu settings group to open it 4.Enter a title in the Menu link title field 5.In the Parent item drop-down box select the Story Content menu 6.Leave the Weight field at 0 7.Leave the Body field blank for the time being 8.Click on the Input format group to open it and select the Full HTML option 9.Click on the Publishing options group to open it and check the Published option 1 Leave Blank 7 8 9 2 3 4 5 6

46. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 46 Images: Ex. 08 Embed Image – Paste Word Text From within the lab materials folder on your desktop: 1.Open the ex-08.doc file and copy all text in the file 2.Paste the text into the Body field 1 2

47. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 47 Images: Ex. 08 Embed an Image – Preview & Save Preview the content to ensure the paste was successful. Click the Save button if satisfied with the results.

48. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 48 Images: Ex. 08 Embed Image – Open Insert/Edit Image Tool To open the Insert / Edit image tool: 1.Click on the Edit tab to open the node in Edit mode 2.Click in the editor field at the beginning of the first paragraph to set the cursor 3.Click the Insert/Edit image tool button to open the Insert/Edit image dialog box 4.In the Insert/Edit image dialog box, click the Browse tool button at the right of the Image URL field Note: This will take you into your site’s File Browser 3 Place cursor here 1 2 4

49. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 49 Next, browse for the image: 1.Click on the content-images folder to open it 2.Click the Upload link at the top of the File Browser window 3.Click the Browse button, navigate to your ex-08 lab materials and select the drupal-surf.jpg file 4.Click the Upload button in the File Browser 5.The uploaded image will show in the File Browser 6.Click on the Send to tinymce link at the top of the File Browser window Images: Ex. 08 Embed Image – Upload Image to File Browser 3 4 1 2 5 6

50. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 50 Images: Ex. 08 Embed Image – Enter Image General Information In the Insert / Edit image dialog box General tab: 1.The Image URL field in the Insert/Edit Image dialog box will automatically fill with the correct URL 2.Enter a description in the Image Description field This information is needed by equipment for the vision impaired 3.Fill in the Title field This information is optional but suggested as part of search engine optimization 1 2 3

51. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 51 Images: Ex. 08 Embed Image – Enter Image Appearance Information Now, set the appearance: 1.Click the Appearance tab 2.In the Alignment drop-down box, select Left 3.In the first Dimensions field, enter 400 (units are pixels) Note how the other field scales according to the first 4.In the Vertical space field enter 4 (units are pixels) 5.In the Horizontal space field enter 4 (units are pixels) 6.Click the Insert button 3 2 1 4 5 6

52. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 52 Images: Ex. 08 Embed an Image – Resize Image on Screen The image can be resized right from the screen, if desired: 1.Click on the image to select it. Square “handles” should appear. 2.Click and hold the mouse button down on a corner of the image and drag the corner diagonally to resize the image. 1 2

53. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 53 Images: Ex. 08 Embed Image – Preview & Save Preview the content to view the final layout. When working with images and other embedded objects, you will become increasingly aware of the variation between the text editor and the Preview screen. You will want to use Preview regularly to check your layout prior to saving.

54. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 54 Images: Ex. 09 Image Positioning and Styling – Insert/Edit Image Dialog Box – Adjust Image Margin In our Preview screen, it can be seen that the header text “peeks” over the top line of the image. This is due to the margin settings we previously entered. Let’s use a negative margin to push the image slightly up over the header text line: 1.Click on the image 2.Click the Insert/edit image button 3.In the Insert/edit image dialog box, click on the Appearance tab 4.In the Vertical space field enter -5 5.Click the Update button Click the Preview button when finished. The resulting preview should show a header that is flush with the image top 1 2 3 4 5

55. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 55 Images: Ex. 09 Image Positioning and Styling – Insert/Edit Image Dialog Box – Add Border Borders can be tricky things. Some themes will actually override border property settings, disallowing the user to create or remove borders. The OSU Grey theme we’re using allows us to make border changes. To add a border to an image, do the following: 1.Click on the image 2.Click the Insert/edit image tool button 3.In the Insert/edit image dialog box click the Appearance tab 4.In the Border field, enter 1 5.Click the Update button Preview your node. You should see a “snapshot” type of border that has white space between the border and the image. 1 2 3 4 5

56. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 56 Images: Ex. 09 Image Positioning and Styling – Reposition Image If you decide you would like to move your image from one point to another, it’s simple, just do the following: 1.Click on the image 2.Drag it to the new, desired insertion point and drop it there. It can be difficult to see, but there will be a cursor and small rectangle visible 3.After dragging the image, you will most likely see what appears to be a broken link message. This is normal. Preview your node and you’ll see that everything adjusts appropriately. 1 2 3

57. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 57 Images: Ex. 09 Image Positioning and Styling – Edit CSS Style Tool – Style Text The Edit CSS Style tool can also be used to change style properties. Let’s use this to change some of the text: 1.Select just the header 2.Click the Edit CSS Style button 3.In the Edit CSS Style dialog box Weight field, select bolder 4.Click the Update button Take a few minutes and experiment with some other text style changes on other paragraphs. When you’re finished, click the Preview button. 1 2 3 4

58. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 58 Images: Ex. 09 Image Positioning and Styling – Edit CSS Style Tool – Style Image Background The Edit CSS Style tool can be used for images as well. Let’s fill the white space of our “snapshot” style border with a color: 1.Click on the image 2.Click the Edit CSS Style tool button 3.In the Edit CSS Style dialog box, click on the Background tab 4.Select a color from the Background color field The color #C6C0B7 is used in the example 5.Click the Update button When finished, Preview your node. If you’re satisfied, Save it. 1 2 3 4 5

59. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 59 Images: Ex. 09 Image Positioning and Styling – Completed The completed and saved node should now appear a little more interesting. Let’s add some more to it.

60. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 60 OSU Media Manager: Overview – General As mentioned before, OSU Drupal 6 has been customized to work within the OSU information technology architecture. Where possible, CWS actively attempts to integrate existing OSU technologies into Drupal. OSU Media Manager is an example of this. With OSU Media Manager, any user with a valid ONID account can upload, convert, manage, and distribute video content which can be viewed both by ONID users and the general public. These videos can then be easily, and quickly, embedded on a Drupal page. To learn more about OSU Media Manager and how to get started with it, view the on-line user manual, maintained by OSU’s Digital Media Services, at : http://oregonstate.edu/is/mediaservices/dmp/media-manager-manual

61. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 61 OSU Media Manager: Overview – Requirements for Drupal Use There are some requirements that must be met to be able to use the OSU Media Manager embed. The user who is attempting to create the embedded player must be part of the corresponding OSU Media Manager group as well as a registered user on the Drupal site. To learn more about how to create or become part of an OSU Media Manager group, please see the on-line OSU Media Manager Manual located at: http://oregonstate.edu/is/mediaservices/dmp/media-manager-manual

62. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 62 OSU Media Manager: Ex. 10 Embed OSU Media Manager Video Open up the Story node we’ve been working on to edit it: 1.Enter down a few spaces from the last paragraph and paste the text from ex-10.doc into the editor 2.Position your cursor at the header of the newly pasted text 3.Click the Insert/edit embedded media tool button 4.In the Insert/edit embedded media dialog box, click the filmstrip icon next to the File / URL field – this will create a connection to OSU Media Manager Enter down a few times to place the cursor 2 3 4 1

63. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 63 1 2 OSU Media Manager: Ex. 10 Embed OSU Media Manager Video – Selecting a Video When the OSU Media Manager browser opens, do the following: 1.Select Drupal 6 from the drop- down box at top 2.Click on the What Is Drupal in 57 Seconds video to select it – this will close the browser and auto-fill the File / URL field in the Insert / edit embedded media dialog box 3.Check the Constrain proportions check box and resize the player 4.In the Dimensions field enter 500 in the left field 5.Click the Insert button 3 4 5

64. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 64 OSU Media Manager: Ex. 10 Embed OSU Media Manager Video – Completed Embed The resulting embed job doesn’t look like much in the WYSIWIG editor – this is normal.

65. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 65 OSU Media Manager: Ex. 10 Embed OSU Media Manager Video – Preview Preview the content to view the actual player. Let’s reposition this and dress it up a little bit.

66. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 66 OSU Media Manager: Ex. 11 Style OSU Media Manager Player – Apply Right Float To float the player to the right of the text, do the following: 1.Click on the player 2.Click the Edit CSS Style tool button 3.In the Edit CSS Style dialog box, click on the Box tab 4.In the Float field, select right 5.Click the Update button 1 2 3 4 5

67. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 67 OSU Media Manager: Ex. 11 Style OSU Media Manager Player – Preview On preview, the image now floats to the right and the text wraps up around it. There’s more than can be done to clean this up, though. For example, the header for the new text is a bit cramped. Take a few minutes to explore some different style and positioning settings. When finished, click the Save button.

68. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 68 OSU Media Manager: Ex. 11 Style OSU Media Manager Player – Completed When everything is said and done, take your player for a test drive by clicking on the Play button in the center of the screen.

69. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 69 Summary Today it became a little bit clearer regarding how rich Drupal is in regards to variety. Not only does it allow you to easily embed and adjust various media types, but it also provides you with a way of organizing the different types of content your site is capable of presenting – while offering quite a few different ways of altering and displaying it in ways that suit your needs. This is really just the beginning though…Drupal provides the ability to actually build sophisticated, well-structured websites versus just simple webpages. There are several workshops available at both the Intermediate and Advanced level, where you will actually be the owner of your own training site whereupon a functioning website will be built.

70. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 70 Conclusion This completes the OSU Drupal 6 Content Types tutorial. For additional tutorials, please visit CWS Training at: http://oregonstate.edu/cws/training To view and register for all OSU Drupal 6 Workshops, visit the Professional Development Central Registration site at: http://oregonstate.edu/cws/register To submit a Help Ticket or make a Site Request on-line, go to: http://oregonstate.edu/cws/contact