• Tech

An Introduction to NationBuilder: For Loops and Conditionals

In this installment of our NationBuilder series, we’re going over for the two primary methods for adding logic using Liquid to a NationBuilder theme: for loops and conditionals.

holiday sweater

Conditionals

Let’s begin with a few basic if statements.

{% if user.name == 'Mika' }
Hello Mika
{% elsif user.name == 'Kygo' }
Hello Kygo
{% endif }

or

{% if request.current_user.is_volunteer? == true %}
Thank you for volunteering!
{% else %}
Will you volunteer?
{% endif %}

Both of these examples use a Liquid object to determine something about the user and display different content based on that. Building on that, let’s see how to target a user’s membership type using conditionals.

For example, to make certain pages (or parts of pages) only viewable to certain membership types, first set up membership types in your nation. Next, add a member type in the NationBuilder control panel called Sustaining. Lastly, wrap your page content inside Liquid conditionals that check for membership levels or tags—or otherwise hide the content—like this:

{% if request.signup.membership_level_name contains "sustaining" %}
<!-- Paying Member Content -->
{% else %}
<!-- Non Paying Member Content -->
{% endif %}

for loops

For Loops

For loops are great for quickly targeting a group of pages or posts.

For Loop Example 1:

You could use a for loop to access a page’s children with the the page.children object.

So this would go in the parent page’s template:

{% for page in page.children %}
{{ page.slug }}
{% endfor %}

And that would list the slug of each subpage.

For Loop Example 2:

Images that are uploaded to the Files section of a page (attachments) are accessible in a for loop this way:

{% for attachment in page.attachments limit: 10 %}
<img src="{{ attachment.url }}" />
{% endfor %}

The above code could go in a partial named _gallery.html and if a page had {% include "gallery" %}, it would display all the images that have been uploaded to that page.

For Loop Example 3:

If you want to cycle through iterations where the tag issue is used and show the content only on the homepage, you could put this in layout.html:

{% if page.is_homepage? == true %}
{% tag "issue" with "homepage_content_block" %}
{% endif %}

in _homepage_content_block.html:

{% for page in tag.most_recent_published_pages_no_pagination %}
<p>page slug: {{ page.slug }}<br></p>
<p> page name: {{ page.name }}</p>
<p> author%u2019s first name: {{ page.author.first_name }}</p>
{% endfor %}

most_recent_published_pages_no_pagination will give you a list of the most recently updated 500 pages, and the tag prefix lets it access the tag_slug used in the original {% tag %} call.

For Loop Example 4:

Similarly, this is a for loop that will display an attachment image within a feed of pages with a certain tag:

{% for page in tag.most_recent_published_pages limit: 3 %}
<a href="{{ page.url }}"><img src="{{ page.attachments.first.url }}" /></a>
{% endfor %}

So if the code above was in a partial named _show_books.html, than this line would go in a template file:

{% tag "books" with "show_books" %}

And that would display the first image from each of the 3 most recently published pages tagged with books.

Let’s Bring Them Together

We’ll end with a simple example of an if statement inside a for loop:

{% for child in page.children }
{% if child.type_name == 'Question' }
<li><a href="{{ child.url }}">{{ child.headline }}</a></li>
{% endif }
{% endfor }

This code would iterate over every subpage for a particular page and for any whose name contained the word “Question”, that page’s headline would be displayed as a list item link to the page.

When it comes to Liquid logic, keep it simple and in separated in clean chunks. If it helps, draw or write out your process in pseudo code. Think explicitly about what you want to end with and what you’re able to target to begin with. Pretty soon, you’ll find for loops and conditionals useful thinking tools for any problem.

Comments