Liquid Template Examples

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

Table of Contents


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

Random Supporters

Random Petition Signers

Learn more about the signup variables available in NationBuilder.
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.

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 Pages

For FAQ's

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 Endorsements

For Petitions

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:


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 Websites > 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.

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 Websites > 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:


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 Websites > Theme > Files. Next, go to your layout.html and place the following in your header:

 


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 %}

{% endfor %}

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 Websites > 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 :

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:

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:


Dive into more custom theme documentation

Do you like this page?

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.