Liquid Template Examples

For advanced users, we've put together a list of liquid snippets that can be used to add more customization to NationBuilder's templates.

Updated over a week ago

Table of Contents

  • Supporter Thumbnail Streams

  • Adding Images to Content Feeds

  • Creating an Image Gallery

  • Adding Images to a Lightbox

  • Customizing Page Activity Streams

Supporter Thumbnail Streams

These liquid snippets display a thumbnail picture stream of Facebook and Twitter supporters who have signed up for your nation. You can specify the maximum number of thumbnails to display, and it dynamically sizes its height and width depending on where you place it in your template.

You can place these snippets in both page-level and theme-level templates.

Recent Supporters

<p>Recent Supporters</p>
{% for signup in site.recent_supporters_with_pictures limit:18 %}
{{ signup.profile_image }}
{% endfor %}

Random Supporters

<p>Random Supporters</p>
{% for signup in site.random_supporters_with_pictures limit:18 %}
{{ signup.profile_image }}
{% endfor %}

Random Petition Signers

<p>Random Signers</p>
{% for signup in page.petition.random_signers_with_pictures %}
{{ signup.profile_image }}
{% endfor %}

Adding Images to content feeds, partial template includes

If you want to display content from one page on another, and also want to display an image thumbnail but don't know what the filename will be, you can try these snippets. Some of the outputs available are:

{{ page.attachments.first.url }}

{{ page.attachments.last.url }}

The example below is a forloop 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 %}


File Attachment Image Forloops

Images that are uploaded to the Files section of a page are accessible in a forloop, and are sorted in order by upload date and time.

For Blog Posts

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


For Pages

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


For FAQ's

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

User-submitted Images

Some NationBuilder action forms allow supporters to upload an image. It is possible to access these to display in other places.

For Suggestion Boxes

{% for post in suggestions limit:1 %} 
<img src="{{ post.suggestion.image_url }}"/>
{% endfor %}

For Endorsements

{% for endorsement in page.endorsement.endorsements limit:10 %} 
{% endfor %}

For Petitions

 {% for signature in page.petition.signatures_with_images limit:20 %}
<img src="{{ signature.large_square_image_url }}"/>
{% endfor %}}

Please Note: Using 'limit' means that only the indicated number of images will be passed through. The limit can be adjusted or removed.

Social Media Meta Images

The meta image is what is uploaded under the page Settings > Social Media, and is the thumbnail that is used when the page is shared on Facebook. The meta images from the page object that are available can be found in the documentation here. Some of the variables are:

{{ meta_image_url }}
{{ meta_image_medium_url }}
{{ meta_image_large_url }} 

For example, if you wanted to display the meta image for a blog post, your code would look something like this:

<div class="wrapper"><ul>
{% for post in page.blog.most_recent_blog_posts limit:10 %}
<li>
<a href="{{ post.url }}"><img src="{{ post.meta_image_url }}" width="150" height="150"></a>
</li>
{% endfor %}
</ul></div>

Creating an Image Gallery

You may want to create a page that includes all of your photos. Doing this is very similar to the method listed above.

To get started, click Website > Theme > New File and name the file something like _gallery.html, and click Create and edit file. Next, copy the following contents into the file and click Save and Publish.

{% for attachment in page.attachments %}
<a href="{{ attachment.url }}"><img src="{{ attachment.url }}" width="200" height="200"></a>
{% endfor %}  

This will display all of the images that have been uploaded to a page. Adjust the image heights and widths, and the number of images loaded by editing {% for attachment in page.attachments limit:xx %}

Next, click Website > + New Page and create a new basic html page where you wish to display your gallery. Upload all of your image into that page's Files section. Then click Template, and paste the following where you want the posts to display:

{% include "gallery" %} 

Adding Images to a Lightbox

A "lightbox" is a way to display images, html content and multi-media in a Mac-style pop-up that floats overtop of web page. There are many different types of jQuery scripts available that can easily be added to your nation.

For our example, we're going to use the fancyBox lightbox plugin. Once you've downloaded their files, you can upload the contents of the 'source' folder to your nation under Website > Theme > Files. Next, go to your layout.html and place the following in your header:

<!-- Add fancyBox -->
<link rel="stylesheet" href="{{ theme['jquery.fancybox.css'] }}" type="text/css" media="screen">
<script type="text/javascript" src="{{ theme['jquery.fancybox.pack.js'] }}"></script>

Because NationBuilder automatically loads jQuery when its needed, you don't need to upload or reference those files in your layout.html file.

In your _gallery.html file, add the script for the fancybox. Your code should look like this:

{% for attachment in page.attachments %}
<a href="{{ attachment.url }}" class="fancybox" rel="gallery1"><img src="{{ attachment.url }}" width="200" height="200"></a>
{% endfor %}
<script>
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

Adding the class "fancybox" indicates that the image is to be opened in the lightbox. Adding the rel "gallery1" will group the images together so that they can be thumbed through in a set.

Your images should now pop-up in a lightbox!

Customizing Page Activity Streams

It is possible to edit your activity streams to display customized messaging and images using liquid variables and special manipulation filters. To access the page where you can make these changes, go to Website > Theme > _page_stream.html

Adding Supporter Profile Images

You can create activity feeds that display your supporter's profile image next to their activity with the following variables:

Profile image of signup (48px):
{{ activity.signup.profile_image }}

Profile image of page/post author (48px):
{{ activity.author.profile_image }}

Here is an example of an activity feed edited to show profile images:

<div id="page_activities" class="activities">                          
{% for activity in page.activity_stream.activities %}
<div class="activity">
<table>
<tr><td>{{ activity.signup.profile_image }}</td>
<td>{{ activity.show}}</td>
</tr>
</table><hr />
</div>
{% endfor %}    

Users Without a Profile Image

For signups that do not have a profile picture, NationBuilder will load a default image. If you want to replace the default image with one of your own, you can do it this way:

{{ activity.signup.profile_image | replace: '//d3n8a8pro7vhmx.cloudfront.net/assets/icons/buddy.png','link-to-your-own.png'}}

The 'replace' liquid filter can be used to replace one output with another.

Editing the Activity Text

It is also possible to edit the words that describe a specific activity in a stream. This is the output tag that displays the description of the activity:

{{ activity.show}}

Here is a sample of an activity for a petition where we've used the 'replace' liquid filter to replace a word with another:

{% for activity in page.activities %}
<div class="activity">
<table><tr><td>{{ activity.signup.profile_image }}</td>
<td> {{ activity.show | replace: 'Petition','to amplify our voice' }}</td></tr>
</table></div>
{% endfor %}

Related HOWTOs

Did this answer your question?