1) Form Title: Staff Directory
2) Add field. Type: Image. Name the field: Image (which is the default)
3) Add field. Type: Name. Name the field: Name (which is the default)
4) Add field. Type: Short Answer. Name the field: Title
5) Add field. Type: Phone. Name the field: Phone (which is the default)
6) Add field. Type: Email. Name the field: Email (which is the default)
7) Add field. Type: Dropdown. Name the field: Category
and put in three dropdown options: Pastoral Staff
Ministry Staff
Support Staff
8) Add field. Type: Paragraph. Name the field: Description
Before you save the form, you'll need to enter some data into the "Settings" tab:
1) Singular name: Staff
2) Identifier: directory
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 Admin sidebar. Find the new option and select it to go to the collection.
Add some person 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 Collection. Add a few entries using the "Add Staff" option at the top right. Add several people into your collection.
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 "Custom Collection" page type.
3) Select the template you want to use for the display page.
4) Select the "Staff Directory" custom collection.
5) Click the Edit field in the center of the page, and paste in this code into this field area, and then click save, and then publish the page:
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 299px;
margin: 15px;
max-width: 299px;
}
</style>
{% set lastCategory = "" %}
{% for staff in su.collection( "directory" ).sort( "category" ).sort( "name.last" ) %}
{% if staff.category != lastCategory %}
{% if lastCategory != "" %}</div>{% endif %}
<h3>{{ staff.category }}</h3>
{% set lastCategory = staff.category %}
<div class="wrapper">
{% endif %}
<div class="item">
<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>
<p> </p>
</div>
{% endfor %}
</div>