The Drupal Page
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
)
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.
In Chapter 3, you created with a basic page template that contained only Drupal output and a skeleton HTML framework. You will now start to build on these basics to create a more sophisticated page template.