Drupal 7 Node Displays Tutorial

Drupal 7 node displays

Drupal 7 Nodes

Nodes on a Drupal site can be displayed in several different modes. Each useful in a different context. For each mode, we can configure what content gets displayed and how it is formatted. In this tutorial we'll look at the different node modes and how to manage how they're displayed. Drupal provides several different display modes for nodes.

Types of Nodes

The two most familiar ones are full nodes and teasers.

  • Full nodes are displayed when we're at a node URL, such as we are here at node/two. In full mode, by default all node fields and options are displayed as we can see on this page.
  • Teasers, on the other hand, are designed to be summaries of nodes. They're useful when we want to provide a list of nodes, and together these two provide the familiar style of many blogs where you have a river of node posts and then you click to the title to get to the full nodes. By default, Drupal's home page shows a list of node teasers. Any node that has promote to front page enabled will show up here.

Working with Nodes

So for example I want to go ahead and remove the About Us so I go to the Edit, scroll down to Publish Options, and uncheck this 'Promote to Front Page,' and click Save. I run back to my front page and now that teaser is gone. Teasers are not just displayed on the home page though they can be used in many different areas of your Drupal site where it might be better to provide a summary of nodes. There's even a module called Views that enables you to create your own custom filtered list of teasers.

Changing Display Settings

Now let's take a look at how we can change our display settings. Much of how content displays in different modes can be set under the Content Type Admin Display tab. To get there, we go to Structure > Content Types, and then we click on the Manage Display for the content type you want to work with. Playing around with our article type here, we see two sub-tabs: one for the full note which is called default and then one for the teaser.

Let's work with our teaser. What we see are the three fields that are part of our content type. We can change the labels if we want to, we can change the output formatting (this will be different depending on our field type), and there are a few different other changes we can make. So let's say for example, we wanted to hide the tags label. We simply go to Hidden, click Save, go back to our site, and we see that the tags label that was there is gone but our tags links are still there. Let's go back and change something else.

Click on Content Types and go back to our managed display. We'll go to our teaser and this time maybe we want to change the size of the image. What we notice is that some fields have this gear icon that allows us to do further configuration. Click on it and you can change the image style which will change the size. Let's say, for example, I want to go from thumbnail to something a little bit smaller. I click Update, Save, and run back to our site and now we've got a smaller image. One of the common things people like to change about their teasers is how much text should show up from the body. We can do that through our display settings. Run back to Structure > Content Types > Manage Display, and we see on our full node that we have the body set to default. However, if we run over to our teaser we see that it's set to a different format, summary or trimmed, which is what allows it to be a shorter version automatically.

Summary or Trimmed

Summary or trimmed also gives us this extra configuration that we can click into and also change our trim length. Maybe we want to double the size, so click Update and Save; now we've got more text in our summary. That's great that as a site admin we can control the auto trimming for the body of our teasers, but sometimes the automatic settings are not optimal for specific nodes. In these cases it's nice to allow authors to provide their own custom summaries. We can do this also. Let's go ahead and edit this node; we can do that by clicking on this Edit Summary so that it creates a second box that we now can put a custom summary into. Then they just put in a new headline, scroll down, click save, and now we see the custom summary. If I want I can go back and change that by deleting it and hiding my summary.

Administrative Controls

As a site admin though, you may want to remove this option from authors so that Drupal always uses the auto-trim settings. To do this, we can go to Structure > Content Types > Manage Fields, and then we want to go in and edit our body field. We can scroll down to this setting, Summary Input, and we can disable it. We save our settings, and now when we go back to editor mode we see that the Edit Summary link is gone so now authors can't create custom summaries. In some use cases, this will actually create consistent fields so that your display is always managed. The last thing I want to show you are some of Drupal's other node displays.

Other Node Displays

So far we've just talked about the full node and teaser modes but there are others. To get to one, we can use the search box and the search listing using 'new type of display.' The other area is our XML feeds; we can get to that by going to RSS.XML and this is another type of display. To change these, we can go to the same area under Manage Displays. Now the one trick is that we need to go down to these custom display settings and turn them on. So if, for example, I want to work with the RSS settings, I can turn this on here, click Save, and now I have a new tab that I can change my settings. So say I want to go here and I want to change the style of my image (maybe want to change it to a medium size), and I click Update and Save. I run back to my RSS feed, refresh, and there's now my new image settings.

Summary

In this video we saw that Drupal gives you a considerable amount of control over if content elements are displayed and how they're formatted for different contents. The Manage Display Page is a simple tool for controlling this output. I should note that the settings underneath Manage Displays will only take you so far. If you do find you need even more control, you'll likely need to make these modifications in your site's theme. However, with a little tinkering, you'll find the majority of configuration you can do yourself with just the backend admin.