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

1. Create a custom collection form
2. Add some data into your collection
3. 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 and be sure to name them EXACTLY as specified bellow:

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

1. HTML Identifier: staff
2. Icon: your choice. I suggest: fa-user
3. Singular Name: Staff
4. Title field: None
5. Featured image field: None
6. 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.

1. Copy the "Staff Directory Page Code" below.
2. Add a new page to your website.
3. Choose the "Collection" page type.
4. Select the layout you want to use for the page.
5. Add a descriptive Title like "Staff Directory".
6. Select the "Staff" custom collection.
7. Click the blue "Edit" field in the center of the page, and paste the "Staff Directory Page Code" from bellow into this edit area.
8. Click save.
9. Finally, click the Publish button.

Staff Directory  Page Code:

<style>
	.list-entry-container { 
		display:flex;
		flex-flow:row wrap;
		justify-content: space-between;
		}
	.list-entry {
		margin: 15px 30px 15px 0;
		width: 20%;
	}
	img {
		border-radius:7px;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border: 1px solid #ddd;
	}
</style>

<h1>Principal</h1>
<div class="list-entry-container">
{% for staff in su.collection( "staff" ).sort( "category" ).sort( "name.last" ) %}
{% if staff.category == "Principal" %}
<div class="list-entry">
		<img src="{{ staff.image.fill( 172,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 }}</div>
	</div>
{% endif %}
	
{% endfor %}
</div>
<h1>Teachers</h1>
<div class="list-entry-container">
{% for staff in su.collection( "staff" ).sort( "category" ).sort( "name.last" ) %}
{% if staff.category == "Teacher" %}
<div class="list-entry">
		<img src="{{ staff.image.fill( 172,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 }}</div>
	</div>
{% endif %}
	
{% endfor %}
</div>
<h1>Support Staff</h1>
<div class="list-entry-container">
{% for staff in su.collection( "staff" ).sort( "category" ).sort( "name.last" ) %}
{% if staff.category == "Support Staff" %}
<div class="list-entry">
		<img src="{{ staff.image.fill( 172,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 }}</div>
	</div>
{% endif %}
	
{% endfor %}
</div>