Create a Staff Directory Listing in Drupal 7

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

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:

• Enter a Name and Description:

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.

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.

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.

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.

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.

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.

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.

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.

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.

• 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.

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.

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.