Presentation Transcript

1. Diggin' Drupal Gardens

   504: Engineering Blocks
2. 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. Getting Started: Your Lab Materials 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: Open another tab in your browser In your new tab, go to http://oregonstate.edu/cws/training 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 Filter for the 500 – Diggin’ Drupal Gardens materials Locate the 504 Engineering Blocks row and click on the Lab link – download the lab to your desktop 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. You can then move the zip file to your trash
4. 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. 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 Blockdoes not have to contain only Menus How Blocksare created: Some are created automatically by modules Others may be created manually Why Blocksare 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. Blocks: Overview – Layout Regions Regions are areas on your theme where you can place blocks. These areas are defined in the theme programming. Kensington Theme Carbon Theme 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
7. Blocks:Overview – Blocks Manager Let’s go to Admin menu > Structure > Blocks and explore the Blocks manager: The Blocks Manager includes a long, complex table – at the top, each region included in the theme is a sub-heading At the bottom is the Disabled group – these are blocks that are available but not currently in use 1 2
8. Blocks: Overview – Block Region Demo To get a visual idea of how the regions are laid out, do the following: Click on the Demonstrate block regions link at the upper left of the Blocks Manager When the demo overlay loads, you’ll see the theme has 20 regions – that’s a complex theme To close out of the demo, click the Exit block region demonstration tab in the upper left of the screen 2 1 3
9. Blocks: Overview – Theme Relationship Block layout is respective to the theme the layout is used with. 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. Gallery Block Gallery Block
10. 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. Blocks:Basic Configuration – Ex. 01 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: Locate the Book navigationblock and click the configure link Type <none> in the Block titlefield Click the Saveblock button Close the Block manager overlay to view your results. 1 2 3
12. Blocks:Basic Configuration – Ex. 01 Configure Block Title Visibility – Completed The completed configuration displays a Book navigation block that has no title. Optionally, a different name could be applied to the block, if desired. Before After
13. Blocks: Basic Configuration – Ex. 02 Configure Page Visibility With every block used in Drupal, the PageVisibility 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: Hover over the Stay Connected block to pop up the contextual configuration link Hover over the cog in the corner to make the menu show, then click configure block when the link pops up 1 2
14. Blocks: Basic Configuration – Ex. 02 Configure Page Visibility – Configure Once the configuration overlay loads: Show block on specific pages option = Only the listed pages In the text box, type <front> Click the Save block button 1 2 3
15. Blocks: Basic Configuration – Ex. 02 Configure Page Visibility – Completed Compare the front page to any other page in the site. Follow Block on Front page only
16. Blocks: Basic Configuration – Ex. 03 Configure Role Visibility 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: Locate the Who’s Online block on your Blocks Manager and click its configure link 1
17. Blocks: Basic Configuration – Ex. 03 Configure Role Visibility – Configure & Enable Once the configuration panel opens: Click on the Roles tab Show block for specific roles option = authenticated user Click the Save block button Upon returning to the Blocks Manager, locate the Who’s Online block and select Sidebar B Click the Save blocks button 2 1 4 3 5
18. Blocks: Basic Configuration – Ex. 03 Configure Role Visibility – Completed 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… Who’s Online block only visible to logged in users
19. 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. Menus:Overview – Menu Manager 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: Go to Admin menu > Structure > Menus The List menus panel provides a list of all available menus on the site Click on the Management menu’s edit menu link The Management menu overlay appears 1 2 3 4
21. Menus: Overview – Menu Manager – Reorder Items Menu items can be manually grabbed and dragged to put them in the order you want them in: Click on the cross icon next to a menu item and hold it. 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. 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). 1 2
22. 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. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu Block – Define Menu To create a custom menu block, from within the Managementmenu: Click on the Menus breadcrumb. Click on the Add menu tab. Title field = Of Interest Description = A set of links to other sites related to health and nutrition that you might find of interest. Click the Save button. 1 2 3 4 5
24. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Add Menu Item 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: Click the Add linktab at the top of the screen. Menu link title field = ChooseMyPlate.gov Path field = http://www.choosemyplate.gov Description field = Link to the USDA’s food group guidelines Weight field = -50 Click the Savebutton 1 2 3 4 5 6
25. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Menu Item Added You’ll be returned to your Of Interest menu overlay. Your new link will now be present in the list.
26. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Enable Menu Block To enable the Of Interest block go to Admin menu > Structure > Blocks: 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. Grab the small cross on the Of Interest item and position it under the Book navigation block. Click the Save blocks button. 1 2 3
27. Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Completed The Of Interest block will appear beneath the Book navigation block.
28. 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 Interestblock 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 Enabledoption= Leave as is Expanded option = Leave as is Parent item field = Leave as is Weight field = -49 Click the Save button
29. 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. Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Combine Menus 1 First, we have to add the top page of our Cooking Companion book to our Main menu: Click on the Cooking Companion link in the Book Navigation block and open it in Edit mode. Go to the Menu settingstab and do the following: Check the Provide a menu link checkbox Weight field: -49 Click the Save button. A new link appears in the Main menu 2 4 3
31. Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Configure Book Navigation Block Now, let’s get in and tackle the Book navigation block: Locate the Book navigationblock, hover over it and click on its configure block link Block titlefield = Cooking Companion Book navigation block displayoption = check Show block only on book pages Click the Save block button 1 2 3 4
32. 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. 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. 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. Beyond Menus: Ex. 06 Most Recent Poll Block – Enable To activate the Most Recent Poll block go to Admin menu > Structure > Blocks and do the following: Locate the Most recent poll block in the Disabled list and select Sidebar B in the corresponding drop down menu. Position the Most recent poll block below the Of Interest block. Click the Save blocks button. The block will not show because we don’t have a poll created yet, so let’s make one… 1 2 3
36. 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. 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. 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. Beyond Menus: Ex. 07 Gallery Block – Create Gallery Content 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: Click on the Edit gallery tab to edit the node and make the following changes Title field = rename to Delicious Dishes Description field = paste text from Ex. 07 Show title and description option = check Click the Save button 1 2 3 4 5
40. Beyond Menus: Ex. 07 Gallery Block – Add Media To add pictures, do the following: Click the Add media link 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 After they load into the dialog box, click the Start upload button 1 2 3
41. Beyond Menus: Ex. 07 Gallery Block – Media Uploaded The pictures will display in a nice array, but note how the sample pictures are still in the gallery. So let’s remove them.
42. Beyond Menus: Ex. 07 Gallery Block – Remove Sample Images To remove the sample images: Click the Edit media tab Locate the images you want to remove and check the Remove from gallery checkboxes under the images Click the Save button 1 2 3
43. Beyond Menus: Ex. 07 Gallery Block – Completed 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.
44. 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. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Delete Samples To configure the Rotating Banner block: Hover over the block until the cog displays, then click the configure block link Once inside the configuration overlay, click the delete links of the existing pictures to get rid of them 1 2
46. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Add New Image Now let’s pull up some new pictures: Click the Add a new slide to this banner link When the Media dialog box appears, browse to your ex-08-banner-images folder and open the linguini-clams.jpg file Click the Upload button The image will appear 1 2 3 4
47. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Position Caption The caption isn’t quite positioned right in relation to the image, so let’s move it to the right corner. Layout field = Top right Banner headline field = See Food Banner text field = paste text from Ex. 08 Link field = book/cooking-companion The Link field Is optional, we’re just hooking it to our Cooking Companion for convenience Click the Save button Upload the remaining images. 1 2 3 4 5
48. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Banner Settings After all images are uploaded, it’s time to look at the Banner settings. The Banner settings control how the image displays: Click on the Banner settingsfieldset to open it Transition type field = Fade These settings can be changed as desired at any time 1 2
49. Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Page Visibility The final thing we’ll do is set the page visibility so this block only shows on the front page: Scroll down to the Pages tab Show block on specific pages option = Only the listed pages In the text field enter <front> Click the Save block button 1 2 3 4
50. Beyond Menus: Ex. 08 Rotating Banner Image – Completed 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.
51. Summary 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.
52. Conclusion This completes our Diggin’ Drupal Gardens tutorial. For additional tutorials please visit CWS Training at: http://oregonstate.edu/cws/training/view/training-materials