Creating a resource centre

On a recent job I needed to create a central hub where the organisation could keep a set of resources, PDF documents, logos, assets, that sort of thing.  It would consist of a resource, some information about that resource and a download link or links so that a user could gain access to it.

I decided the best course of action was to repurpose the standard NationBuilder blog. A blog is archivable, easy and easy to add to so it made sense as the basis for the resource centre.

After creating my blog page within NationBuilder the first thing I needed to do was find a way to tell NationBuilder that this particular blog should be displayed in what will be our resource centre style. I would do this by adding a tag ‘resource_centre’ to the blog page and then checking for that tag within our code.

Getting the page tags

The first task was to make a list of which tags were on each page. I could then check that list when looking for our ‘resource_centre’ tag. In another post I explain how to get a strong of page tags which we can use to check against, so I won’t repeat the method here, but suffice to say it requires this code block:

{% assign tag_list = "" %}
{% for tag in page.tags %} 
    {% assign tag_list =  tag.name | append: ' ' | append: tag_list %}
{% endfor %}

This gives us a string called ‘tag_list’ containing all the tags on the page. We can then check this string for our ‘resource_centre’ tag as follows:

{% if tag_list contains ‘resource_centre’ %}
    THIS IS A RESOURCE CENTRE BLOG
{% else %}
    THIS IS A NORMAL BLOG
{% endif %}

So now we have a mechanism for checking if our new blog should be displayed differently to a normal blog. Next we need to make it function better as a resource centre.

The post (resource) listing page

For the most part our resource will appear as any other blog on a listing page. It could have a title, excerpt, featured image and exist in a paginated grid or list ordered by creation date, so for the purpose of this tutorial I’m going to assume that those elements already function within your theme as you want them.
Removing the listing view byline

In the context of a resource it may be safe to assume that a byline is not that useful. For example, if your post listing usually lists the date published and author, you may want to remove it in this context.

We can remove that from the display with an unless statement:

{% unless tag_list contains ‘resource_centre’ %}
    <byline>USUAL BYLINE INFO IN HERE</byline>
{% endunless %}

Here we’re saying ‘display this byline UNLESS our tag_list contains the ‘resource_centre’ tag.

Display the download links

Now we get to the meat of the challenge. Instead of displaying the usual ‘Read more’ link for people to click through to the blog single page, we want to display a download link to the post file.

First we need to get the url of the attachment we want to make available for download. Here we’ll use a liquid capture tag as follows:

{% assign resourceCount = ‘0’ %}
{% capture resources %}
    {% for attachment in page.attachments %}
        {{attachment.url}}
        {% assign resourceCount = resourceCount | plus: 1 %}
    {% endfor %}
{% endcapture %}

Here we’re first assigning a variable to count how many attachments are on our post (‘resourceCount’). Then we’re looking through any page attachments, outputting it’s url and incrementing our resourceCount variable by 1 for every file found. Assuming that only 1 file was found we can then use this code to output out download link:

{% if resourceCount == 1 %}
    <a href=”{{ resources }}” target="blank" title="Download">Download</a>
{% endif %}

Here we’re saying if our resourceCount is exactly 1 then output a link with a href of our captured resources url.

But what if we have multiple files on the post. In these instances we want to allow the user to click through to the post and see those multiple downloads sao that they can choose which ones they want.

So we’ll add an elsif condition to our if statement to check if the resourceCount number is greater than 1:

{% if resourceCount == 1 %}
    <a class='readMore' href='{{ resources }}' target="blank" title="Download">Download</a>
{% elsif  resourceCount > 1 %}
    <a class='readMore' href='{{ page.url }}' title="See {{resourceCount}} downloads">See {{resourceCount}} downloads</a>
{% endif %}

Here we’re saying if the resourceCount is greater than 1 add an anchor tag that links to the post url.  The label also tells you the number of downloads available.

We could also add a final else condition to our if statement for instance where, for whatever reason, there are no files attached to the post.

{% if resourceCount == 1 %}
    <a href=”{{ resources }}” target="blank" title="Download">Download</a>
{% elsif  resourceCount > 1 %}
    <a  href=”{{ page.url }}” title="See {{resourceCount}} downloads">See {{resourceCount}} downloads</a>
{% else %}
    <a href=”{{ page.url }}” title="Find out more">Find out more</a>
{% endif %}

Here we’ve just output a ‘Find out more’ anchor tag that links to the post url for instances where there are no file attachments.

That’s the resource listing view taken care of, now we can turn our attention to the post view.

Styling the post view

Getting the post parent tags

As with the listing page, the first thing we need to do is check to see if this post is indeed a resource post. We don’t want to have to tag each post with ‘resource’, that would be too much to remember, instead we want to know if our parent page (the resource blog page) has the ‘resource_blog’ class.

To do this we can use the following code:

{% assign parent_tag_list = "" %}
{% for tag in post.parent.tags %}
    {% assign parent_tag_list =  tag.name | append: ' ' | append: parent_tag_list %}
{% endfor %}

Here we’re making a list (parent_tag_list) of our post’s parent page tag list by using ‘post.parent.tags’ in our for loop.
Removing the post view byline

As with the listing view, it may be the case that the post byline (date, author, etc) is not relevant for our resource full post view. So as with the listing we can remove it from our template with a simple unless tag:

{% unless parent_tag_list contains ‘resource_centre’ %}
    <byline>USUAL BYLINE INFO IN HERE</byline>
{% endunless %}

This is exactly the same as before aside from the name of our tag list variable (parent_tag_list in this case instead of tag_list).
Adding download links to the post view
The last thing we want to do is display a link or links to our downloads (i.e. the post file attachments).
Again, we’ll start by checking if the ‘resource_centre’ tag is present in our parent tag list:

{% if parent_tag_list contains "resource_blog" %}
    ADD LINKS HERE
{% endif %}

Next we’ll loop create an unordered list which outputs an anchor, nested in a list item for each page attachment:

{% if parent_tag_list contains "resource_blog" %}
    <ul>
        {% for attachment in page.attachments %}
            <li>
                <a href="{{attachment.url}}" title="{{attachment.file_name}}">Download {{attachment.file_name}}</a>
            </li>
        {% endfor %}
    </ul>
{% endif %}

Here we output any attachments as links in an unordered list. Obviously this will need some styling, you may want to style the links as buttons or add a title before the <ul> for example,  but that’s beyond the scope of this tutorial here.