Drupal Training Series

1
Drupal Training Series

• Formatting Blocks

2
What Well 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

3
Getting Started

• As a reminder, to get to your personal
  development site go to
• http//drupaldev.cws.oregonstate.edu/training/ltyou
  rONIDnamegt/login
• From there, log in with your ONID information.
• After logging in, please open a second tab in
  your browser, go to WebTrain at
• http//oregonstate.edu/cws/webtrain/presentations-
  1
• and download the lab materials to your desktop

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
Getting Started Ex. 01 A Theme Enabling Refresher

• Blocks and Themes interact closely with each
  other, so lets refresh our memories on how to
  enable a theme
• Go to Administer gt Site building gt Themes and
  enable OSU Drupal Lite and OSU Linen.
• Just enable them. Dont choose them as the
  default.
• Remember to click the Save Configuration button
  afterwards.

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. Its 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 isnt 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
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
Blocks Overview Layout Regions

• Regions are areas on your theme where you can
  place Blocks. These areas are defined in the
  theme programming.

Menu Block
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
Blocks Overview Control Panel

• Lets explore the Blocks screen
• Click on Administer gt Site building gt Blocks
• 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
• 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

3
Enabled Themes
2
1
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
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, well configure and
  enable some different default blocks to see the
  various ways we can get them to behave.

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
• Locate the Primary Links block and click the
  configure link
• Type ltnonegt in the Block title field
• Click the Save block button

1
2
3
13
Blocks Basic Configuration Enabling Ex. 02
Configure Block Title Visibility Result
Before After

• The completed configuration displays a Primary
  Links block that has no title.
• Optionally, a different name could be applied to
  the block, if desired.

14
Blocks Basic Configuration Enabling Ex. 03
Glossary Random Block

• Lets add a feature to our site that makes use of
  some work weve already done well add a
  Todays Featured Method block that makes use of
  Glossary and one of its blocks
• From within the Blocks main screen at Administer
  gt Site building gt Blocks, scroll down to the
  Disabled group and locate the Glossary Random
  block
• Its best to make configurations first, so click
  on the Glossary Random blocks configure link to
  open the configuration screen.

1
2
15
Blocks Basic Configuration Enabling Ex. 03
Glossary Random Block Configure

• From within the block configuration panel, make
  the following configurations
• In the Block title field, add the text Todays
  Featured Method
• In the Choose from group, select the Cooking
  Methods option.
• In the Update every fields, type 1 in the first
  field and select days from the drop down menu
• Leave the Show term as link box checked
• Click the Save block button
• After saving the block, you will be redirected
  back to the main Blocks panel

1
2
3
4
5
16
Blocks Basic Configuration Enabling Ex. 03
Glossary Random Block Enable

• Now that weve configured the Glossary Random
  block, it will need to be enabled to be visible
• Locate the Glossary Random block in the Disabled
  group
• 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
• Click the Save blocks button

1
2
Block moves to designated location when enabled
3
17
Blocks Basic Configuration Enabling Ex. 03
Glossary Random Block Completed

• View the new addition to the layout by scrolling
  down the screen.

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
• The front page has additional content added to it
  making it more interesting and fleshed out
• The content that has been added is actually
  reused from another source
• 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
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.
• Lets find out how to do this

20
Blocks Page Visibility Ex. 04 Configure Page
Visibility

• Well 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
• Scroll down the screen to the Page specific
  visibility settings group and select the Show on
  only the listed pages option
• In the Pages field, enter the term ltfrontgt
• Click the Save blocks button

1
2
3
21
Blocks Page Visibility Ex. 04 Configure Page
Visibility Completed

• As a result, only the front page shows our
  Todays Featured Methods block, while all others
  do not show it

22
Blocks Summary

• As can be seen up to this point, Blocks play a
  very large role in Drupal. Its 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 its easy to
  forget the main reason for having them in the
  first placeMenus.
• Menus, the automated ones that we can move around
  easily on a Drupal site, must all reside in
  blocks.

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
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
• In the Navigation menu, click on Administer gt
  Site building gt Menus
• 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
• Click on the Navigation link

2
3
1
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
• 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 indenting
  it 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
Grab with mouse
2
drag to desired location
3
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 doesnt 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, well create a custom
  menu block that contains links to external
  websites that relate well to our Food For Thought
  web site.

27
Menus Custom Menu Blocks Ex. 06 Create Custom
Menu Block

• To create a custom menu block
• From within the Menus feature main screen at
  Administer gt Site building gt Menus, click on the
  Add menu tab
• 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
• In the Title field, enter the title Of Interest
• The title can be mixed case and contain spaces
• In the Description field, provide some
  descriptive text regarding what this menu block
  is for
• Click the Save button

1
2
3
4
5
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
• 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
• Now we need to add a Menu item

1
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
• Path field http//www.mypyramid.gov
• Menu link title field MyPyramid.gov
• Description field Link to the USDAs food
  group guidelines.
• 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.

1
2
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
  gt Site building gt Blocks
• Once on the Blocks panel, scroll down the page to
  the Disabled group and locate the Of Interest
  block
• Select the right sidebar option from the Region
  drop down menu
• Grab the small cross on the Of Interest item and
  position it under the Navigation block
• Click the Save blocks button

1
2
4
3
31
Menus Custom Menu Blocks Ex. 06 Create Custom
Menu Block Completed

• The Of Interest block will appear beneath the
  Navigation block

32
Menus Custom Menu Blocks Now You Do It Add
Item To Of Interest Menu Block

• Go to Administer gt Menus gt Of Interest gt 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
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.

Fly-Out Menu Style
Expanding Menu Style
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
• In the Navigation menu go to Administer gt Site
  configuration gt Nice Menus
• In the text field, enter the number 5
• Leave Enable IE Support checked
• Click the Save configuration button

1
2
3
4
35
Nice Menus Ex. 08 Nice Menus For Navigation Menu

• Lets make the Navigation menu a fly-out style.
  From the Blocks main panel at Administer gt Site
  Building gt Blocks
• Scroll down into the Disabled group and locate
  the Nice Menu 1 block
• Click on the corresponding configure link

1
2
36
Nice Menus Ex. 08 Nice Menus For Navigation Menu
Configure Nice Menus 1 Block

• Within the Nice Menu 1 block configuration
  screen
• Leave the Block title field as is
• Leave the Menu Name field as is
• From the Source Menu Tree field, select
  ltNavigationgt
• Leave the Menu Style set at right
• Click the Save block button

1
2
3
4
5
37
Nice Menus Ex. 08 Nice Menus For Navigation Menu
Enable Nice Menus 1 Block

• After redirection back to the Blocks list
• Locate Nice Menu 1 in the Disabled list
• Select left sidebar in the corresponding
  drop-down menu
• In the Navigation block Region field select
  ltnonegt
• Click the Save blocks button

1
2
3
4
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 gt Site
building gt Blocks gt Nice Menu 2 gt configure
link Block title field Leave as is Menu name
field Leave as is Source Menu tree field
ltPrimary Linksgt Menu Style field down Click
Save block button Enable (after
configuration) Nice Menu 2 block region top
horizontal bar Primary Links block region
ltnonegt Click Save blocks button
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 its a good idea to make the best use
  of that space as possible.
• Our Book navigation block is a great tool but
  we dont 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 weve worked
  with, along with the Primary Links menu that
  weve put at the top of our site.
• Lets find out how to do this.

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
• Click on the Cooking Companion link in the Book
  Navigation block and open it in Edit mode
• Open the Menu settings group and enter the
  following
• Menu link title field Cooking Companion
• Parent item field ltPrimary Linksgt
• Weight field -49
• Click the Save button
• A new link appears in Primary links

1
2
3
4
41
Optimized Menus Ex. 09 Combine Menu Features
Configure Book Navigation Block

• Now, go to Administer gt Site building gt Blocks to
  configure the Book navigation block
• Locate the Book navigation block in the right
  sidebar group and click on its configure link
• In the Block title field, enter the title Cooking
  Companion
• In the Book navigation block display group,
  select Show block only on book pages
• Click the Save block button

1
2
3
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
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
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
  lets 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
Beyond Menus Announcement Blocks Ex. 10 Add
Announcements Small List Block Enable

• To enable the Announcement block, go to
  Administer gt Site building gt Blocks and do the
  following
• On the Blocks main page, locate the
  Announcements Small List block in the Disabled
  list and select left sidebar from its
  corresponding drop down menu
• Position the Announcements Small List beneath
  the Nice Menu 1 block
• Click the Save blocks button

1
2
3
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
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
• announcement.doc
• Input Format option Full HTML
• Publication Date field Todays 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
Beyond Menus Announcement Blocks Now You Do
It Announcement Summaries Block Lab
Now return to Administer gt Site building gt
Blocks and enable the Announcements Summaries
block to see what it looks like. When youre
done, decide which one you like best and disable
the one you dont want.
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
  sites 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 users 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.
• Lets take a look at how this works

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 gt Site building gt Blocks and do the
  following
• Locate the Most recent poll block in the Disabled
  list and select right sidebar in the
  corresponding drop down menu
• Position the Most recent poll block below the
  Book navigation block
• Click the Save blocks button
• The block will not show because we dont have a
  poll going yet, so lets make one

1
2
3
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
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, lets
  visit the USDAs Food Safety and Inspection
  Service website to get a feed from them and then
  well set up our Feed Aggregator.

53
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Locate News Feed

• To gather a feed
• Open a new tab in your browser and go to the
  following URL http//www.fsis.usda.gov/
• From here look to the right sidebar and click on
  the Subscribe to RSS Feeds menu link
• This will take you to a page with different news
  feed options. Click on the Open Recalls RSS
  option.

1
2
3
54
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Gather News Feed

• To gather the feed
• A page will open with a list of topics this is
  the feed information that we will be pulling into
  our site
• Copy the URL

1
2
Copy this URL
55
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Create Category

• To create a news feed category, go to Administer
  gt Content management gt Feed aggregator gt Add
  category tab
• In the Title field, enter the title Food Recalls
• In the Description field, enter the text
  Aggregated food recall information
• Click the Save button

1
2
3
56
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Add Feed

• To add the news feed to the aggregator
• While in the Feed aggregator, click on the Add
  feed tab
• In the Title field enter the title FSIS Open
  Recall Cases
• In the URL field, paste the URL copied from FSIS
  into the field
• For the Update Interval, select 1 day
• In the Categorize news items group, click the
  Food Recalls option
• Click the Save button

1
2
3
4
5
6
57
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Configure Aggregator

• To configure the Feed Aggregator do the
  following
• From within the Feed Aggregator click on the
  Settings tab
• Leave the Allowed HTML tags as they are
• In the Items shown in sources field select 3
  items
• In the Discard items older than field leave it at
  16 weeks
• In the Category selection type, leave it at
  checkboxes
• Click the Save configuration button

1
2
3
4
5
6
58
Beyond Menus Feed Aggregator Blocks Ex. 12 Add
Feed Aggregator Block Update Feed Items

• To get the Feed Aggregator started, click on the
  
• While in the Feed Aggregator click on the List
  tab
• 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
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 gt Site building gt
  Blocks and do the following
• Locate the Food Recalls category latest items
  block in the Disabled list and click on the
  corresponding configure link
• Leave the Number of news items in blocks field
  set at 3
• Click the Save block button

1
2
3
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 gt Site building gt Blocks
  and do the following
• Locate the Food Recalls category latest items
  block in the Disabled list
• Select right sidebar from its corresponding drop
  down menu
• Position the block below the Book navigation
  block
• Click the Save blocks button

1
2
3
3
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
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.
• Well begin by creating a very simple Contact
  block that contains some contact information
  about the Food for Thought site and then well
  move into some integration with the OSU Events
  Calendar.

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 gt Site
  building gt Blocks
• Click on the Add block tab at the top of the
  Blocks page
• In the Block description field, enter the text
  Contact Info
• In the Block title field, enter Contact Us!
• In the Block body paste the HTML code from the
  ex-13.txt file in your lab materials using the
  Edit HTML Source button
• Set the Input format to Full HTML
• Click the Save block button

1
2
3
4
3
5
64
Beyond Menus Custom Add-On Blocks Ex. 13
Custom Contact Info Block Enable

• To enable the custom Contact Info block do the
  following
• Locate the Contact Info block in the Disabled
  group
• Select left sidebar from the corresponding drop
  down menu
• Position the Contact Info block beneath all other
  blocks
• Click the Save blocks button

1
2
4
3
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
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, well need to use a code
  snippet supplied by CWS on WebTrain.
• Additionally, you will need to have an OSU Events
  Calendar. Well use the Food at OSU
  Restaurants calendar, located at
• http//calendar.oregonstate.edu/foodatosu/
• for our example.

67
Beyond Menus Custom Add-On Blocks Ex. 14 OSU
Calendar Events List Block Create

• First, from the Blocks page, lets add a new
  block to our site called Events
• From the Blocks page, click on the Add block tab
• In the Block description field, enter Events
• In the Block title field, enter OSU Restaurant
  Hours
• In the Block body field, leave it blank for the
  moment
• Change the Input format to PHP code

1
2
3
4
5
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
• Paste in the Events List code from the ex-14.txt
  file in your lab materials
• Change the code by replacing the following
  parameters
• osu gt foodatosu
• month gt day
• 5 gt 10
• Add a line of HTML to the top of the code to
  guide users, if desired
• Click the Save block button

1
Original parameters
3
4
Changed parameters
2
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
• Locate the Events block within the Disabled list
• Select left sidebar from the corresponding drop
  down menu
• Position the Events block between the Nice Menu 1
  and Announcements Summaries blocks
• Click the Save blocks button

3
1
2
4
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 lets take a look at the Mini-Calendar.

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
Progress to Date
Contributor View
Anonymous View
73
Summary

• As can be seen, Blocks provide an incredible
  amount of flexibility and versatility to a site.
• Weve 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 isnt
  anything within a Block that will hurt your site.
  So have some fun and experiment around.
• Now that we have layout under our belts, its
  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
Conclusion

• This completes the OSU Drupal 6 Formatting Blocks
  tutorial. For additional tutorials, please visit
  WebTrain, the CWS web publishing training site,
  at
• http//oregonstate.edu/cws/webtrain
• 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