Displaying NationBuilder Blog Post Images on Other Pages

There are two common ways to display NationBuilder blog post images on other pages of your NationBuilder website.

In my first example, our Recent news section needs to show an image from the post in the left column, and the title/excerpt in the right column.

nationbuilder blog, nationbuilder image attachment, nationbuilder featured image, blog post image, nationbuilder post image, nationbuilder images from blog

In this situation, we need to call the post’s image separately from the excerpt and title. To do this, I added the following code to my “_blog_latest.html” file (if you’re confused about this, please reference the NationBuilder documentation here for showing content from one page on another).

 <div class="col-md-5 col-small-12">
     {% for attachment in post.attachments limit:1 %}  
          <img src= "{{attachment.url}}">
{% endfor %}          
  </div>

The above code will tell NationBuilder to find the post’s attached image (this is key) and display it in the left column. To attach an image to a post, you need to upload the image as a File in the post’s Dashboard, thereby attaching it to the post. Simply adding the image into the body of the post will not work!

The second example is much easier. In this design, the website’s blog landing page needs a design where an image from the body of the blog post will appear above the excerpt. To accomplish this, we need to upload our image to the “Files” section and then add the image to the “Before the Fold” section of the post’s content. Below is the code you’ll need for this to work.

nationbuilder blog landing page, images to blog page, featured images nationbuilder, nationbuilder attached images

<div class="page-excerpt padbottom" id="blog-post-page-{{ post.id }}">
      <h3><a href="{{ post.url }}">{{ post.headline }}</a></h3>
      <div class="excerpt">
        {{ post.blog_post.content }}
      </div>
      {% if post.blog_post.is_extended? %}
        <span class='read-more'><a href='{{ post.url }}'>Read more</a></span>
        {% endif %} 
    <hr/>
    {% endfor %}
  </div>

Notice the difference. Instead of calling the separate blog.attachment, we’re instead just pulling the excerpt content, which will include the image since it’s above the fold.

<div class="excerpt">
        {{ post.blog_post.content }}
      </div>

Austin F Cline is a Digital Marketing expert.

Leave a Reply

Your email address will not be published. Required fields are marked *