The Definitive Guide to Drupal 7

Preprocess Functions in Action

There are so many things you can change using preprocess functions that we can’t possibly get into all of them. Now that you’ve got your preprocess function all set up and are aware of how to view existing variables, you are equipped with enough knowledge to start making some changes. Let’s just jump right in and get started with a few practical examples of how to use preprocess functions.

Add Classes to Template Wrappers

In the DGD7 theme at, the header, sidebar, and footer areas are black and the content area is white. In order to style the contents of each of those sections more easily, you can add a couple of helper classes to the region wrapper. To do this, you’ll need to implement a preprocess function for the region theme hook in your template.php file; see Listing 16–8.

Listing 16–8. Adding classes to the region wrapper <div> using the $classes_array variable in template_preprocess_region()
  1. <?php
  2. /**
  3.  * Implements template_preprocess_region().
  4.  */
  5. function dgd7_preprocess_region(&$variables) {
  6. $region = $variables['region'];
  8. // Sidebars and content area need a good class to style against. You should
  9. // not be using id's like #main or #main-wrapper to style contents.
  10. if (in_array($region, array('sidebar_first', 'sidebar_second', 'content'))) {
  11. $variables['classes_array'][] = 'main';
  12. }
  13. // Add a "clearfix" class to certain regions to clear floated elements inside them.
  14. if (in_array($region, array('footer', 'help', 'highlight'))) {
  15. $variables['classes_array'][] = 'clearfix';
  16. }
  17. // Add an "outer" class to the darker regions.
  18. if (in_array($region, array('header', 'footer', 'sidebar_first', 'sidebar_second'))) {
  19. $variables['classes_array'][] = 'outer';
  20. }
  21. }

$variables['classes_array'] turns into $class in the process phase, and the class(es) added during preprocess are automatically modified as a result. So, just like that you’ve added a class to a region wrapper <div>.

The alternative in template files is lengthier. Adding logic to each affected template file would be required, which means you’d need to override the file, even if you didn’t need to change the markup. If you have multiple template files for regions, the change would have to be made manually across all of them, which is clearly less efficient as you can see in Listing 16–9.

Listing 16–9. Adding classes in preprocess functions can dramatically increase the efficiency of your CSS code.
  1. /* Using classes and ID's provided by default. */
  2. #header fieldset,
  3. #footer fieldset,
  4. .sidebar fieldset {
  5. border-color: #333;
  6. }
  8. /* Using the class added in Listing 16–8, which is more efficient. */
  9. .outer fieldset {
  10. border-color: #333;
  11. }

Making Changes to Nodes

Listing 16–10 demonstrates making three changes:

  1. Drupal’s page title prints in page.tpl.php. When a node title prints inside of the node.tpl.php file, it’s usually because it’s being viewed in teaser mode, and therefore, the node title is marked up with an <h2> by default. Usually, the content inside the node body also contains one or more <h2> tags. Adding a class to single out the node title can make styling easier. Listing 16–10 utilizes the $title_attributes_array to add a node-title class to help make styling easier.
  2. When viewing a node that has a comment form directly under the node links, it doesn’t make much sense to have an “Add new comment” link as well. In Listing 16–10, the comment links are hidden when the comment form is below it by using the hide() function, which will be covered in more detail later in this chapter.
  3. Designs often call for differences when viewing the teaser of a node versus the full page. Listing 16–10 demonstrates using $variables['teaser'] to suppress the $submitted information and truncate the node title to 70 characters when viewing in teaser mode.
Listing 16–10. Demonstrates making changes to the display of node content during preprocess.
  1. <?php
  2. /**
  3.  * Implements template_preprocess_node().
  4.  */
  5. function dgd7_preprocess_node(&$variables) {
  6. // Give the <h2> containing the teaser node title a better class.
  7. $variables['title_attributes_array']['class'][] = 'node-title';
  9. // Remove the "Add new comment" link when the form is below it.
  10. if (!empty($variables['content']['comments']['comment_form'])) {
  11. hide($variables['content']['links']['comment']);
  12. }
  14. // Make some changes when in teaser mode.
  15. if ($variables['teaser']) {
  16. // Don't display author or date information.
  17. $variables['display_submitted'] = FALSE;
  18. // Trim the node title and append an ellipsis.
  19. $variables['title'] = truncate_utf8($variables['title'], 70, TRUE, TRUE);
  20. }
  21. }

Add a Change Picture Link Underneath the User Photo

As you’ve probably noticed by now, there are many variables available to you within the $variables array. These variables can be used to create new variables very easily. You know the path to edit a user profile is user/UID/edit, so you can use the information inside of $variables to determine whether or not the user viewing the page is the account holder. Once you’ve determined this, you can easily create a variable containing a link for the user to edit the photo everywhere it appears on the site by implementing template_preprocess_user_picture(), as shown in Listing 16–11. Once you do this, you’ll be able to print it in the corresponding template, user-picture.tpl.php, as shown in Listing 16–12.

Listing 16–11. Creating a Custom Variable for the user-picture.tpl.php by Implementing template_preprocess_user_picture().
  1. <?php
  2. /**
  3.  * Implements template_preprocess_user_picture().
  4.  * - Add "change picture" link to be placed underneath the user image.
  5.  */
  6. function dgd7_preprocess_user_picture(&$variables) {
  7. // Create a variable with an empty string to prevent PHP notices when
  8. // attempting to print the variable.
  9. $variables['edit_picture'] = '';
  11. // The account object contains the information of the user whose photo is
  12. // being processed. Compare that to the user id of the user object which
  13. // represents the currently logged in user.
  14. if ($variables['account']->uid == $variables['user']->uid) {
  15. // Create a variable containing a link to the user profile, with a class
  16. // "change-user-picture" to style against with CSS.
  17. $variables['edit_picture'] = l('Change picture', 'user/' . $vars['account']->uid . '/edit',
  18. array(
  19. 'fragment' => 'edit-picture',
  20. 'attributes' => array('class' => array('change-user-picture')),
  21. )
  22. );
  23. }
  24. }
Listing 16–12. Printing your custom variable Into the user-picture.tpl.php file, which you’ve copied into your theme to override
  1. <?php if ($user_picture): ?>
  2. <div class="user-picture">
  3. <?php print $user_picture; ?>
  4. <?php print $edit_picture; ?>
  5. </div>
  6. <?php endif; ?>

You are reading content from two chapters on Theme Development from The Definitive Guide to Drupal 7, written by Jacine Luisi and published by Apress on July 19, 2011. All rights reserved.