Simplify Complementary Content with View Mode Pages

Aaron Manire // July 2012

When building a website, you may discover that you have pages that have a complementary relationship to one another.  No, not “complimentary”, they aren’t full of flattery and adulation, although they certainly could be! I mean that the pages have some kind of paired or matching relationship to each other. It could be that one page always links to a related subpage.  For example, you might have a staff profile page that always links to an extended staff profile.  Sure, you could create an extended staff profile content type and a reference field between the two, but if you delete a staff page, you’ll have to go and delete the corresponding staff profile page. The relationship is somewhat confusing and could easily get scrambled or drift out of sync over time. And what if you need to add another type of page to this relationship? It gets messy fast.

Sometimes it just makes more sense to bundle the content together in a single entity (node, in this case) that displays in different ways at different URLs. The Display Suite and Views modules provide robust interfaces for extending and displaying view modes, but they can be a bit heavy-weight and clumsy for such a simple task. Sometimes we just want a simple solution with a small footprint. Enter custom view modes and the View Mode Page module.

Prior to Drupal 7, we were limited to just the “Teaser” and “Full node” view modes for node content types. Drupal 7 introduced the ability to add custom view modes to your entities using the hook_entity_info_alter() function. So, for example, we have a field on our content type called “Additional Information” that we want to display on a follow-up page to our regular Staff Profile page. We’ve hidden this field on our default Staff Profile pages but we’ll want to display it on our extended pages. To add a view mode called “Extended”, just add the following snippet to a custom module:

function yourmodule_entity_info_alter(&$entity_info) {
  $entity_info[‘node’][‘view modes’][‘extended’] = array(
    ‘label’ => t(‘Extended’),
    ‘custom settings’ => TRUE,
  );
}

While you’re working with your module code, go ahead and download and install the View Mode Page module.

Now, when you navigate to the Manage Display screen for the Staff Profile content type, click “Custom Display Settings” to see the Extended view mode.

Congratulations, you have just created a custom view mode!

Now enable the new Extended view mode and you will see a subtab next to Default where you can configure your field display. Let’s move the Additional Information field below the Body field.

Did you notice that collapsed “View Mode Pages” fieldset? That’s where we tell our Extended page view mode where it should display. Let’s assume that our extended staff profile pages exist at “staff/[name]”. We want our extended staff profile to be at the same URL as our regular profile page, but with the addition of “/extended”.  So we will use a % menu wildcard to pass through the unique identifier information for the staff profile page.

And that’s it. You now you have a pair of pages created from a single node with a user interface that is tightly integrated with Drupal Core.

Aaron Manire Headshot

Aaron Manire

Director of Web Development

I coordinate Drupal development teams and plan technological growth, and like to get my hands dirty with code when I can. I enjoy that at Isovera I’m constantly learning new things, sharing that knowledge with others, and working with the terrific people who make our work possible.

Filed under: