How To Build a Company Directory with GravityView

Putting a company directory on a website is extremely common. Most sites have an About page that contains photos and a short bio for each employee. Internal company directories will typically display even more information for each employee when you drill down to a single profile.

There’s plenty of different ways to build your company directory, but our absolute favorite is to use GravityView. GravityView lets you build pages whose content is sourced from Gravity Forms entries. Using it, you can build a company directory that employees can add entries to using a Gravity Form on the front end. It even handles entry permissions, so you can let an employee edit their or profile without having access to anyone else’s.

In this tutorial, we’re going to show you how to build a company directory with GravityView. We’re going to then use Gravity Forms Media Library to automatically add photos in the directory to the WordPress Media Library so the photos in the directory are properly sized. Let’s get started!

Getting Started

Once you have GravityView and GF Media Library installed, follow the steps below to build the necessary Forms and Views for your directory.

Steps

1. Build Personal Bio Form
2. Build The Multiple Entries View
3. Build the Single Entry View

Step 1 – Build Personal Bio Form

Start by building a Personal Bio form. Your employees will use this form to input their personal information. Add as many relevant fields as you’d like to collect, and make sure to include a File Upload field for a photo.

It’s important to note that when a file is uploaded to Gravity Forms, it is stored in its original format. It doesn’t resize those files. The problem this introduces, particularly with a company directory where you might show 50 entries per page, is that your users might upload large photos of themselves. Loading all of those photos in the directory will increase load times significantly.

While you can specify a maximum file size in the field, requiring your users to resize the image before uploading can be problematic. GF Media Library resolves this issue seamlessly. It uploads files to WordPress’s Media Library, which automatically processes images and generates alternate smaller sizes. You can then use merge tags to show one of those smaller sizes in GravityView.

To activate GF Media Library on your File Upload file, navigate to the Perks tab and check Upload to Media Library.

Here’s what our Personal Bio form looks like on the front end.

Step 2 – Build The Multiple Entries View

With our Personal Bio form finished, it’s time to focus on building our View. The basic layout for our view is simple:

1. Insert the Name and Job Title fields into “Listing Title”.
2. Place Bio in “Other Fields”.
3. Use a Custom Content for the “Image”.
4. Add a Link to Entry in “Footer Right”.

With this layout, we’ll get a directory-style layout that a user can click on to view the full employee profile.

Adding the Profile Image the Right Way

Notice that we didn’t insert our File Upload field into the “Image” portion of the view. Instead, we opted for a Custom Content field. The reason for this is because we’re using GF Media Library to upload the photos to the WP Media Library, and instead of inserting the full-size image into the directory, we’re going to use a special merge tag modifier to output a specific size: {Photo:2:medium:link}. This modifier will output a smaller version of the image that is linked to the full size picture.

Here’s what this View looks like on the front-end with this layout:

Step 3 – Build the Single Entry View

With the Multiple Entries View completed, it’s time to build the Single Entry View, which is shown when the user clicks the View Details link.

The only difference between this View and the Multiple Entries View is the number of fields displayed. On this page, you can show every field from the Personal Bio form without cluttering the layout.

Here’s what this view looks like on the front end: