In this, my fourth post on developing with NationBuilder, I’m going to cover some useful concepts and techniques for working with images and subpages. If you want to check out previous posts, there’s one on getting started, Liquid basics, and Liquid logic.
Images, Assets, and Scripts
All images or assets used for a specific page only should be uploaded to Website > Template > Files but any images or assets used for your overall theme should be uploaded to Website > Theme > Files. No path is necessary when referencing images or assets in your theme template:
<img src="myfile.jpg">
.example { background-image: url('myfile.jpg'); }
Upload script files here too and then reference them at the bottom but inside the body tag in layout.html:
<script type="text/javascript" src="fancyzoom.js"></script>
If you need to link to an absolute URL, upload the file, then right click on it and choose Copy Link Address. That link will look something like this:
https://nationslug.nationbuilder.com/assets/pages/1/filename.jpg
If you are referencing an image or file within a <script> tag, upload the file to </script>Website > Theme > Files and use the following code:
{{ theme['myfile.jpg'] }}
Attachments vs Meta Images
An attachment is a file that is uploaded to the files section of a page. The meta image is defined under the Social Media section of the page settings tab, and is used primarily to define a meta image for use when sharing on Facebook, Twitter, etc. A page can have only one meta image, but can have multiple attachments.
These snippets can be used to display images from a page when you don’t know the filename but know that the files will be attachments on that page, which is why they’re housed in for loops.
Subpages
When dealing with subpages, you can loop through them to display each one or elements from each one on the main parent page. You’d be accessing the page.children object by means of a for loop. So you’d place this in the parent page’s template:
{% for page in page.children %}
{{ page.slug }}
{% endfor %}
The above code would list the slug of each subpage.
Subpage Example 1
You could use the {% subpage %} tag to access an attachment on another page. If the attachment is on page1 and you want to call it on page2, put this line on page2:
{% subpage "page1" with "partial_attachment_include" %}
and then _partial_attachment_include.html would contain:
{% for attachment in page.attachments %}
{% if attachment.url contains "header" %}
<img src="{{ attachment.url }}">
{% endif %}
{% endfor %}
In this case, page2 would see the subpage command, run page1 through the logic in the above HTML snippet, which would cycle through page1’s attachments, and only render if an attachment.url included header.
Subpage Example 2
If you have an image named header.jpg in the files section of a page with slug page_a, you could create a file named _partial_image_call.html which contained:
<img src="{{ page['header.jpg'] }}">
and that would allow you to call that image from anywhere else by putting this line on any page you wanted the image to appear:
{% subpage 'page_a' with 'partial_image_call' %}
You can only use the line in that partial in conjunction with the subpage call but weirdly, the subpage tag does not require that a page be the child of another to work!
So that’s an overview on where to store images and assets on NationBuilder and how to call them up no matter what page you’re on. Check back for my next post on the People and Communication sections of the NationBuilder control panel and how they connect to your nation’s website.