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 Foundations for OSU Drupal 6 Formatting Blocks

2. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 2 What We’ll Be Covering… Blocks What Blocks Are & How They Work Understanding Regions – Ex. 01 A Theme Enabling Refresher Configuring & Enabling Default Blocks – Ex. 02 Configure Block Title Visibility – Ex. 03 Add Glossary: Random Block – Ex. 04 Configure Page Visibility Menus What Menus Are & How They Work – Ex. 05 Organize Menu Items – Ex. 06 Create Custom Menu Block Nice Menus What Nice Menus Is and How It Works – Ex. 07 Create Nice Menus Blocks – Ex. 08 Configure Nice Menus for Navigation Menu – Nice Menu 2 Lab Optimized Menus – Ex. 09 Combine Menu Features Beyond Menus Default Add-On Blocks – Ex. 10 Add Announcement: Small List Block – Ex. 11 Add Most Recent Poll Poll Block – Ex. 12 Add Feed Aggregator Block Custom Add-On Blocks – Ex. 13 Create Custom Contact Info Block – Ex. 14 Create OSU Events List Block – OSU Mini-Calendar Lab Summary

3. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 3 Getting Started As a reminder, to get to your personal development site go to: http://drupaldev.cws.oregonstate.edu/training/ /login From there, log in with your ONID information. After logging in, please open a second tab in your browser and go to CWS Training at http://oregonstate.edu/cws/training Locate the name of this workshop in the list and click it. This will take you to a page describing the course with download links at the bottom of the page. Download the lab materials to your desktop and unzip them.

4. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 4 Getting Started: Assignment Your personal training site should have both the OSU Grey and OSU Orange themes enabled. The OSU Grey theme should be the default theme in use – at least for the duration of this workshop.

5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 5 Getting Started: Ex. 01 A Theme Enabling Refresher Blocks and Themes interact closely with each other, so let’s refresh our memories on how to enable a theme… Go to Administer > Site building > Themes and enable OSU Drupal Lite and OSU Linen. Just enable them. Don’t choose them as the default. Remember to click the Save Configuration button afterwards.

6. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 6 Getting Started: Layout Overview “Old-fashioned” layout, in terms of print media, regards the final arrangement of information to be displayed to a viewer. It’s how a printed page looks – where images are, where text columns exist, etc. Web page design, naturally, adopted this term as well. One of the best features of Drupal is its layout versatility. The appearance can be changed very quickly – as we discovered in the Drupal 6 Exploring OSU Themes workshop. This isn’t the only way to change the appearance though, or the functionality. Blocks provide the easiest and most robust way of adding and moving things around on your site: from menus, to images, to add-ons such as poll results or OSU Event Calendar information. First we should get a grasp on just what a Block is…

7. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 7 Blocks: Overview What Blocks are: Movable groups of content on a web page – Ex: A menu block, a “widget”, a hyperlinked list of content – Note: A Menu will always reside within a Block, but a Block does not have to contain only Menus How Blocks are created: Some are created automatically by modules Others may be created manually Why Blocks are used: To establish the layout of a page – Help provide a measure of consistency across a web site – Provide additional functionality – Provide structure and readability to content To “restrict” content access to particular roles

8. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 8 Blocks: Overview – Layout Regions Regions are areas on your theme where you can place Blocks. These areas are defined in the theme programming. Content Left SidebarRight Sidebar Pre-Content Content Post-Content Footer Top Horizontal Bar Content Left SidebarRight Sidebar Pre-Content Content Post-Content Footer Top Horizontal Bar Menu Block Different themes may or may not contain different regional areas, as well as different quantities of regions. It all depends on the design.

9. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 9 Blocks: Overview – Control Panel Let’s explore the Blocks screen: 1.Click on Administer > Site building > Blocks 2.Yellow bar areas are the available Regions – these are places where Blocks can be placed –These Regions correspond to the table rows and Region column at the center of your screen – this is how things are laid out on a Drupal page –Different Themes can possess different Regions 3.At the top of the screen, is a list of the different enabled themes on the site –Click on the OSU Lite theme to see what happens 1 2 Enabled Themes 3

10. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 10 Blocks: Overview – Layout Region Variation OSU Grey OSU Color Scheme 7 Regions Fixed sidebar width OSU Lite Blue, white & orange color scheme 4 Regions Fixed sidebar width Administrators can change themes quite easily. When this happens, Blocks may have to be repositioned for the new theme. Note the lack of a Book navigation block on OSU Lite Now switch back to OSU Grey…

11. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 11 Blocks: Basic Configuration & Enabling The settings for any other block used on one theme generally will not automatically transfer over if a theme is switched. These blocks must be configured and enabled respective to each theme they are used with. The terms configure and enable are common in IT practices – what do these terms mean though? Configure: to set something up so it functions in a desired way. Different configurations can be applied to blocks to force them to perform in different ways. Enable: in Drupal terms, to “turn something on” or make it capable of working. For blocks to appear on your screen they must be enabled. In the following exercises, we’ll configure and enable some different default blocks to see the various ways we can get them to behave.

12. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 12 Blocks: Basic Configuration & Enabling – Ex. 02 Configure Block Title Visibility A title display is a basic configurable option that all blocks possess. A block title can be configured to show the block name, a different name, or no name at all. To configure a block title so it shows no name, do the following: 1.Locate the Primary Links block and click the configure link 2.Type in the Block title field 3.Click the Save block button 1 2 3

13. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 13 Blocks: Basic Configuration & Enabling – Ex. 02 Configure Block Title Visibility – Result The completed configuration displays a Primary Links block that has no title. Optionally, a different name could be applied to the block, if desired. Before After

14. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 14 Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block Let’s add a feature to our site that makes use of some work we’ve already done – we’ll add a Today’s Featured Method block that makes use of Glossary and one of its blocks: 1.From within the Blocks main screen at Administer > Site building > Blocks, scroll down to the Disabled group and locate the Glossary: Random block 2.It’s best to make configurations first, so click on the Glossary: Random blocks configure link to open the configuration screen. 1 2

15. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 15 From within the block configuration panel, make the following configurations: 1.In the Block title field, add the text Today’s Featured Method 2.In the Choose from group, select the Cooking Methods option. 3.In the Update every fields, type 1 in the first field and select days from the drop down menu 4.Leave the Show term as link box checked 5.Click the Save block button After saving the block, you will be redirected back to the main Blocks panel Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Configure 1 2 3 4 5

16. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 16 Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Enable Now that we’ve configured the Glossary: Random block, it will need to be enabled to be visible: 1.Locate the Glossary: Random block in the Disabled group 2.Select the post-content option from the drop-down menu Note: This will immediately move the block up to the area specified within the enabled group 3.Click the Save blocks button 1 2 Block moves to designated location when enabled 3

17. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 17 Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Completed View the new addition to the layout by scrolling down the screen.

18. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 18 Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Check Home Page Now go to the Home page to see how this interacts with the layout of existing content. A few benefits are realized here now: 1.The front page has additional content added to it – making it more interesting and fleshed out 2.The content that has been added is actually “reused” from another source 3.The content automatically changes as specified This is quite a list of benefits provided for the time it took to configure and enable one block.

19. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 19 Blocks: Page Visibility You may have noticed that our newly configured Featured Method block currently shows up on every page of the site. For some things, such as contact information in a footer, inclusion on every page is a good idea. Other things, such as our Featured Method block, may lose impact, not be relevant on some pages, or even get annoying if seen on every single page of a site – especially if the site grows very large. Fortunately, with every block used in Drupal, the Page Visibility can be set in the block configuration. This means, simply, that you can tell your block to appear on the pages that you want it to appear on and “hide” at other times. Let’s find out how to do this…

20. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 20 Blocks: Page Visibility – Ex. 04 Configure Page Visibility We’ll configure our Featured Method block to show only on the Home page – to do this, return to the configuration screen for the Glossary: Random block by clicking its configure link: 1.Scroll down the screen to the Page specific visibility settings group and select the Show on only the listed pages option 2.In the Pages field, enter the term 3.Click the Save blocks button 1 2 3

21. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 21 Blocks: Page Visibility – Ex. 04 Configure Page Visibility – Completed As a result, only the front page shows our Today’s Featured Methods block, while all others do not show it

22. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 22 Blocks: Summary As can be seen up to this point, Blocks play a very large role in Drupal. It’s really where most of the versatility comes from. Blocks interact with many other features on a Drupal site: Content Themes Modules Views Blocks do so much, that sometimes it’s easy to forget the main reason for having them in the first place…Menus. Menus, the automated ones that we can move around easily on a Drupal site, must all reside in blocks.

23. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 23 Menus: Overview What Menus are: An organized list of features or content Often contains sub-items How Menus are created: Standard menus automatically created during Drupal installation – Navigation menu – Primary Links menu – Secondary Links menu Custom menus can be created manually by all contributors on an OSU Drupal 6 site Why Menus are used: To provide organization and clear direction – Users want to “get there” in four clicks or less – A plain website with a great menu system will beat out a beautiful website with a poorly designed menu system anytime

24. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 24 Menus: Control Panel The Menus control panel is where a list of all available menus on the site exists. This is where to go to quickly order groups of menu links and add new menus. To view the Menus control panel: 1.In the Navigation menu, click on Administer > Site building > Menus 2.The List menus panel provides a list of all available menus on the site Note that there is no menu called “Books” – Book content actually has its own special area independent from Menus 3.Click on the Navigation link 1 2 3

25. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 25 Menus: Control Panel – Ex. 05 Organize Menus Items Menu items can be manually grabbed and dragged to put them in the order you want them in 1.Click on the cross icon next to a menu item and hold it 2.Drag the item to a new position up or down the list – you can even make it a child by indenting it beneath another item 3.Click the Save configuration button when you are done ordering things Now return your items back to their original order (remember to click the Save configuration button when finished) Grab with mouse… …drag to desired location 1 2 3

26. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 26 Menus: Custom Menu Blocks Adding items to menus in OSU Drupal 6 is very easy – it can be done right through the content form. Most of the time the user doesn’t even have to go into the Menus feature. At some point there may be a need to create a custom menu, though. This could be for a few different reasons: More refined content organization To highlight a specific set of links To configure a menu block to show only under a certain set of conditions As mentioned previously, Menus, in Drupal, are always contained within a Block. In fact, the Menus feature will actually create a block for you. In the following exercise, we’ll create a custom menu block that contains links to external websites that relate well to our Food For Thought web site.

27. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 27 Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block To create a custom menu block: 1.From within the Menus feature main screen at Administer > Site building > Menus, click on the Add menu tab 2.In the Menu name field, enter the name of-interest This name must contain ONLY lowercase letters, numbers, and hyphens. It must also be a unique name 3.In the Title field, enter the title Of Interest The title can be mixed case and contain spaces 4.In the Description field, provide some descriptive text regarding what this menu block is for 5.Click the Save button 1 2 3 4 5

28. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 28 Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Of Interest Menu Block Created After the Of Interest menu is created, you will be redirected to the Of Interest menu screen, which currently contains no items 1.Note the addition of the Of Interest menu link in the Navigation menu To see all menus, click on the Menus item in the Navigation menu 2.Now we need to add a Menu item 1

29. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 29 Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Add Menu Item To add a menu item, click on the Add Item tab at the top of the screen and complete the following information: 1. Path field = http://www.mypyramid.govhttp://www.mypyramid.gov 2. Menu link title field = MyPyramid.gov 3. Description field = Link to the USDA’s food group guidelines. 4. Weight field = -50 Note that while this new menu appears in the menu list, no block named Of Interest appears on the screen We still have to go in to Blocks to configure and enable the menu block and we also need to add some content to make this menu visible.

30. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 30 Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Enable Of Interest Menu Block To enable the Of Interest block go to Administer > Site building > Blocks: 1.Once on the Blocks panel, scroll down the page to the Disabled group and locate the Of Interest block 2.Select the right sidebar option from the Region drop down menu 3.Grab the small cross on the Of Interest item and position it under the Navigation block 4.Click the Save blocks button 1 2 3 4

31. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 31 Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Completed The Of Interest block will appear beneath the Navigation block

32. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 32 Menus: Custom Menu Blocks – Now You Do It – Add Item To Of Interest Menu Block Go to Administer > Menus > Of Interest > Add Item tab and add another link to the Of Interest block Path field = copy & paste link from lab materials ex-06.doc Menu link title field = Calorie Finder Description field = copy & paste description from lab materials ex-06.doc Enabled option= Leave as is Expanded option = Leave as is Parent item field = Leave as is Weight field = -49 Click the Save button

33. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 33 Nice Menus: Overview The default menu effect in OSU Drupal 6 is an expanding menu. Some users prefer what is commonly referred to as “fly-out” or “drop-down” menus (for top menu navigation). The “fly-out” menu style is now available in OSU Drupal 6 as a configurable option for users. This effect is created through the use of a contributed module called Nice Menus. Expanding Menu Style Fly-Out Menu Style

34. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 34 Nice Menus: Ex. 07 Create Extra Nice Menus Blocks By default, there are two Nice Menus blocks that already exist – if you want all menus on your site to fly out, and more than two menus are used on the site, more Nice Menus blocks must be generated. To do this: 1.In the Navigation menu go to Administer > Site configuration > Nice Menus 2.In the text field, enter the number 5 3.Leave Enable IE Support checked 4.Click the Save configuration button 1 2 3 4

35. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 35 Nice Menus: Ex. 08 Nice Menus For Navigation Menu Let’s make the Navigation menu a fly-out style. From the Blocks main panel at Administer > Site Building > Blocks: 1.Scroll down into the Disabled group and locate the Nice Menu 1 block 2.Click on the corresponding configure link 1 2

36. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 36 Nice Menus: Ex. 08 Nice Menus For Navigation Menu – Configure Nice Menus 1 Block Within the Nice Menu 1 block configuration screen: 1.Leave the Block title field as is 2.Leave the Menu Name field as is 3.From the Source Menu Tree field, select 4.Leave the Menu Style set at right 5.Click the Save block button 1 2 3 4 5

37. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 37 Nice Menus: Ex. 08 Nice Menus For Navigation Menu – Enable Nice Menus 1 Block After redirection back to the Blocks list: 1.Locate Nice Menu 1 in the Disabled list 2.Select left sidebar in the corresponding drop- down menu 3.In the Navigation block Region field select 4.Click the Save blocks button 2 1 3 4

38. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 38 Nice Menus: Now You Do It – Nice Menus For Primary Links Configure and enable the Nice Menu 2 block for Primary Links Configure Go to = Administer > Site building > Blocks > Nice Menu 2 > configure link Block title field = Leave as is Menu name field = Leave as is Source Menu tree field = Menu Style field = down Click Save block button Enable (after configuration) Nice Menu 2 block region = top horizontal bar Primary Links block region = Click Save blocks button

39. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 39 Optimized Menus Space is a valuable asset for a web page. The space “above the fold” – which is the area above the bottom of your screen – is considered prime real estate. This is why it’s a good idea to make the best use of that space as possible. Our Book navigation block is a great tool – but we don’t always need it to be there. Remember, this little collection is really more of an appendix to what will be the Recipes section of our site. There is a way to get the Book navigation block to show up only when we need it to by combining the Page Visibility setting that we’ve worked with, along with the Primary Links menu that we’ve put at the top of our site. Let’s find out how to do this.

40. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 40 Optimized Menus: Ex. 09 Combine Menu Features – Add Book Page Parent to Primary Links First, we have to add the top page of our Cooking Companion book to our Primary Links menu: 1.Click on the Cooking Companion link in the Book Navigation block and open it in Edit mode 2.Open the Menu settings group and enter the following: Menu link title field: Cooking Companion Parent item field: Weight field: -49 3.Click the Save button 4.A new link appears in Primary links 1 2 3 4

41. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 41 Optimized Menus: Ex. 09 Combine Menu Features – Configure Book Navigation Block Now, go to Administer > Site building > Blocks to configure the Book navigation block: 1.Locate the Book navigation block in the right sidebar group and click on its configure link 2.In the Block title field, enter the title Cooking Companion 3.In the Book navigation block display group, select Show block only on book pages 4.Click the Save block button 1 2 3

42. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 42 Optimized Menus: Ex. 09 Combine Menu Features – Completed Click on the Home link to view the Home page… …and then compare it to the Cooking Companion page

43. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 43 Beyond Menus As can be witnessed, Blocks can do quite a bit in terms of how the various menus on a site can be laid out. But, Blocks extends beyond navigational items as well. Many different modules that are installed on Drupal sites automatically generate blocks that can be used to increase the appearance, functionality, or entertainment value of a site. The following exercises are going to focus on increased functionality by looking at some default blocks that are included on your OSU Drupal 6 site: Announcement blocks Poll Results block Feed Aggregator blocks Note: These are not the only blocks available – there are many more you can experiment with.

44. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 44 Beyond Menus: Announcement Blocks In the OSU Drupal 6 Content Types workshop we worked with the Announcement content type. The content that was entered into this form would then automatically show and hide itself in a block based upon a Publication and Expiration date entered. So we know how to make the Announcement content – let’s close the circle by learning how to work with the blocks that correspond with this content type. There exist two different Announcement blocks in OSU Drupal 6: Announcements: Small List Provides Announcement title, publication date, and View All link in block Announcements: Summaries Provides Announcement title, teaser content, Read More link, publication date and expiration date

45. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 45 Beyond Menus: Announcement Blocks – Ex. 10 Add Announcements: Small List Block – Enable To enable the Announcement block, go to Administer > Site building > Blocks and do the following: 1.On the Blocks main page, locate the Announcements: Small List block in the Disabled list and select left sidebar from it’s corresponding drop down menu 2.Position the Announcements: Small List beneath the Nice Menu 1 block 3.Click the Save blocks button 3 1 2

46. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 46 Beyond Menus: Announcement Blocks – Ex. 10 Add Announcements: Small List Block – Completed Two things are important to note here: First – the Announcement: Small List block was purposely placed beneath the Navigation menu and above the Of Interest menu. This is to assist people who work on the site. The Navigation menu will not appear for Anonymous users, but Announcement lists can grow long and get in the way for site contributors. Second - the Announcement: Small List block is now enabled, but there currently is no content.

47. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 47 Beyond Menus: Announcement Blocks – Now You Do It – Announcement Content Lab Create an Announcement to populate the Announcements: Small List block Title field = BBQ Recipe Contest Body field = use lab materials: ex-10.doc Input Format option = Full HTML Publication Date field = Today’s date Expiration Date field = Three months from now Preview and Save Note how the Announcements: Small List menu block now appears in the left sidebar region

48. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 48 Beyond Menus: Announcement Blocks – Now You Do It – Announcement: Summaries Block Lab Now return to Administer > Site building > Blocks and enable the Announcements: Summaries block to see what it looks like. When you’re done, decide which one you like best and disable the one you don’t want.

49. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 49 Beyond Menus: Most Recent Poll Block In the Drupal 6 Content Types workshop, we explored how to create the Poll content type. Poll functionality can be increased by using the Most Recent Poll block, which will provide your site’s guests and contributors with the ability to interact with your site. The most recent poll available will automatically show up in a block on your user’s screen. When the user submits a response to the poll, he or she will then see the current results of the poll. As new polls are added to a site, the most recent will show. A link is provided at the bottom of the block to lead users to older polls they may not have taken. Let’s take a look at how this works…

50. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 50 Beyond Menus: Most Recent Poll Block – Ex. 11 Add Most Recent Poll Block – Enable To activate the Most Recent Poll block go to Administer > Site building > Blocks and do the following: 1.Locate the Most recent poll block in the Disabled list and select right sidebar in the corresponding drop down menu 2.Position the Most recent poll block below the Book navigation block 3.Click the Save blocks button The block will not show because we don’t have a poll going yet, so let’s make one… 1 2 3

51. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 51 Beyond Menus: Most Recent Poll Block – Now You Do It – Create Poll Content Create a Poll with the following information Question field = What recipes are you most interested in? Choices fields = Appetizers Soups Salads Breads Entrees Desserts Leave all other settings as they are and click the Save button Answer the poll and see what happens to the block

52. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 52 Beyond Menus: Feed Aggregator Blocks The name sounds a little intimidating, but its just the tool that allows your site to pull in news feeds from other sources and display them. The Feed Aggregator, and the blocks it creates, are excellent tools for sites that need to supply the most recent news to its audience. There is a little bit of a process, though, because we have to go out and grab a feed from somewhere. We also have to configure the Feed Aggregator. Since this is a site about food and we will include some food safety items on here, let’s visit the USDA’s Food Safety and Inspection Service website to get a feed from them and then we’ll set up our Feed Aggregator.

53. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 53 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Locate News Feed To gather a feed: 1.Open a new tab in your browser and go to the following URL: http://www.fsis.usda.gov/ http://www.fsis.usda.gov/ 2.From here look to the right sidebar and click on the Subscribe to RSS Feeds menu link 3.This will take you to a page with different news feed options. Click on the Open Recalls RSS option. 1 2 3

54. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 54 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Gather News Feed To gather the feed: 1.A page will open with a list of topics – this is the feed information that we will be pulling into our site 2.Copy the URL Copy this URL 1 2

55. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 55 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Create Category To create a news feed category, go to Administer > Content management > Feed aggregator > Add category tab: 1.In the Title field, enter the title Food Recalls 2.In the Description field, enter the text “Aggregated food recall information” 3.Click the Save button 1 2 3

56. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 56 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Add Feed To add the news feed to the aggregator: 1.While in the Feed aggregator, click on the Add feed tab 2.In the Title field enter the title FSIS Open Recall Cases 3.In the URL field, paste the URL copied from FSIS into the field 4.For the Update Interval, select 1 day 5.In the Categorize news items group, click the Food Recalls option 6.Click the Save button 1 2 3 4 5 6

57. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 57 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Configure Aggregator To configure the Feed Aggregator do the following: 1.From within the Feed Aggregator click on the Settings tab 2.Leave the Allowed HTML tags as they are 3.In the Items shown in sources field select 3 items 4.In the Discard items older than field leave it at 16 weeks 5.In the Category selection type, leave it at checkboxes 6.Click the Save configuration button 1 2 3 4 5 6

58. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 58 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Update Feed Items To get the Feed Aggregator started, click on the : 1.While in the Feed Aggregator click on the List tab 2.Go down to the Feed overview section, in the FSIS Open Recall Cases row, and click the update items link This will refresh your Drupal site and activate this particular news feed. 1 2

59. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 59 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Configure Block To configure the Food Recalls category latest items block, go to Administer > Site building > Blocks and do the following: 1.Locate the Food Recalls category latest items block in the Disabled list and click on the corresponding configure link 2.Leave the Number of news items in blocks field set at 3 3.Click the Save block button 1 2 3

60. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 60 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Enable Block To enable the Food Recalls category latest items block, go to Administer > Site building > Blocks and do the following: 1.Locate the Food Recalls category latest items block in the Disabled list 2.Select right sidebar from it’s corresponding drop down menu 3.Position the block below the Book navigation block 4.Click the Save blocks button 1 2 3 3

61. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 61 Beyond Menus: Feed Aggregator Blocks – Ex. 12 Add Feed Aggregator Block – Completed The result is an auto-refreshing list of categorized news items that appear on your site. One thing to keep in mind – if the site that is supplying the feed has no news releases for a long duration, your aggregated items will slowly fall off the list and will not be replaced until new items are released at the source site.

62. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 62 Beyond Menus: Custom Add-On Blocks Similar to custom menus, custom add-on blocks can be created as well. These blocks can contain anything from images, to hyperlink lists, to code snippets that allow integration of existing technologies with Drupal. Just about anything that you put into a typical content type can be put into a block – just remember that you may have a smaller area to work with. We’ll begin by creating a very simple Contact block that contains some contact information about the Food for Thought site and then we’ll move into some integration with the OSU Events Calendar.

63. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 63 Beyond Menus: Custom Add-On Blocks – Ex. 13 Custom Contact Info Block – Create & Configure To create a custom Contact Information block, do the following from within Administer > Site building > Blocks: 1.Click on the Add block tab at the top of the Blocks page 2.In the Block description field, enter the text Contact Info 3.In the Block title field, enter Contact Us! 4.In the Block body paste the HTML code from the ex-13.txt file in your lab materials using the Edit HTML Source button 5.Set the Input format to Full HTML 6.Click the Save block button 1 2 3 4 5 3

64. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 64 Beyond Menus: Custom Add-On Blocks – Ex. 13 Custom Contact Info Block – Enable To enable the custom Contact Info block do the following: 1.Locate the Contact Info block in the Disabled group 2.Select left sidebar from the corresponding drop down menu 3.Position the Contact Info block beneath all other blocks 4.Click the Save blocks button 4 1 2 3

65. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 65 Beyond Menus: Custom Add-On Blocks – Ex. 13 Custom Contact Info Block – Completed The completed Contact Info block will appear in the left sidebar underneath all others.

66. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 66 Beyond Menus: Custom Add-On Blocks – OSU Event Calendar For those organizations who happen to use the OSU Events Calendar, you can also display your calendar items on your Drupal site. There are two different display items that can be shown: Events List A list of upcoming events that includes the date of the event and the title of the event. The title can be clicked on to open the Event in detail. Mini-Calendar A small month view calendar, similar in display to a wall calendar. Days with events on your calendar are marked with an underline to indicate activity on that particular day. Clicking on the day will open the Event in detail To create the blocks, we’ll need to use a code snippet supplied by CWS on WebTrain. Additionally, you will need to have an OSU Events Calendar. We’ll use the Food at OSU – Restaurants calendar, located at http://calendar.oregonstate.edu/foodatosu/ for our example.

67. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 67 Beyond Menus: Custom Add-On Blocks – Ex. 14 OSU Calendar Events List Block – Create First, from the Blocks page, let’s add a new block to our site called Events: 1.From the Blocks page, click on the Add block tab 2.In the Block description field, enter Events 3.In the Block title field, enter OSU Restaurant Hours 4.In the Block body field, leave it blank for the moment 5.Change the Input format to PHP code 1 2 3 5 4

68. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 68 Beyond Menus: Custom Add-On Blocks – Ex. 14 OSU Calendar Events List Block – Configure Now we need to add the code and change the parameters: 1.Paste in the Events List code from the ex-14.txt file in your lab materials 2.Change the code by replacing the following parameters: – ‘osu’ > ‘foodatosu’ – ‘month’ > ‘day’ – 5 > 10 3.Add a line of HTML to the top of the code to guide users, if desired 4.Click the Save block button Original parameters Changed parameters 1 2 3 4

69. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 69 Beyond Menus: Custom Add-On Blocks – Ex. 14 OSU Calendar Events List Block – Enable Now, enable the new Events block on the Blocks panel: 1.Locate the Events block within the Disabled list 2.Select left sidebar from the corresponding drop down menu 3.Position the Events block between the Nice Menu 1 and Announcements: Summaries blocks 4.Click the Save blocks button 1 2 3 4

70. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 70 Beyond Menus: Custom Add-On Blocks – Ex. 14 OSU Calendar Events List Block – Completed The Events List will show in the left sidebar. Clicking on the title of any of the restaurants will take you to that particular event for that restaurant. In this case, the events are used to indicate the hours that particular dining area will be open at OSU. Now let’s take a look at the Mini- Calendar.

71. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 71 Beyond Menus: Custom Add-On Blocks – Now You Do It – OSU Mini-Calendar Block Lab Go to the Blocks panel, click on the Add block tab and create a Mini-Calendar block with the following information Block description field = Mini-Calendar Block title field = None Input format option = PHP code Block body field = paste in lab materials ex-14.txt file – Mini-Calendar code snippet – Change osu parameter to foodatosu – Type in HTML user note at top, if desired Click the Save block button Remember to also enable and position your new Mini-Calendar block on the Blocks main panel When done, choose one calendar block and disable the other

72. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 72 Progress to Date Contributor View Anonymous View

73. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 73 Summary As can be seen, Blocks provide an incredible amount of flexibility and versatility to a site. We’ve covered a some of the default Blocks here, but there are quite a few others – as well the opportunity for you to create your own custom Blocks. The best way to learn about Blocks is to actually get in there, configure, and enable them to see what happens. While you might change the appearance of your page, there usually isn’t anything within a Block that will hurt your site. So have some fun and experiment around. Now that we have layout under our belts, it’s time to take a look at how we can create additional tools that make our lives easier as site contributors by learning how to create custom content types. Visit our Generating Custom Content Types workshop to learn all about how to create these custom data entry forms.

74. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 74 Conclusion This completes the OSU Drupal 6 Formatting Blocks 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