Dissecting Drupal Pages
May 07, 2009
|
Drupal is a popular open source CMS with a ton of plug-ins
and today we'll learn how to connect the dots and build
context-sensitive page templates with this powerful CMS.
|
Introduction
Get out your crayons and your coloring book! In this chapter you
will learn how to connect the dots and build context-sensitive
page templates. The adventures in this chapter begin by
dissecting how Drupal builds the pages that are delivered to
your Web browser. You will then learn about sitewide variables
so you can split your page templates into a clean HTML framework
with Drupal-served data being injected into the right spots at
the right times. Next, you will learn to draw “outside the
lines” with custom page variables and page templates based on
categories, page aliases, and content types. And for those who
don’t like to color at all, the chapter wraps up with
information on creating print-friendly templates and building a
mobile-friendly clone of your Web site. In this chapter you dive
into the guts of a Drupal theme. Note that the code snippets
included here require a basic understanding of PHP, CSS, and
XHTML.
Elements of a Page
When you understand how Drupal builds its themes, it becomes
very easy to achieve complicated tasks. A common question is, “I
need to inject a block into the content of the front page—how do
I do that?” This is not how Drupal thinks about this problem, so
the answer seems very difficult. Instead of thinking about the
page as it appears in the Web browser, you must think about each
of the elements separately. Figure 4.1 illustrates how Drupal
customizes a page with each of its template files.
Click here for larger image
Figure 4.1 - The Drupal page is customized by using many different templates.
The whole page is controlled by the template page.tpl.php.
Within the whole page, several more template files are injected
to customize each of the different components. These templates
theme the output from various modules within Drupal. Block and
node templates are shown in Figure 4.1. Each module that outputs
content to the page will have its own templates, which you can
in turn customize.
Dissecting a Theme
Most themes include a customization of the page, block, and node
templates, which are the main building blocks that are used to
construct the layout of a page. If you are working with a
downloaded theme, look in your theme’s directory for the
following files:
- page.tpl.php
- block.tpl.php
- node.tpl.php
These three files are the building blocks that define the
markup of your site. In-depth information on customizing
page.tpl.php appears later in this chapter, and additional
information on customizing node.tpl.php can be found in Chapter
5.
Here is another analogy for thinking about the Drupal page
template: It is a little bit like a large parking garage with
numbered spaces. The garage itself does not care which kind of
car or truck or motorcycle is parked in each space; it merely
houses the lines that show each of the areas where a vehicle
might fit. The garage might have different colors for each of
the levels to make it easier for people to remember which level
they are parked on. The people who operate the garage may have
rules about which space each person may park his or her vehicle.
It is impossible to park your vehicle in two places at the same
time in the parking garage.
In Drupal terminology, the page template defines regions (levels
in the parking garage) where blocks may appear (assigned spaces
for parked vehicles). A single block may not appear more than
once in a page (cars may be parked in only one space at a time);
however, this region can change location within the page
template depending on the context (parking garages may have
different colors for each level in the garage). Later in this
chapter you will learn how to assign new blueprints to your
“parking garage.”
This analogy is not a perfect one, of course: In real life, a
vehicle can park somewhere other than its assigned place. In
contrast, blocks in Drupal may be assigned only one spot
throughout the Web site. Nevertheless, the parking garage
analogy is a helpful way to think about how the page template
keeps order without being aware of the displayed content of a
page.
Drupal Front End
Sitewide Page Variables
|
