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 Diggin' Drupal Gardens 504: Engineering Blocks

2. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 1 What We’ll Be Covering… Getting Started  Gather Materials Blocks  Overview  Basic Configurations Menus  Overview  Custom Menu Blocks  Contextual Menus Beyond Menus  Overview  Enable Most Recent Poll Block  Configure Image Gallery Block  Configure Rotating Banner Block Summary Conclusion

3. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 2 Please use Mozilla Firefox as your browser for this workshop. Log in to: http://discoverdrupal.drupalgardens.com After logging in to the training site, to gather your lab materials for this workshop, do the following: 1. Open another tab in your browser 2. In your new tab, go to http://oregonstate.edu/cws/traininghttp://oregonstate.edu/cws/training 3. Look in the lower right and click on the Training Materials graphic – this will take you to the page where all training materials for all CWS Drupal classes are distributed 4. Filter for the 500 – Diggin’ Drupal Gardens materials 5. Locate the 504 Engineering Blocks row and click on the Lab link – download the lab to your desktop 6. Once the zip file is downloaded you will need to extract it. For a PC, right click on the zip file and select Extract All. For a Mac, simply double-click on the zip file. 7. You can then move the zip file to your trash Getting Started: Your Lab Materials

4. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 3 Blocks: Overview – Layout “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 and how they’re broken up, among other visual elements. 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 by changing the theme, but this isn’t the only way to change the way things look, 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 Gallery items or Poll results. First, though, we should get a grasp on just what a Block is…

5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 4 Blocks: Overview – What Blocks Are 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 confine content access to particular roles

6. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 5 Blocks: Overview – Layout Regions Regions are areas on your theme where you can place blocks. These areas are defined in the theme programming. Different themes may or may not contain different regional areas, as well as different quantities of regions. It all depends on the design. Take, for example, the themes at left, both of which are included in Drupal Gardens. Kensington is a three-column design while Carbon is a two- column one. Three-Column Layout Two-Column Layout Kensington Theme Carbon Theme

7. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 6 Let’s go to Admin menu > Structure > Blocks and explore the Blocks manager: 1. The Blocks Manager includes a long, complex table – at the top, each region included in the theme is a sub-heading 2. At the bottom is the Disabled group – these are blocks that are available but not currently in use Blocks: Overview – Blocks Manager 2 2 1 1

8. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 7 Blocks: Overview – Block Region Demo To get a visual idea of how the regions are laid out, do the following: 1. Click on the Demonstrate block regions link at the upper left of the Blocks Manager 2. When the demo overlay loads, you’ll see the theme has 20 regions – that’s a complex theme 3. To close out of the demo, click the Exit block region demonstration tab in the upper left of the screen 2 2 3 3 1 1

9. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 8 Block layout is respective to the theme the layout is used with. Blocks: Overview – Theme Relationship Gallery Block Gallery Block If you start with a theme that has a special region, then change to a theme that does not have this region, blocks in the initial region will disable themselves because they do not have a corresponding place to go to. In this case, the Carbon theme doesn’t have a Sidebar B region, so if you were to change themes from Kensington to Carbon, anything in Sidebar B would be disabled.

10. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 9 Blocks: Basic Configuration 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.

11. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 10 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 Book navigation block and click the configure link 2. Type in the Block title field 3. Click the Save block button Close the Block manager overlay to view your results. Blocks: Basic Configuration – Ex. 01 Configure Block Title Visibility 2 2 3 3 1 1

12. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 11 The completed configuration displays a Book navigation block that has no title. Optionally, a different name could be applied to the block, if desired. Blocks: Basic Configuration – Ex. 01 Configure Block Title Visibility – Completed Before After Before After

13. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 12 With every block used in Drupal, the Page Visibility can be set in the block configuration. This means that you can tell your block to appear on the nodes that you want it to appear on and “hide” at other times. Let’s do this with our Stay Connected block: 1. Hover over the Stay Connected block to pop up the contextual configuration link 2. Hover over the cog in the corner to make the menu show, then click configure block when the link pops up Blocks: Basic Configuration – Ex. 02 Configure Page Visibility 2 2 1 1

14. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 13 Once the configuration overlay loads: 1. Show block on specific pages option = Only the listed pages 2. In the text box, type 3. Click the Save block button Blocks: Basic Configuration – Ex. 02 Configure Page Visibility – Configure 2 2 3 3 1 1

15. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 14 Compare the front page to any other page in the site. Blocks: Basic Configuration – Ex. 02 Configure Page Visibility – Completed Follow Block on Front page only

16. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 15 Blocks can also be configured to be visible by role so that different levels of users can see different things. Let’s do this with the Who’s Online block. Go to Admin menu > Structure > Blocks: 1. Locate the Who’s Online block on your Blocks Manager and click its configure link Blocks: Basic Configuration – Ex. 03 Configure Role Visibility 1 1

17. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 16 Once the configuration panel opens: 1. Click on the Roles tab 2. Show block for specific roles option = authenticated user 3. Click the Save block button 4. Upon returning to the Blocks Manager, locate the Who’s Online block and select Sidebar B 5. Click the Save blocks button Blocks: Basic Configuration – Ex. 03 Configure Role Visibility – Configure & Enable 2 2 3 3 1 1 4 4 5 5

18. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 17 Look at your Home page. Copy the URL, open another browser, and paste the URL in the other browser to view your site as an anonymous user. Now, let’s take a look at how Blocks and Menus work together… Blocks: Basic Configuration – Ex. 03 Configure Role Visibility – Completed Who’s Online block only visible to logged in users

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

20. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 19 The Menus manager 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 manager: 1. Go to Admin menu > Structure > Menus 2. The List menus panel provides a list of all available menus on the site 3. Click on the Management menu’s edit menu link 4. The Management menu overlay appears Menus: Overview – Menu Manager 2 2 3 3 1 1 4 4

21. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 20 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 dragging it to the right, 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). Menus: Overview – Menu Manager – Reorder Items 2 2 1 1

22. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 21 Menus: Custom Menu Blocks – Overview Adding items to menus in Drupal 7 is very easy – it can be done right through the content submission form. Most of the time the user doesn’t even have to go into the Menus manager. 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.

23. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 22 To create a custom menu block, from within the Management menu: 1. Click on the Menus breadcrumb. 2. Click on the Add menu tab. 3. Title field = Of Interest 4. Description = A set of links to other sites related to health and nutrition that you might find of interest. 5. Click the Save button. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu Block – Define Menu 2 2 3 3 4 4 5 5 1 1

24. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 23 After the Of Interest menu is created, the Of Interest menu overlay will appear but will have no menu items. To add a new menu item: To add a menu item: 1. Click the Add link tab at the top of the screen. 2. Menu link title field = ChooseMyPlate.gov 3. Path field = http://www.choosemyplate.govhttp://www.choosemyplate.gov 4. Description field = Link to the USDA’s food group guidelines 5. Weight field = -50 6. Click the Save button Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Add Menu Item 2 2 3 3 4 4 5 5 1 1 6 6

25. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 24 You’ll be returned to your Of Interest menu overlay. Your new link will now be present in the list. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Menu Item Added

26. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 25 To enable the Of Interest block go to Admin menu > Structure > Blocks: 1. From within the Disabled group, locate the Of Interest block in the Disabled group and select the Sidebar B option from the Region drop down menu. 2. Grab the small cross on the Of Interest item and position it under the Book navigation block. 3. Click the Save blocks button. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Enable Menu Block 2 2 3 3 1 1

27. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 26 The Of Interest block will appear beneath the Book navigation block. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Completed

28. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 27 Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Now You Do It Hover over the Of Interest menu block, click edit menu, and add another link to the Of Interest block Path field = copy & paste link from Ex. 04 lab materials Menu link title field = Calorie Finder Description field = copy & paste description from Ex. 04 lab materials Enabled option= Leave as is Expanded option = Leave as is Parent item field = Leave as is Weight field = -49 Click the Save button

29. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 28 Menus: Contextual Menus – Overview 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 Main menu that we have at the top of our site. Let’s find out how to do this.

30. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 29 First, we have to add the top page of our Cooking Companion book to our Main menu: 1. Click on the Cooking Companion link in the Book Navigation block and open it in Edit mode. 2. Go to the Menu settings tab and do the following: Check the Provide a menu link checkbox Weight field: -49 3. Click the Save button. 4. A new link appears in the Main menu Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Combine Menus 2 2 3 3 1 1 4 4

31. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 30 Now, let’s get in and tackle the Book navigation block: 1. Locate the Book navigation block, hover over it and click on its configure block link 2. Block title field = Cooking Companion 3. Book navigation block display option = check Show block only on book pages 4. Click the Save block button Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Configure Book Navigation Block 2 2 3 3 4 4 1 1

32. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 31 Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Completed Click on the Home link to view the front page… …and then compare it to the Cooking Companion page.

33. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 32 Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Main Menu Adjustment – Now You Do It Let’s get in and adjust the positioning of the items on the Main Menu so that the order is Home > About > Cooking Companion Do you know how to do it? Original Menu Adjusted Menu

34. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 33 Beyond Menus: Ex. 06 Most Recent Poll Block – Overview In the 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 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…

35. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 34 To activate the Most Recent Poll block go to Admin menu > Structure > Blocks and do the following: 1. Locate the Most recent poll block in the Disabled list and select Sidebar B in the corresponding drop down menu. 2. Position the Most recent poll block below the Of Interest block. 3. Click the Save blocks button. The block will not show because we don’t have a poll created yet, so let’s make one… Beyond Menus: Ex. 06 Most Recent Poll Block – Enable 2 2 3 3 1 1

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

37. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 36 Beyond Menus: Ex. 06 Most Recent Poll Block – Completed Visit another page on your site and note how the most recent poll is now available. Note how, after the poll is taken, the results are shown in the block.

38. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 37 Beyond Menus: Ex. 07 Gallery Block – Overview In the Content Types workshop, we spent some time playing with the Gallery content type. This great module allows a user the ability to bulk upload images up into the site and, displays them in an attractive grid and also a lightbox. The Gallery module does even more, though. It creates a handy block that gives your user a sneak peek into the gallery. So now that we know how to work with the content type, let’s get in and see what we can do with the block as well.

39. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 38 Let’s make good use of the sample gallery that’s present on the site. Click on the More link inside of the block to get to the node: 1. Click on the Edit gallery tab to edit the node and make the following changes 2. Title field = rename to Delicious Dishes 3. Description field = paste text from Ex. 07 4. Show title and description option = check 5. Click the Save button Beyond Menus: Ex. 07 Gallery Block – Create Gallery Content 2 2 3 3 4 4 5 5 1 1

40. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 39 To add pictures, do the following: 1. Click the Add media link 2. When the Media dialog box appears, click the Add files link – this will open a window to your computer, navigate to your lab materials and open the files in the ex-07-gallery-images folder and select all of them 3. After they load into the dialog box, click the Start upload button Beyond Menus: Ex. 07 Gallery Block – Add Media 2 2 3 3 1 1

41. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 40 The pictures will display in a nice array, but note how the sample pictures are still in the gallery. So let’s remove them. Beyond Menus: Ex. 07 Gallery Block – Media Uploaded

42. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 41 To remove the sample images: 1. Click the Edit media tab 2. Locate the images you want to remove and check the Remove from gallery checkboxes under the images 3. Click the Save button Beyond Menus: Ex. 07 Gallery Block – Remove Sample Images 2 2 1 1 3 3

43. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 42 Now we have both a node, and a gallery block that appears on the front page and will lead users to the full node version if they’re interested. Beyond Menus: Ex. 07 Gallery Block – Completed

44. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 43 Beyond Menus: Ex. 08 Rotating Banner Image – Overview The Rotating Banner image is a dramatic, interesting visual addition to the front page. This contributed module was developed by the folks at Acquia and released to drupal.org. The Rotating Banner offers a few different configurable options, including various transition effects like wiping and fading, dynamic sizing capabilities, and the ability to create custom inlaid captions and place them in different regions of the banner. For best layout results, it’s best if the images are at 920 px wide and, while the sizing can be dynamic, if this option is used, it’s best if the images are close to the same height.

45. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 44 To configure the Rotating Banner block: 1. Hover over the block until the cog displays, then click the configure block link 2. Once inside the configuration overlay, click the delete links of the existing pictures to get rid of them Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Delete Samples 2 2 1 1

46. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 45 Now let’s pull up some new pictures: 1. Click the Add a new slide to this banner link 2. When the Media dialog box appears, browse to your ex-08- banner-images folder and open the linguini-clams.jpg file 3. Click the Upload button 4. The image will appear Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Add New Image 2 2 3 3 4 4 1 1

47. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 46 The caption isn’t quite positioned right in relation to the image, so let’s move it to the right corner. 1. Layout field = Top right 2. Banner headline field = See Food 3. Banner text field = paste text from Ex. 08 4. Link field = book/cooking-companion  The Link field Is optional, we’re just hooking it to our Cooking Companion for convenience 5. Click the Save button Upload the remaining images. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Position Caption 2 2 3 3 4 4 5 5 1 1

48. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 47 After all images are uploaded, it’s time to look at the Banner settings. The Banner settings control how the image displays: 1. Click on the Banner settings fieldset to open it 2. Transition type field = Fade These settings can be changed as desired at any time Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Banner Settings 2 2 1 1

49. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 48 The final thing we’ll do is set the page visibility so this block only shows on the front page: 1. Scroll down to the Pages tab 2. Show block on specific pages option = Only the listed pages 3. In the text field enter 4. Click the Save block button Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Page Visibility 2 2 3 3 4 4 1 1

50. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 49 The final result is a dynamic, attractive rotating banner that can actually be linked to something like an internal feature story OR an external resource. Beyond Menus: Ex. 08 Rotating Banner Image – Completed

51. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 50 We made great progress today! As you’ve seen, blocks allow a user to do so much to spice up a site. Just as a wrap up, today’s workshop covered:  An understanding of the relationship between Blocks and Themes  Basic block configurations: title, role visibility, and page visibility  An understanding of the relationship between Blocks and Menus  Basic menu use, custom menu configuration, and how to create a contextual menu  Configuration of the Poll, Image Gallery, and Rotating Banner blocks Of course, these aren’t the only blocks that can be used. Drupal Gardens is full of several different ones that you can leverage for your own use. You also have the ability to create your own. The more you experiment with them, the more surprises you’ll find. Summary

52. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 51 This completes our Diggin’ Drupal Gardens tutorial. For additional tutorials please visit CWS Training at: http://oregonstate.edu/cws/training/view/training-materials Conclusion