You can easily create a staff directory custom collection, in three fairly easy steps:

Create a custom collection form

Add some data into your collection

Create a custom collection page, and paste in the page code

Create a custom collection form

Go to Settings -> Custom Collection, and add a custom collection.

Note: it is important that you use these exact field types and names so that the import and the code below will function properly.

Name the directory "Staff Directory."

Add the following fields:

Type:

Name:

Notes:

Image

Image

Name

Name

Short Answer

Title

Phone

Phone

Email

Email

Drop-down

Category

Include three options: Pastoral StaffMinistry StaffSupport Staff

Paragraph

Description

Before you save the form, you'll need to enter some data into the "Settings" tab:

Singular name: Staff

Identifier: list

Icon: your choice. I suggest: glyphicons-person

API Access: none

Now, you can save the custom collection. Notice you will also see this custom collection in your dark gray Admin sidebar on the left side of the screen. Find the new "Staff Directory" option and select it to go to the collection.

Add some personal data into your collection

As you saw with the examples of the fields above, you will need a photo and some data about each person to be in the Staff Directory Collection. Using the "Add Staff" button at the top right, add several people into your collection. This will be important before proceeding so that we will have something to view when we are done with the next section.

Create a custom collection page, and paste in the page code

Now decide where you want the Staff Directory page to be accessible to your visitors. You can navigate to the parent page, and then click "Create" to make a new child page at that location.

Add a new page.

Choose the "Collection" page type.

Select the layout you want to use for the page.

Add a descriptive title like "Staff Directory".

Select the "List" custom collection.

Click the blue Edit field in the center of the page, and paste the code bellow into this edit area