This chapter is from the book
This chapter is from the book
This chapter is from the book
Grid Work
In Chapter 1 of this book, you read about Web page design and were introduced to “regions” within a page template. Now you are ready to define the regions within your own page template and to then insert information into these defined spaces. There is no limit on how large or small a region can be within your page template. You may choose to stack many blocks into a region, or you may prefer to have only one block contained in a region. Figure 4.6 shows five of the regions available in the Zen theme as black bars. As you can see, the sizes of these regions differ depending on their location in the page.
)
Figure 4.6 Five regions in the Zen theme, each with a different position and size.
Regions
Regions are used to place Drupal “blocks” into a Web site. These blocks may include site navigation menus, custom views, module tools, or custom PHP snippets. To see a list of the blocks that are currently available for your site, navigate to Administer, Site building, Blocks. Figure 4.7 shows the blocks that are available for the Hear the North site. This Web site has only a few modules installed, including a newsletter management tool Simplenews.
)
Figure 4.7 Blocks available on the Hear the North Web site.
You can adjust the placement of these blocks by dragging and dropping the crosshair icon to a new region. To enable disabled blocks, drag them to a new region. To disable blocks, drag them back to the “Disabled” section. After updating the placement of blocks, you must click the button “Save blocks” to commit your changes to the database. You may also change the order of several blocks within a region using the same technique.
Adding a new region to your template is a multistep process:
Edit your theme’s info file and add the regions as follows:
regions[new_region_name] = Human-readable region name regions[second_region_name] = Another region name
Edit the file page.tpl.php and print your new regions to the structure of your page. Use the variable names you established in your theme’s info file.
<?php print $new_region_name ?>
- Clear the cache to reset the theme registry and enable the new regions. Navigate to Administer, Site configuration, Performance. Scroll to the bottom of the Web page and click “Clear cached data.”
- You should now be able to place blocks into your new regions by navigating to Administer, Site building, Blocks.
Here is the basic page template repeated from Chapter 3. A few changes have been made including the inclusion of new HTML divisions and one new region (marked in bold) that can be positioned with CSS. Putting these regions after the main content of the site will make the content appear more important to search engines, thereby increasing its rank in search engine results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>"> <head> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?> </head> <body class="<?php print $body_classes ?>"> <div id="main"> <div id="page_title"><?php print $title; ?></div> <div id="utils-help"><?php print $help; ?></div> <div id="utils-messages"><?php print $messages; ?></div> <div id="utils-tab"><?php print $tabs; ?></div> <div id="main_content"><?php print $content; ?></div> <div id="utils-rss"><?php print $feed_icons; ?></div> <div id="new-region-name"><?php print $new-region-name; ?></div> </div> <div id="sidebar-left"><?php print $left; ?></div> <div id="sidebar-right"><?php print $right; ?></div> <div id="footer"><?php print $region_footer; ?></div> <?php print $closure; ?> </body> </html>
Blocks
With your regions established, you can now fill them with blocks. Blocks may be generated by Drupal core modules, contributed modules, or custom PHP snippets, including lists of content created by the Views module. For more information on creating a custom view, refer to Chapter 2.
Commonly used blocks include the following:
- Navigation menus (created in Administer, Site building, Menus)
- Lists of content (Views module; see Chapter 2)
- Login forms (Drupal core; turned on by default)
- Site categories (Drupal’s Taxonomy module)
- Recent comments (Drupal’s Comment module)
- Search (Drupal’s search module)
- Author information (Drupal’s profile module)
- Five-star ratings (http://drupal.org/project/fivestar)
- Facebook, Digg, and social bookmarking links (http://drupal.org/project/service_links)
- Similar entries (http://drupal.org/project/similar)
You can also create custom blocks with text, images, and even your own snippets of PHP code. Sample PHP snippets are available from the Drupal Web site at http://drupal.org/node/21867. To create a custom block, follow these steps:
- Navigate to to Administer, Site Building, Modules and enable the PHP Filter module. You may also need to adjust the permissions for this input format by navigating to Administer, Site configuration, Input formats and clicking on the “configure” link next to PHP filter.
- Navigate to Administer, Site building, Blocks.
- Select the tab “Add block.”
- Add a “Block description.” This description specifies how the block will be identified in the administration area and is a required field.
- Add a “Block title” if you would like a title to appear at the top of the displayed block. This field is optional.
- Put your text, images, and PHP snippet into the “Block body.” You could also use plain text or HTML markup here if it was appropriate for your block.
- Update the “Input format” to PHP.
- Adjust the visibility settings for the “User,” “Role,” and “Page” roles.
- Scroll to the bottom of the Web page and click “Save.”
PHP snippets in blocks
Blocks with custom PHP snippets could break the display of your site if they contain errors. Be sure to carefully test your snippets before placing them into a block. Place your PHP snippet into the body of a private page to confirm that it will not break your site before deploying the snippet as a block.
Sites will sometimes have more screen real estate dedicated to blocks than to the main content on each page, especially when the blocks provide additional information for the node that is displayed on the page, such as author profile information or related content. Don’t be shy! Enable the most appropriate blocks for each part of your Web site. Blocks are included in Drupal’s caching system and will not harm the overall performance of your site. To enable caching for blocks, navigate to Administer, Site configuration, Performance. Under the section “Block cache,” choose “Enabled.” Scroll to the bottom of the Web page and click “Save configuration.”
Customizing the Markup of Blocks
You may change the markup of the blocks displayed in your page template by creating a new template file, block.tpl.php. Drupal’s default for this template contains only a few wrapper HTML elements:
<div id="block-<?php print $block->module .'-'. $block->delta; ?>"
class="block block-<?php print $block->module ?>">
<?php if ($block->subject) { ?>
<h2><?php print $block->subject; ?></h2>
<?php } ?>
<div class="content">
<?php print $block->content ?>
</div>
</div>
For blocks provided by Drupal core, the variable $block->delta represents the order in which this block was created. For example, the first block has a delta value of 1, the second has a delta value of 2, and so on. In rendered HTML, the first line would look like this:
<div id="block-user-1" class="block block-user">
As you can see, the output is not nearly as complicated as the variables would suggest! Check the output to see what your module is using for its delta value. Some modules provide a text delta instead of a numeric delta.
A full list of block template variables is available from the default block template. This file can be found in your Drupal system files: modules/system/block.tpl.php. A full list of the variables is also available online at http://api.drupal.org/api/file/modules/system/block.tpl.php.