Create a Staff Directory Listing in Drupal 7 - Drupal Tutorial

03 Feb 2012

Administrator

Drupal Tutorials

1
2
3
4
5

(0 votes)

Drupal 7 has a new core module called "Fields", which replaces the CCK module in Drupal 6. To show you how it works, we are going to create a custom content type for Employees, and add some extra fields to it so you can create a directory of people.

You can use content types and fields to create product pages, business listings, or virtually any type of content that has specific information that needs to be included with each entry.

We'll show you how to add a new field, and existing field and a teaser to a new content type that you create.

Step #1: Plan the directory

To get ready for this, create a list of fields you would like to have for each employee, for example: name, phone, department, title, headshot, bio - or whatever you think you need. Have an idea of what type of data needs to be used in each field.

Name: first and last name
Headshot: small portrait photo
Phone: Short text field with at least 13 spaces that shows only numbers
Ext: Short text field showing only 4 characters numbers only
Department: short text field
Title: short text field with job title
Teaser: first paragraph of bio to show on listing
Bio: Unlimited size text box

Step #2: Create a new content type

tutuploadstutuploadstutuploadstutuploadstutuploads2._Create_a_new_content_type..png

We are going to assume you are already installed Drupal 7 and are logged in with user privileges. Let's start by creating a new content type called "Employees".

Go to Structure > Content types and click Add content type:

tutuploadstutuploadstutuploadstutuploadstutuploads3._Add_a_content_type.png

Enter a Name and Description:

tutuploadstutuploadstutuploadstutuploadstutuploads4._Give_it_a_name_and_description..png

Now let's define the five default settings at the bottom of the screen. Scroll down and then set the parameters for each of the settings and options sections. Click each title to open the controls.

tutuploadstutuploadstutuploadstutuploadstutuploads4._Define_the_default_settings..png

Clicked Save and add fields you will see the screen below.

tutuploadstutuploadstutuploadstutuploadstutuploadsResults_of_clicking_Save_and_add_fields..png

You will get a confirmation message and the two default fields, Title and Body will already be configured. We are going to be using the Body field for the Bio, so we won't need to create a field fo that. You could rename it if it's confusing. Click edit to rename it.

tutuploadstutuploadstutuploadstutuploadstutuploadsmedia_1315077820960.png

There are tabs at the top of the page for completing all the tasks you need. When we get finished adding fields, we'll go to the next tab to manage the display, and continue until everything is set. Drupal will walk you through the process.

Step #5: Add fields

tutuploadstutuploadstutuploadstutuploadstutuploads5._Choose_the_type_of_field_to_add_and_add_the_first_fiel.png

You should have a list of fields you want to add. The fields to add are:

Name: first and last name
Headshot: small portrait photo
Phone: Short text field with at least 10 spaces
Ext: Phone extensions with only 4 digits
Department: short text field
Title: short text field with job title
Teaser: first paragraph of bio to show on listing
Bio: Unlimited size text box with teaser

Since we're creating a list of employee contact and profile information we're going to add a mix of existing fields and new fields. Let's start with the name filed by entering text and making choices.

Label: This is the name of the field that people will see on the site. It should be plain text.
Field name: This is the name that identifies this type of information in the data base. This should be unique name, letters and number only.
Type of data to store: Names are just short text fields so choose "Text" from the drop down menu.

Click Save and will be moved to the next step.

Choose the field settings:

tutuploadstutuploadstutuploadstutuploadstutuploads6._Field_Settings_-_number_of_characters_for_the_text_fie.png

Text fields can have size limitations on them. By default, Drupal will allow 255 characters to be entered in a text field. Names are never that long though. You may want to change this to anywhere from 35 to 50 characters. For the phone field you may want to limit it to 10 characters. Make your changes and save the field settings.

Let's show you how to add an image field for the headshot:

tutuploadstutuploadstutuploadstutuploadstutuploads7_cc14e15a177add197d87c866b7a5781a.png

There are some field types that are already defined by Drupal, and they are added in a slightly different way. So this time, type "Headshot" into Add existing field. Then choose the image field from the drop down menu.

The widgets box at the end will automatically turn to Image. The widget is the code used by Drupal to create form element on the content entry page. Each type of content has it's own widget, in this case "Image" is the only choice. Certain modules may add their own widgets and there may be more choices here.

Click Save when you are done. Saving brings up the settings screen.

tutuploadstutuploadstutuploadstutuploadstutuploads8._Edit_the_settings_for_controlling_this_image_widget..png

Here you can set the default image size, the allowed file extensions and most of the details that control image display. Be sure to go through here and manage all the settings.

Now go ahead and add the rest of the fields:

Adding the rest of the fields is simply a matter of repeating the steps for each of these basic types: New Field, Existing Field, Teaser.

We aren't going to add a field for the Bio, we're going to use the existing Body field and the Teaser is a feature of that field, so we just need to modify that one, not create it. You could add addiional unlimited text fields if you need them, though.

If you've added modules, for other functions they may add new field types and widgets of their own. So you may have more choices than you see in this tutorial which was done with a very basic installation.

Step #5: Manage display

We want to list more than one employee on a page, so we don't want their entire biography and listing showing up in the main listing page. We just want to have an intro or teaser of the first few paragraphs show up. This procedure is a little different than creating a field. We are going to modify an existing field.

So go to the Manage Display tab at the top of the page. If you aren't already on that page go to Structure » Content types » Employees.

tutuploadstutuploadstutuploadstutuploadstutuploadsmedia_1315083110318.png

Under the FORMAT column, you'll see a dropdown on the Body field row.
Choose Summary or Trimmed from the dropdown.
Adjust the trim length of the teaser.

tutuploadstutuploadstutuploadstutuploadstutuploads10._Adjust_the_trim_length_of_the_teaser..png

After you've chosen Summary or trimmed you will see the default trim length, and a gear icon at the end of the row. To adjust the number of characters for the intro, click the gear icon.

You can also adjust the items included in the teaser. Notice the Teaser button in the upper right. After you have chosen your trim length and saved it, then go to the Teaser button.

tutuploadstutuploadstutuploadstutuploadstutuploadsmedia_1315083509800.png

Update, and then scroll to the bottom of the page and look at the Custom Display Settings. Click on the title to expand it if it's not expanded. Make sure the custom format is applied and save.

tutuploadstutuploadstutuploadstutuploadstutuploads11._Make_sure_the_custom_format_is_applied_and_save..png

Make sure there is a check mark next to Teaser. Save this and then return to the "Teaser" button at the top of the page.
Return to the Teaser button and add the desired fields to your teaser.

You will see all the fields you have created so far listed here, and they will be marked by default. Choose a value from the dropdown menu in the FORMAT column, and you will be adding this field to the the teaser. So I want to add the headshot and the name to the introductory paragraph in the listing.

If you have a phone number field, a department, and title field that you created, they would be here and you could add them.

You probably want to add all your fields before returning to the Teaser button to un-hide the fields.

Turn the gears and adjust the settings.

Now that you have the items added you will see a gear icon at the end of the row. Click this for settings adjustments on your teaser items.

Result

Here is what the short listing will look like. All your information is displayed, and, because we used a Teaser, there is a Read more link that will lead your visitors to the complete employee profile.