This post is for those us that love getting right down into the gritty details of building templates for NationBuilder sites :)
Today we thought we’d highlight a handy new liquid feature in NationBuilder (from the Bootstrap 4 template), that let’s us define local variables when rendering a partial.
Why is that useful? Because it cuts down on the number of updates you need to make across templates. To show you how it has made our work simpler, here is an example, using progress bars.
- Under the old system, we had separate progress bars on donation pages, petitions, etc. The reason was that there are different variables on those pages for donation counts, signature counts, etc. So if you wanted to update the progress bar across the site you had to do it in many different places.
-
Under the new system, we have a single _progress.html partial, which uses local variables for "percent", "amount", "count", "goal" and "label". When we include that partial on one of NationBuilder's action pages we assign those local variables to their page-specific values. For example, in the petition page template we use the following code to print out the signature count, goal, percentage achieved and signature name:
- {% include "progress" percent: page.petition.percent_of_goal, count: page.petition.signatures_count, goal: page.petition.goal, label: page.petition.signature_name | pluralize %}
Other examples of this new feature include the "_avatar.html" partial with local variables for size and signup to show a supporter's profile image. And the "_svg_icon.html" partial that allows us to easily render commons icons with a name, size, class, fill and style.
Specifics - we’re getting technical now…
Unlike when setting new liquid variables using the {% assign %} or {% capture %} tags, the variables assigned inline when including a partial are neatly scoped to the partial, so they're only available inside that partial. By contrast, variables created with {% assign %} or {% capture %} tags are available for use globally once they're defined.
Happy templating!