Menu
Staff Directory (School)

You 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:

Type: Name: Notes:
Image Image  
Name Name  
Short Answer Title  
Phone Phone  
Email Email  

Drop-down

 

Category


 
Include three options:    
Principal
Teacher
Support Staff
Paragraph     Description      

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

  1. Singular name: Staff
  2. Identifier: list
  3. Icon: your choice. I suggest: glyphicons-person
  4. 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. Add a new page.
  2. Choose the "Collection" page type.
  3. Select the layout you want to use for the page.
  4. Add a descriptive title like "Staff Directory".
  5. Select the "List" custom collection.
  6. Click the blue Edit field in the center of the page, and paste the code bellow into this edit area
  7. Click save.
  8. Finally, click the Publish button.

 

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

<h2>Principal</h2>
{% for staff in su.collection( "list" ).sort( "category" ).sort( "name" ) %}
{% if staff.category == "Principal" %}
<div class="list-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 }}</div>
	</div>
{% endif %}
	
{% endfor %}
<h2>Teachers</h2>
{% for staff in su.collection( "list" ).sort( "category" ).sort( "name" ) %}
{% if staff.category == "Teacher" %}
<div class="list-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 }}</div>
	</div>
{% endif %}
	
{% endfor %}
<h3>Support Staff</h3>
{% for staff in su.collection( "list" ).sort( "category" ).sort( "name" ) %}
{% if staff.category == "Support" %}
<div class="list-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 }}</div>
	</div>
{% endif %}
	
{% endfor %}

 

1.877.518.0819