NationBuilder tips - Using page tags to display content blocks

NationBuilder easily allows you to add different page types but creating layouts with less rigidity usually involves custom coded templates. However, this requires someone who knows their way around front end development and is willing to get their hands dirty in the murky world of coding. Also, because a custom template has no relation to any other page this can also lead to inconsistencies in layout and design across the site.

As a NationBuilder Architect I see it as my job to build sites for clients that allow them flexibility without having to resort to code. The best way I’ve found to do this is through page tagging.

By giving a page a certain tag you can then use that as an indicator for certain behaviours or layouts within the template. For instance, you could pull content into a home page based on whether it has the tag ‘home_content’.

Getting an array of current page tags

The first thing that is required is an array of the tags for the page in question. That would look something like this.

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

Here we’re creating a string of all the tags that have been assigned to the current page and assigning it to  the ‘tag_list’ variable. 

We could then use that list to insert different bits of content depending on if it contains a certain tag, e.g.

{% if tag_list contains 'target_tag' %}
   DO SOMETHING HERE
{% endif %}

Here we’re saying, if ‘tag_list’ contains the word ‘target_tag’ then something should happen, e.g. display some content. 

So a useful example might be to display a link to the site donate form if the ‘donate_button’ tag is added to the page. 

{% if tag_list contains donate_button %}
    <a href=“{% site.donation_page %}” title=“Donate to my Nation!”>Donate now</a>
{% endif %}

Here we have checked to see if the tag list contains the tag ‘donate_button’. If so we’re inserting a link to the site’s assigned donation page ({% site.donation_page %}). You can see a list of the available NationBuilder site variables here.

This is a relatively straightforward example, but here the possibilities are endless. In the coming posts I will explore some other more complex use cases.