Diggin' Drupal Gardens
504: Engineering Blocks
This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
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:
1.
Open another tab in your browser
2.
In your new tab, go to http://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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
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…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
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 twocolumn one.
Three-Column Layout
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Two-Column Layout
5
Blocks: Overview – Blocks Manager
Let’s go to Admin menu > Structure > Blocks
and explore the Blocks manager:
1
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
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
Blocks: Overview – Block Region Demo
To get a visual idea of how the
regions are laid out, do the
following:
2
1
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.
3
To close out of the demo, click
the Exit block region
demonstration tab in the
upper left of the screen
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
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.
Gallery
Block
Gallery
Block
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
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.
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Blocks: Basic Configuration – Ex. 01 Configure Block Title Visibility
1
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:
2
1.
Locate the Book navigation block and click
the configure link
2.
Type <none> in the Block title field
3.
Click the Save block button
Close the Block manager overlay to view
your results.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Blocks: Basic Configuration – Ex. 02 Configure Page Visibility
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.
1
Let’s do this with our Stay Connected
block:
1.
2
2.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
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
Blocks: Basic Configuration – Ex. 02 Configure Page Visibility – Configure
Once the configuration overlay
loads:
1.
2.
3.
Show block on specific pages
option = Only the listed pages
In the text box, type <front>
Click the Save block button
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
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:
1.
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Locate the Who’s Online block on
your Blocks Manager and click its
configure link
Blocks: Basic Configuration – Ex. 03 Configure Role Visibility – Configure & Enable
Once the configuration panel opens:
1.
2.
3.
4.
5.
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
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.
Who’s Online block only
visible to logged in users
Now, let’s take a look at how Blocks and Menus work together…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Menus: Overview – Menu Manager
1
The Menus manager is where a list
of all available menus on the site
exists.
2
This is where to go to quickly order
groups of menu links and add new
menus.
3
To view the Menus manager:
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
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 – Reorder 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 dragging it to the right, beneath
another item.
3.
Click the Save configuration button when
you are done ordering things.
1
2
Now return your items back to their original order
(remember to click the Save configuration button when
finished).
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu Block – Define Menu
1
To create a custom menu block, from
within the Management menu:
1.
2
2.
3.
4.
5.
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
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.
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:
1.
Click the Add link tab at the top of the
screen.
2
2.
Menu link title field = ChooseMyPlate.gov
3.
Path field = http://www.choosemyplate.gov
4.
1
3
4
Description field = Link to the USDA’s food
group guidelines
5.
Weight field = -50
6.
Click the Save button
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
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:
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.
1
Click the Save blocks button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
Menus: Custom Menu Blocks – Ex. 04 Create Of Interest Menu – Completed
The Of Interest block will appear
beneath the Book navigation block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
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:
1.
2.
Click on the Cooking Companion link in
the Book Navigation block and open it in
Edit mode.
Go to the Menu settings tab and do the
following:
Check the Provide a menu link checkbox
Weight field: -49
2
3.
4.
Click the Save button.
A new link appears in the Main menu
4
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Menus: Contextual Menus – Ex. 05 Create Contextual Menu – Configure Book Navigation Block
Now, let’s get in and tackle the Book
navigation block:
1.
1
2
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
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
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…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
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:
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.
1
2
The block will not show because we
don’t have a poll created yet, so let’s
make one…
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
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:
1
2
3
1.
2.
3.
4
4.
5.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
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
Beyond Menus: Ex. 07 Gallery Block – Add Media
To add pictures, do the following:
1.
2.
3.
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Beyond Menus: Ex. 07 Gallery Block – Remove Sample Images
1
To remove the sample images:
1.
2.
3.
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
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Delete Samples
1
To configure the Rotating Banner
block:
1.
2.
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
44
Beyond Menus: Ex. 08 Rotating Banner Image – Configure – Add New Image
1
Now let’s pull up some new pictures:
1.
2
2.
3
4
3.
4.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
Click the Add a new slide to this
banner link
When the Media dialog box
appears, browse to your ex-08banner-images folder and open the
linguini-clams.jpg file
Click the Upload button
The image will appear
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.
1.
2.
3.
4.
Layout field = Top right
Banner headline field = See Food
Banner text field = paste text from
Ex. 08
Link field = book/cooking-companion

5.
1
2
3
The Link field Is optional, we’re just hooking
it to our Cooking Companion for
convenience
4
5
Click the Save button
Upload the remaining images.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
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:
1
2
1.
2.
Click on the Banner settings fieldset
to open it
Transition type field = Fade
These settings can be changed as
desired at any time
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
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:
1
2
1.
2.
3.
4.
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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
4
48
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
Conclusion
This completes our Diggin’ Drupal Gardens tutorial. For additional tutorials please
visit CWS Training at:
http://oregonstate.edu/cws/training/view/training-materials
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51