Membership Directory


You can easily create a staff directory custom collection, in three easy (sort of 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 everything will function properly.

Name the directory "Directory."

Add the following fields:

Type:                   Name:                
Image Image
Name Name
Address Address
Phone Phone
Email Email

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

  1. HTML Identifier: directory
  2. Icon: It is your choice but we recommend: glyphicons-group
  3. Singular name: Membership
  4. Title field: None
  5. Featured image field: None
  6. API Access: None

Now, you can save the custom collection.

Add some person data into your 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 "Directory" option and select it to go to the 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 Directory Collection. Using the "Add Membership" 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 Membership 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 "Membership Directory".
  5. Select the "Directory" 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.

    .polaroidimg {
        width: 80%;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-bottom: 25px;
    .polaroidimg h3 {
        text-align: center;
        padding: 10px 20px;
        margin-top: 10px !important;
	.directory-entry {
		margin: 15px 30px 15px 0;
		width: 300px;
		max-width: 100%;
		display: inline-block;
		vertical-align: top;
		border-bottom: 1px solid #bbbbbb;
	.addressindent {
		padding-left: 20px;
	.boldit {
		font-weight: bold;

{% for membership in su.collection( "directory" ).sort( "name.last" ) %}
    <div class="directory-entry">
	   <div class="polaroidimg"><img src="{{ membership.image.fill( 269,180 ) }}" width="100%"/>
           <h3>{{ }} {{ }}</h4>
	   <div><span class="boldit">Address: </span><div class="addressindent">{{ membership.address.address }}</div>
	   <div class="addressindent">{{ }}, {{ membership.address.state }} {{ }}</div></div>
	   <div><span class="boldit">Phone: </span><a href="tel:{{ }}">{{ }}</a></div>
	   <div><span class="boldit">Email: </span><a href="mailto:{{ }}">{{ }}</a></div>
{% endfor %}