You are here

How to Create Image Gallery in NationBuilder

Submitted by Rachel on April 19, 2013 - 1:08pm

Content sliders in NationBuilder work well for sites that are trying to grab the attention of a reader and direct them to various locations on one's site, but there are times when a nation may want to allow a user to simply scan through a variety of images that are related to a single topic. For instance, perhaps you have hosted an event and want to display images from that event on your site. When this happens, a better option is to implement an image gallery.

Creating the Page's Content

Image galleries are created by looping through the page's attachments. Keep in mind, however, that this will display ALL attachments, so be certain that the files you attach to the page are only images. Avoid adding .pdf file attachments to this page.

To add attachments to a page, login to your nation's admin dashboard. Locate the page on which the gallery will appear and click on the page slug. Choose the tab labeled "Files" and click the yellow button labeled "Upload".

Looping Code

Now that you have setup your page and added your attachments, the code below is used create a simple loop and display the page's attachments as a gallery.

  1. {% for attch in page.attachments %}
  2. <img src="{{ attch.url }}">
  3. {% endfor %} 

Now your users can scroll through multiple images without leaving the page. What other ways have you found to create a gallery in NationBuilder?

Looking for more content like this? We're bringing you the NationBuilder Field Guide