Drupal is well suited for community plumbing, alright. But what if you want to apply its power, elegance, and simplicity to your corporate website? In this article, we explain our approach to creating a corporate website with Drupal, show you how to create your templates and arrange your content. So why would you want to enter into such a formidable endeavor?

• Both the layout and the underlying HTML of our old website needed a face lift.
• We specialize in sophisticated content management solutions, yet our website consisted of static HTML pages with an absolute minimum of PHP code to avoid the worst code duplication. We knew we could do better.
• At times we were slow to post updates of our site. The process of doing so should be more straight forward.

Our requirements

Our requirements were quickly set:

• The site layout should remain largely as is, with two thirds for the main content area and a column of news headlines on the right.
• There is a flat list of sections with articles, some of which arrange the teasers in two, others in a single column.
• The sections can be accessed by a dynamical list of tabs at the top of the page.
• Sections should have simple URLs, with some other articles having intuitive URLs as well.
• The page structure is such that the front page features article or section teasers.
• Initially, there will be no community features like comments.
• Content should be editable through its front end view.
• The site should validate as XHTML, and should further follow the guidelines for barrier free web sites.
• Text formatting should be using Textile markup.
• Technically, there should be as little as possible software development on top of stock Drupal. However, we wanted to develop templates using the PHPTAL engine and knew we would have to transform one of the standard Drupal templates to this notation first.

The ingredients

We started development with the following ingredients:

• Drupal 4.5.1
• The contributed modules collimator.module, image.module, image_filter.module, and textile.module
• Our own contributed theme engine phptal.engine
• The stock Marvin theme

The front page should look like this:

A dynamic horizontal tab menu

The most prominent feature here is the horizontal navigation tabs. This has become a popular arrangement recently, very often enhanced with drop-down menus. In our case, there are no drop-down menus. The underlying implementation, however, should be easily extended to host these as well.

Three standard features of Drupal, a PHP theme function and a little CSS magic are used to implement the horizontal tab menu. The features are

• Taxonomies. We use a separate vocabulary "Sections" to organize content:
  
• The menu is not linked directly to this vocabulary as would the Drupal module taxonomy_menu.module do, but rather is created through a customized menu:
  
  This allows to link menu entries to taxonomy pages, individual nodes or two column pages generated by the collimator.module.
• Finally, links in the menu are cleaned by assigning URL aliases to menu entries:
  

For example, the entry "partner" links to partner which is an alias for collimator/4, i.e. the two column listing of teasers for topic 4 ("Lebendiges Netzwerk").

What remains is a function that renders the menu:

function _contaire_menu($pid = 1) {
  $menu = menu_get_menu();

  $entries = array();
  if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children'])
 {
    foreach ($menu['visible'][$pid]['children'] as $mid) {
      $style = (count($menu['visible'][$mid]['children'])
        ? (menu_in_active_trail($mid)  
          ? 'expanded' : 'collapsed') 
          : 'leaf');
      $entry = array('style' => $style, 'link' => theme('menu_item', $mid));
      $entry['kids'] = _contaire_menu($mid);
      $entries[] = $entry;
    }
  }
  return $entries;
}

function contaire_menu($pid = 1) {
  return _phptal_callback('_menu',
    array('pid' => $pid, 'entries' => _contaire_menu($pid)));
}

In the PHPTAL theme engine we use, this function can be written into the template.php file of our theme and be called from the file page.tal as

  <div id="header">
    ...
    <div tal:content="php:contaire_menu(26)" />
  </div>

Here 26 is the menu entry for our custom menu.

A new teaser.module

Except for the horizontal navigation, the front page looks like standard Drupal, but looking more closely, even here there are interesting details:

• Each teaser has a picture associated with it.
• The teaser pictures float automatically to the left and right.
• The "weiter" links are placed behind, not below the teaser texts.

There is one feature not visible on the site as presented to the public that are little edit buttons placed to the right of the headlines. These become necessary because we haven't linked our headlines to a detail view with tabbed local tasks, and

• the "weiter" link may link to an arbitrary URL.

We have created a small Drupal module to provide these features.

Two columns, but sorted, please

Porting our original content we needed a way to layout some pages in two columns. One example is our partners page where in addition to the two columns we have an introductory text at the top. We quickly settled on the contributed collimator.module but had to patch it to give us control over the way it sorts articles. The collimator offers the standard modes by-date and by-title to sort. We wanted to control sorting explicitly and abused a new node field teaser_weight for this. The abuse here is that actually this field should be a property of the table term_data but there is no easy way to add this without patching the taxonomy.module. We provided our changes as a patch to the collimator.module.

The single column text at the page top is simply the description of the page's taxonomy term, fed through Textile.

Conclusion

We just love our new page! Once we decided on the selection of modules and exactly for which features we would have to write some code the actual effort was well worth it. The phptal.engine has had its first live test and proved fun to work with.

All in all, Drupal again showed its greatness and that - with a little thought and planning - it can be used for many a corporate website.

printer-friendly version