Tuning taxonomy pages with Page Manager, Panels, Views and custom “build modes” in Drupal 7

Drupal ships with a lot of great things. One of these is Drupal’s taxonomy system. It allows us to categorise content and build listings automatically. Great for keeping track of our content, and the search engines love it too.

Still, it is not that easy to have the taxonomy listing be exactly how we want them to. Not a shame, we can take control over them quite easily.

Taxonomy listing?

Whenever we click on tags Drupal brings us to these listings. Out of the box, they have the url taxonomy/term/9 (taxonomy/term/tid).

The problem with default taxonomy listings in Drupal

Basically, we have three problems with the way Drupal outputs the taxonomy listings:

• It displays all nodes of all content types tagged with the term. We want to control which content types to display on the listings.
• Each content type is displayed in the same way in the listing. We want to change the display based on content type. For instance, display articles with the title and tags; stories on the other hand should contain the title and teaser.
• Each term listing has the same layout. We want to have different layouts for different terms.

Grabbing control

The solution for our issues comes in four parts.

First, we need to take control over the taxonomy pages. Ctools’ Page Manager does exactly that. It allows us to specify what should be displayed on the Drupal paths like node/% and taxonomy/term/%.

Now we have control over the taxonomy pages (ehm, the menu callbacks), we want to do something with it. Meet the Panels module. This module allows us the make crazy layouts. So instead of the normal Drupal taxonomy listing, Page Manager will display a panel instead.

The great thing with Page Manager is we not only control the general taxonomy pages, but we can be very specific to state which panel handles which taxonomy term. So we now can have different layouts for different taxonomy terms.

Panels itself needs content to display. Because we want to list the nodes that are tagged, we are going to build a view for that and feed the view back to the panel. Because it’s a view, we can do all nice things like determining the fields and adding filters. We can filter the view on node type, which solves our first problem. So we need the Views module.

Finally, having control over the views fields is great, but it’s not such a great solution to control the way each node type is displayed. This is because the field settings are determined for all content in the view. So if we want to display the body field for articles, but we don’t want to do that for stories, we’re stuck.

Not too bad, let’s just write create a custom “build mode”. This “build module” will allow us to specify the fields on the content type visibility settings. We just set the body field visible for article, but hide it for the stories. Problem solved!

Let’s build this thing!

I want to make the taxonomy pages in Drupal 7 prettier. So I’m using Views 7.x-3.0-beta3, ctools 7.x-1.0-alpha4 and panels 7.x-3.0-alpha3. I see some errors flying around, but the thing is not exploding!

Starting with the custom “build mode”

Writing a custom “build mode” in Drupal 7 is easy. The hook hook_entity_info_alter allows us to specify new build modes.

/**
 * Implements hook_entity_info_alter().
 * 
 * We want to add a custom build mode to display nodes in taxonomy listings
 * differently.
 * Using build modes we can determine which fields will show up on the taxonomy
 * listings on a per node basis.
 *
 * Reference:
 *   http://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_entity_info_alter/7
 *   http://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_entity_info/7
 */
function gluecode_entity_info_alter(&$entity_info){
  $entity_info['node']['view modes']['taxonomy_listing'] = array(
    'label' => t('Taxonomy listing'),
    'custom settings' => TRUE,
  ); 
}

The screenshot below shows the content type display settings before we enabled our module with the hook.

The one below shows a tab ‘Taxonomy listing’ which is the new “build mode” we just specified. We will find this new tab on each content type. By dragging fields to the hidden area, we make sure the fields won’t be displayed (for this build mode).

As the screenshot above shows, we not only determine which fields to display, but also if the label should be visible and which format to use.

Since we the build mode is set per content type, we now have a means to display articles differently than posts within the same view.

Creating the view

Go to admin/structure/view to create the view. Just enter the name like “Taxonomy listing” and leave all other settings untouched. We will change some of them in the next step. So go ahead and click ‘Continue & edit’.

This will bring us to the screen below.

Now we need to change some settings. For one, change the teaser in “Show: Content | Teaser” to ‘Taxonomy listing” by clicking on it. This opens a window where we change “View mode” to “Taxonomy listing” as shown below.

Next, we want to filter the content of the view on taxonomy terms. So go to the “Advanced” section” and add a “Contextual filter”. Select “Taxonomy: Term ID” and hit “Add and configure contextual filters” as shown below.

Before we hit apply we need to check “Provide default value” and select “Taxonomy Term ID from URL”.

Now we have our view set up as we want it. We could save it as it is. But we can also make sure no unwanted content types show up on the taxonomy listings. We control this by adding a filter on content type as shown below.

Of course, we could add any filters we want.

Just save the view because we’re really done.

Last stop: Page Manager and Panels

Go to admin/structure/pages and enable the “Taxonomy term template”. It now controls the pages we see when clicking on taxonomy terms.

Now we need to instruct the Page Manager what to do when somebody clicks a taxonomy link or hit those taxonomy/term/tid url’s. So click "configure" and add a “new variant”.

We want to use Panels to control the page so go ahead, select it and click ”create variant”.

Select a layout.

Give it a name and hit ”update and save”.

I also checked “Disable Drupal blocks/regions” so the panel takes over all the regions in my theme. It basically gives it free reign to put blocks wherever it wants to and dumps the other regions such as the sidebars. We don’t really need this. It’s just personal taste.

Now we can add the content.

Set the title to “%taxonomy_term:name” which is a placeholder for the taxonomy term name as shown below.

We find three columns in the user interface (or some other composition depending on the layout we selected). In each of these columns we can add content (this is just normal panels stuff).

What is important to us is to add the view we just created as content in the panel. So we click the little gear icon and select “add content”. This will pop up the window below.

Under the tab “Views” we can select out view. So let’s do that.

Once selected it will ask us which display we want to use. We only created one so it doesn’t matter, but in other cases you could specify the exact view display.

Note, Master is just the default view (in our case it’s the same as the page display we created).

We don’t need to add a context since the view will use the term id in the url to determine which nodes to show). So we can just click ‘finish’ and have everything set up.

We can add other content in the columns like taxonomy description or blocks, nodes and such. I added some content in the central column and an advanced search box in the right. It’s to your liking what content you want to display on these taxonomy listings.

Just hit save and we have now tamed the taxonomy to display its content to our liking!

Go click on a taxonomy term in the front-end to view the listing we just created. Isn’t she a beauty?!

Some afterthoughts

What about having different layouts for different terms?

What about Drupal 6?

Things will work just the same in Drupal 6 except for our code to create a “build mode”. We find the code for Drupal 6 listed below.

/**
 * Implements hook_content_build_modes().
 *
 * We want to add a new content build mode which will
 * be used on the taxonomy overview pages.
 * 
 * Per content type, we want to say which fields should be
 * included on the taxonomy pages.
 *
 * References:
 *   http://data.agaric.com/raw/adding-node-build-mode
 *   http://api.lullabot.com/simplenews_content_build_modes
 */
function gluecode_content_build_modes() {
  return array(
    // Use name module to avoid namespace conflicts.
    // If we put 'basic' we will override the node module's settings
    // so full node and teaser will disappear.
    'gluecode' => array(
      // This is the tab that will be displayed on the content type display field settings.
      // It will be cached so clear caches if you change the title.
      'title' => t('Taxonomy listing'),
      'build modes' => array(
        'taxonomy_listing' => array(
          // This will show up in views
          // and it will be the title in the content type display fiels settings table for Taxonomy listing in view.
          'title' => t('Taxonomy listing'),
          // We want to be able to select it in views.
          'views style' => TRUE,
        ),
      ),
    ),
  );
}