Support.

Staff Directory Collection

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

1. Create a custom collection form
2. Add some data to your collection
3. Create a custom collection page, and paste in the page code

The trick is to follow the steps carefully and exactly.

1. Create a custom collection form

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

Field tab

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:ImageImage NameName Short AnswerTitle PhonePhone EmailEmail *DropdownCategoryInclude options. For example:

Pastoral Staff

Ministry Staff

Support StaffParagraphDescription 

*The Dropdown field type options can be adapted to your specific needs. The categories can be anything you want them to be. You may have only one, or many, and if you discover you need to add to the option list, you may edit it as needed.

*Dropdown field Note 1: All collection entries need a Category option to be included in the list.

*Dropdown field Note 2: Only one category can be applied to a single collection entry. 

*Dropdown field Note 3: If a Category option is not applied to any collection entries, that Category title will still display.

Settings tab

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

1. Identifier: directory
2. Icon: your choice. Suggestion: glyphicons-person
3. Singular name: Staff
4. Title filed: none
5. Featured image field: none
6. API Access: none

Now, you can save the custom collection by clicking the blue 'Save' button, on the bottom right.

Notice that you will now see this custom collection in the black Admin sidebar. Find the new option and select it (click it) to go to the collection.

2. Add some data to 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 Collection. Add a few entries using the "Add Staff" option at the top right. Add several people to your collection.

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

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

1. Add a new page.
2. Choose the "Collection" page type.
3. Select the template you want to use for the display page.
4. Give the new page a title.
5. Select the "Staff Directory" custom collection.
6. Click the "Create" button
7. Once your newly created page loads, click the Edit field (blue background area in the center of the page), and paste the following code into this field area. Then click the 'Save' button, and publish the page.

<style> .directory-entry { margin: 15px 30px 15px 0; width: 300px; max-width: 100%; display: inline-block; vertical-align: top; }</style>

{% set staffByCategory = [] %}{% for category in su.collection( "directory" ).fields().category.options %} {% set staffByCategory = staffByCategory|merge({ (category): [] }) %}{% endfor %}{% for staff in su.collection( "directory" ).staffType().sort( "name.last" ) %} {% set staffByCategory = staffByCategory|merge({ (staff.category): staffByCategory[staff.category]|merge([staff]) }) %}{% endfor %}

{% for category, staffs in staffByCategory %} <h3>{{ category }}</h3> <div class="wrapper"> {% for staff in staffs %} <div class="directory-entry"> <img src="{{ staff.image.fill( 269,180 ) }}" width="100%" /> <h4>{{ staff.name.first }} {{ staff.name.last }}</h4> <div>{{ staff.title }}</div> <div><a href="tel:{{ staff.phone }}">{{ staff.phone }}</a></div> <div><a href="mailto:{{ staff.email }}">{{ staff.email }}</a></div> <div>{{ staff.description|markdown }}</div> <p> </p> </div> {% endfor %} </div>{% endfor %}