NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.
Directory pages give you the power to display groups of supporter profiles on your site. Their potential use cases range from the conventional to the creative. They often power simple member contact lists, but they can also be used in more elaborate schemes.
Directory pages can be customised to display live maps of supporters, partner organisations or campaign targets, complete with email contact forms or other bells and whistles.
One question we hear a lot from organisations is whether it’s possible to increase the number of people displayed on a directory page. By default NationBuilder’s directory pages include 30 profiles, and you can easily choose which subset of people to show using tags. Additional people identified by the chosen tag only appear on subsequent pages of the directory, which limits your options for searching/filtering the full collection. Today we’ll reveal a trick you can use to circumvent that limitation.
Show all matching people on a single page
You can show all matching people from a directory on the same page by following the steps below.
Step 1
Create a directory page and give it the “unlisted” status. Note the slug you choose as we’ll need that in step 3. Select the subset of people to display publicly by setting the page to only include profiles with a specific tag.
Step 2
We’ll now update our directory page to return the data we want for every person in the directory, explicitly including the variables we need to ensure no undesired personal information is revealed publicly. To do this, simply navigate to the “template” section of your directory page and click the button to create a custom template. Once the template editor loads, delete all existing code, paste in the 5 line snippet below and select the “ignore layout” checkbox before clicking the “save and publish” button. The code below will display the full_name of every signup in the directory, but it can easily be customised to show anything you need.
{% for signup in page.directory.listings %}"{{ signup.first_name }} {{ signup.last_name }}"{% unless forloop.last %},{% endunless %}{% endfor %}
Step 3
Create a new basic page. This is where we will show all the directory page results in a single place. Again, navigate to the “template” section and create a custom template for the page. In the editor place the line of code below where you would like your directory section to appear (probably just beneath the {{ page.basic.content }} line). Change the word in all caps to the slug of the page you created in step 1:
{% subpage "THE_SLUG_OF_YOUR_DIRECTORY_PAGE" with "all_directory_listings" %}
Step 4
Finally, navigate to your website theme in the backend. Please note you will need to create a custom theme if you don’t have one already. Click the “new file” option within the “theme” section of your site. Name the new file _all_directory_listings.html and paste in the following code:
{% if page.directory.listings_count > 0 %} <section> <h3 class="padbottom">Full list of directory page signups</h3> <div id="directory-listings" class="row"></div> </section>
<script type="text/javascript"> var preName = " <div class='col-md-3'>", postName = "</div> ", x = 1, loopLength = {{ page.directory.listings_count | divided_by:30 | plus:2 }};
while (x < loopLength) { $.getJSON("{{ page.full_url }}?page="+x, function(data) { object = ""; for(var i = 0; i < data.length; i++) { object += preName + data\[i\] + postName; } $('#directory-listings').after(object); }); x++; } </script>{% endif %}