Drupal 7 Fields/CCK: Field Display Management

Exclusive offer: get 50% off this eBook here
Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Fields/CCK Beginner's Guide — Save 50%

Explore Drupal 7 fields/CCK and master their use

$26.99    $13.50
by Dave Poon | July 2011 | Open Source

One of the most important milestones in Drupal was the Content Construction Kit (CCK). Most of this module has been integrated into Drupal 7 core. It is now called Field API. So when you install Drupal 7, it will come with this powerful module in core, and you can start to create custom fields for your site without downloading an extra module.

In this article by Dave Poon, author of Drupal 7 Fields/CCK Beginner's Guide, we shall learn about:

  • Field display
  • Formatting field display on Teaser view
  • Custom display settings
  • Formatting image field display on full content
  • Formatting comment field display
  • Formatting vocabulary field display

 

Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Fields/CCK Beginner's Guide

Explore Drupal 7 fields/CCK and master their use

<!-- /node -->

        Read more about this book      

(For more resources on Drupal, see here.)

Field display

The purpose of managing the field display is not only to beatify the visual representation of fields, but also to affect how people read the information on a web page and the usability of a website. The design of a field display has to seem logical to users and easy to understand.

Consider an online application form where the first name field is positioned in between the state and country fields. Although the application can gather the information just fine, this would be very illogical and bothersome to our users. It goes without saying that the first name should be in the personal details section while the state and country should go in the personal address section of the form.

Time for action – a first look at the field display settings

In this section, we will learn where to find the field display settings in Drupal. Now, let's take a look at the field display settings:

  1. Click on the Structure link on the administration menu at the top of the page.

    Drupal 7 Fields/CCK: Field Display Management

  2. Click on the Content types link on this page.

    Drupal 7 Fields/CCK: Field Display Management

  3. On the right of the table, click on the manage display link to go to the manage display administration page to adjust the order and positioning of, the field labels.

    Drupal 7 Fields/CCK: Field Display Management

  4. Click on the manage display link to adjust the field display for the Recipe content type.

    Drupal 7 Fields/CCK: Field Display Management

  5. This page lists all of the field display settings that are related to the content type we selected.

    (Move the mouse over the image to enlarge it.)

  6. If we click on the select list for any of the labels, there are three options that we can select, Above, Inline, and <Hidden>.

    Drupal 7 Fields/CCK: Field Display Management

  7. If we click on the select list for any of the formats, there are five options that we can select from, namely, Default, Plain text, Trimmed, Summary or trimmed, and <Hidden>.

    Drupal 7 Fields/CCK: Field Display Management

  8. However, the options will vary with field types. As in the case of the Difficulty field the multiple values field, if we click on the select list for Format, will show three options, Default, Key, and <Hidden>.

    Drupal 7 Fields/CCK: Field Display Management

What just happened?

We have learned where to find the field display settings in Drupal, and we have taken a look at the options for the field display.

When we click on the select list for labels, there are three options that we can use to control the display of the field label:

  • Above: The label will be positioned above the field widget
  • Inline: The label will be positioned to the left of the field widget
  • <Hidden>:The label will not be displayed on the page

When we click on the select list for formats, the options will be shown, but the options will be different, and depend on the field type we select. For the Body field, we will have four options that we can choose to control the body field display:

  • Default: The field content will be displayed as we specified when we created the field
  • Plain text: The field content will be displayed as plain text, which ignores HTML tags if the content contains any
  • Trimmed: The field content will be truncated to a specified number of characters
  • Summary or trimmed: The summary of the field will be displayed; if there is no summary entered, the content of the field will be trimmed to a specified number of characters
  • <Hidden>:The field content will not be displayed

Formatting field display in the Teaser view

The teaser view of content is usually the first piece of information people will see on a homepage or a landing page, so it will be useful if there are options that could control the display in teaser view. For example, for the yummy recipe website, the client would like to have the number of characters displayed in teaser view limited to 300 characters, because they do not like to display too much text for each post on the homepage.

Time for action – formatting the Body field display in teaser view

In this section, we will format the Body field of the Recipe content type in teaser view:

  1. Click on the Structure link on the administration menu at the top of the page.

    Drupal 7 Fields/CCK: Field Display Management

  2. Click on the Content types link on the following page:

    Drupal 7 Fields/CCK: Field Display Management

  3. Click on the manage display link to adjust the field display for the Recipe content type.

    Drupal 7 Fields/CCK: Field Display Management

  4. At the top-right of the page, there are two buttons, the first one is Default, the second one is Teaser, now click on the Teaser button.

    (Move the mouse over the image to enlarge it.)

  5. This page lists all the available fields for the teaser view of the Recipe content type.

    (Move the mouse over the image to enlarge it.)

  6. Now click on the gear icon to update the trim length settings:

    (Move the mouse over the image to enlarge it.)

  7. After clicking on the gear icon, which will display the Trim length settings. The default value of Trim length is 600, we change it to 300, and then click on the Update button to confirm the entered value.

    Drupal 7 Fields/CCK: Field Display Management

  8. Click on the Save button at the bottom of the page to store the value into Drupal.

    Drupal 7 Fields/CCK: Field Display Management

  9. If we go back to the homepage, we will see the recipe content in teaser view. It is now truncated to 300 characters.

    Drupal 7 Fields/CCK: Field Display Management

What just happened?

We have formatted the Body field of the Recipe content type in Teaser view.

Currently there are two view modes, one is the Default view mode, and the other is the Teaser view mode. When we need to format the field content in Teaser view, we have to switch to the Teaser view mode on the Manage display. administration page to modify these settings.

Moreover, when entering data or updating the field display settings, we have to remember to click on the Save button at the bottom of the page to permanently store the value into Drupal. If we just click on the Update button, it will not store the value into Drupal, it will only confirm the value we entered, therefore, we always need to remember to click on the Save button after updating any settings.

Furthermore, there are other fields which are positioned in the hidden section at the bottom of the page, which means those fields will not be shown in Teaser view. In our case only the Body field is shown in Teaser view. We can easily drag and drop a field to the hidden section to hide the field, or drag and drop a field above the hidden section to show the field on the screen.

Drupal 7 Fields/CCK: Field Display Management

Drupal 7 Fields/CCK Beginner's Guide Explore Drupal 7 fields/CCK and master their use
Published: July 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Drupal, see here.)

Custom display settings

Currently, we have seen two view modes, the Default view mode and the Teaser view mode. Drupal provides us with more than two view modes where we can adjust the field display. We will take a look at additional field display view modes in the next section.

Time for action – enabling the Full content view mode in custom display settings

The following steps will demonstrate how to enable Full content view mode:

  1. We go back to the MANAGE DISPLAY administration page for the Recipe content type. Click on the CUSTOM DISPLAY SETTINGS link at the bottom of the page.

    Drupal 7 Fields/CCK: Field Display Management

  2. After clicking on the CUSTOM DISPLAY SETTINGS link, which will show the extra view mode options, click the Full content checkbox to enable the Full content view mode. Click on the Save button to store the value.

    Drupal 7 Fields/CCK: Field Display Management

  3. Drupal will display a successful message saying the Full content mode is now enabled, and we can configure full content using the full content view mode on the MANAGE DISPLAY administration page.

    Drupal 7 Fields/CCK: Field Display Management

What just happened?

We have enabled the Full content view mode for the Recipe content type. There are, in total, five view modes in the custom display settings:

  • Full content
  • Teaser
  • RSS
  • Search index
  • Search result

Once they are enabled, we will have the extra options to configure the display of fields. For instance, if we enable the RSS view mode, we have an option to show or hide the image field on RSS feeds. Drupal provides us with an entire solution to customize the field display in a different context.

Formatting the image field display on Full content

The Full content mode is enabled. Now we can configure the field display on Full content. In this section, we will adjust the image field display on Full content. We have created the image style in article, Drupal 7 Fields/CCK: Using the Image Field Modules . We can use it to format the output of the image field display.

Time for action – formatting the image field display on Full content

In this section, we will adjust the image field display on Full content.

  1. We go back to the MANAGE DISPLAY administration page, and click on the Full content link.

    Drupal 7 Fields/CCK: Field Display Management

  2. On this page, we can drag and drop the fields to show or hide fields, and arrange the order of the fields on Full content view. Now we drag and drop the fields as shown in the following screenshot. The order of the fields will be Image, Body, Difficulty, Recipe Category, and File.

    (Move the mouse over the image to enlarge it.)

  3. Click on the gear icon to show the extra options for the image field.

    Drupal 7 Fields/CCK: Field Display Management

  4. After clicking on the gear icon, which provide us more options for the display of the image field, click the Image style select list and select the recipe_med option. Then click on the Update button to confirm the settings.

    Drupal 7 Fields/CCK: Field Display Management

  5. We would like to hide the labels for the Image and Body fields. So, we click on the select list, and select <Hidden> to hide the labels for both fields. After that, click the Save button to store the values.

    Drupal 7 Fields/CCK: Field Display Management

  6. When we go to one of the recipe contents with an image uploaded, we will see the image is resized based on the recipe_med image style we defined. And also the order of the fields is positioned as Image, Body, Difficulty, Recipe Category, and File.

    Drupal 7 Fields/CCK: Field Display Management

What just happened?

We have adjusted the image field display on full content.

The image style we created in the article, Drupal 7 Fields/CCK: Using the Image Field Modules was used for formatting the output of the image field display. In this case, we used the recipe_med image style to format the image field display on the Full content view. We can create a different image style with such image effects and image resize actions as we need, and use it in Teaser view. So we will have complete control over which image styles can be used in which view modes. This is a very useful feature to customize the output of the image field for different view modes.

Formatting the comment field display

In Drupal 7, we can easily format the comment field display through the field user interface. We can adjust the order of the comment fields, the position of the field labels, and the format of the comment field display. For the yummy recipe website, the client would like the comments display to output plain text only. Hyperlinks or images are not allowed in comments. We can easily achieve that using the comment fields display option.

Time for action – formatting the comment field display

In this section, we will adjust the comment field display to output plain text for the Recipe content type. Follow these steps to do so:

  1. Go back to the MANAGE DISPLAY administration page for the Recipe content type. On the top-right of the page, click on the COMMENT DISPLAY tab.

    Drupal 7 Fields/CCK: Field Display Management

  2. On this page, we click on the select list under FORMAT, and select Plain text. Click the Save button to store the value. From now on, all the comment displays will only output plain text, which ignore the HTML tags entered in the comments.

    Drupal 7 Fields/CCK: Field Display Management

What just happened?

We have adjusted the comment field display to output plain text for the Recipe content type.

The user interface in the COMMENT DISPLAY administration page is the same as in the MANAGE DISPLAY administration page. We can easily use the same user interface to control the comment field display. Currently, only the comment field is available for use, but as long as we add more fields to comments, we will be able to control those field displays for the comment output as well.

Formatting the vocabulary field display

As we have seen, the comment field display is configurable in Drupal 7. The good news is the vocabulary field display is also configurable. The new field system gives us the ability of finer control over fields without hacking the core or using contributed modules.

Time for action – formatting the vocabulary field display

In this section, we will hide the Description field display for the Recipe category vocabulary. Follow these steps:

  1. Click on the Structure link on the top of the administration menu.

    Drupal 7 Fields/CCK: Field Display Management

  2. On the following page, click on the Taxonomy link.

    Drupal 7 Fields/CCK: Field Display Management

  3. Then, click on the list terms for the Recipe Category vocabulary.

    Drupal 7 Fields/CCK: Field Display Management

  4. On the top-right of the page, click on the MANAGE DISPLAY tab to go to the MANAGE DISPLAY administration page.

    Drupal 7 Fields/CCK: Field Display Management

  5. Click on the select list under FORMAT, and choose hidden to hide the Description field in the Recipe Category vocabulary. Click the Save button at the bottom of the page.

    Drupal 7 Fields/CCK: Field Display Management

When on the Recipe Category terms, even if we entered content into the Description field of them, the text will be hidden.

What just happened?

We have hidden the Description field display for the Recipe category vocabulary.

We've learned that the vocabulary field display administration page is located in a separate section. Because the fields are related to vocabulary, we need to go to the taxonomy administration page to find the MANAGE DISPLAY administration page.

The user interface of the MANAGE DISPLAY administration page is also the same as the one we have seen for the field display. The only difference is, this page only shows the available fields for the associated vocabulary. The format of the field display is similar to the format for the content type field display.

Have a go hero – adding an image field to the Cooking Tip content type

It's time for a challenge. We have formatted the field display for the Recipe content type. We can use the same method we have learned here to format the existing fields in the Cooking Tip content type and its comments and vocabularies. We can try to apply a different image style to image fields on Teaser, RSS, and Full content views. And we can add more fields to comments and vocabularies, and adjust the field display settings to see the outcome of each setting.

Summary

It appears that all of the tasks of controlling node displays which are described in this article were previously done in Views in Drupal 6. It might be instructive to compare and contrast the use of CCK plus Views in Drupal 6 with the new Field API in Drupal 7.


Further resources on this subject:


Drupal 7 Fields/CCK Beginner's Guide Explore Drupal 7 fields/CCK and master their use
Published: July 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Dave Poon

Dave Poon is a web developer and designer based in Sydney. He started his career as a freelance graphic and web designer in 1998 and works with web development agencies and medium-size enterprises. After graduating from Central Queensland University with a degree in Multimedia Studies and a Master's degree in IT he began his love affair with Drupal, and works for a variety of companies using Drupal.

Currently, he is the director of Erlango (http://erlango.com), a web product development startup, located in Sydney and Hong Kong, which is using Drupal as a framework to create web products and customized CMS.

He was the technical reviewer for Drupal Intranets with Open Atrium, published by Packt Publishing.

Books From Packt


Drupal 7
Drupal 7

Drupal Intranets with Open Atrium
Drupal Intranets with Open Atrium

Drupal 7 First Look
Drupal 7 First Look

Drupal 7 Module Development
Drupal 7 Module Development

Drupal 7 Social Networking: RAW
Drupal 7 Social Networking: RAW

Drupal 7 Themes
Drupal 7 Themes

Drupal Web Services
Drupal Web Services

Drupal 6 Theming Cookbook
Drupal 6 Theming Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
2
4
A
a
3
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software