Using a customized directory, we can create an attractive layout for your organization's power players displaying lots of different kinds of information attached to their accounts.
First, tag the people you want to display. In this example, we'll be using "board" as our tag name. Since we're using Directories to anchor our build, we're limited to 20 accounts which will display on a single page. There is a way to get around this, but that's a topic for another post.
Next, create a Directory Page in your nation and select where you want it to appear in your nav. Go to its Directory settings and enter your tag in the field marked "Only include profiles with the following tags"
The directory will pull in all profiles with that tag. Simply add or remove the tag to control who shows up.
Preview the page you've created. You should see a row-by-row listing of each account that carries the tag, with a profile picture and a name hyperlinked to their public profile. The default display is a bit shabby, so let's jazz it up.
Pop open the page's template section and scroll down till you see this code:
First, get rid of "<b>{{ page.directory.listings_count }}</b> directory listings". The rest of the code determines how each account is displayed, using a file called "_signup_show.html".
For this demonstration, we're going to use some basic gridwork and a smidgen of CSS to create our own template. Go to your site's Theme section and select "New file". You'll need to create a custom theme if you haven't already. Name the file something like "_profile_card.html" and paste in the following code:
| <li class="span6 padtopmore padbottommore center"> <div class="span5"> <a href="{{ signup.profile_url }}"><img src="{{ signup.profile_image_url }}"></a> </div> <div class="span7"> <h3>{{ signup.published_name_linked }}</h3> <h4>{{ signup.description }}</h4> </div> <small>{{ signup.email | enkode_email }}</small> </li> |
This is a very basic framework using HTML classes that are standard to all NationBuilder themes (see grid.scss).
In essence, we're telling the webpage that for each person, create an area that takes up half of the available space and divide it into 2 parts. In the left part, put the person's profile image, hyperlinked to their public profile, which they may fill out independently. In the right part, list the person's name, description (background section, good free field to use), and their email, encoded so that it's protected from some of the nasty stuff that scrapes the Internet. Furthermore, arrange these areas into rows of 2 columns each, add some blank space between them and center all their content. When viewed on a smaller screen, make them all one column.
Now, return to your directory page template and replace lines 19 - 25 with the following code:
|
<ul class="row-fluid">
{% for signup in page.directory.listings %} {% include "profile_card" %} {% endfor %}
</ul> |
It should look like this:
Go ahead and click "Save and Publish" and take a look at your directory. We should see 2 columns of entries equally spaced...
Wait, what happened?
There's a little boilerplate CSS that needs to be corrected in order for the the columns to display equally. Pull up your site's tablet-and-desktop.scss theme template and paste in the following code:
| //board page li.span6 { &:nth-child(2n+1) { margin-left: 0; clear: both; } } |
That'll nix that pesky left margin that's throwing everything off. Now, your page should look more even:
Here's a live demo. The images and names link to a larger bio that the person can fill out independently. Note that when the screen size is reduced, they all align to one column, centered in the page.
You may want to upload images for each person that are a bit bigger and nicer than the avatars that are automatically pulled from social media accounts. To do so, pull up the person's account page and go to Profile > Settings and use the upload function under Profile image.
They must be square and under 56K in file size. The images linked in the demo are all 200px wide. While 56K should be large enough, there are ways to link larger, more high-def images to these profile templates. Let me know if you're interested and I'll devote a future blog post to it.
But wait, what if we want to change the order and put George Washington up top with Honest Abe?
For that, we'll need to go back to the page's Directory settings and sort by something different, like "Highest priority". Then, go rank each person on the 1 - 5 scale, where 1 is lowest and 5 is highest, using the Priority box on their account Settings page.
Boom! Your people will display by priority. This technique also works if you sort them by Political capital and manipulate each person's PC numbers accordingly.
You will want to experiment with different HTML classes and signup variables to achieve your desired display. Here's another example using lots of fields and special CSS. It also checks to see if a given person has a Twitter, Facebook and/or Linkedin account, and displays links to them through icons if they exist.
You can use customized directories to show off all sorts of groups and give special recognition to those in your community who've earned it. Once you get the templates set up, you can easily add and remove people with a simple tag. This can save lots of work in the long run, especially among organizations where people move around and change rolls frequently.