Making the blog post's image show in the blog summary

Hi there,

I set up a blog on the Radio Free Richmond Nation. The blog is here. I have a blog summary on the home page, using the { % subpage "blog" with "blog_latest_home" % } and the { % for post in page.blog.most_recent_blog_posts limit:5 offset:0 % }

That's great, it works - the blog posts show up just like they are supposed to. But I want it to be better. I want to make each blog post's image show up in the blog summary.

On the theme documentation, there is a section titled "Display content from one page on another page." In this section is the following:

You can also display an image attached to a page via this technique by using the following code:
<img src=" { { page['filename.jpg'] } } " />

I tried adding that to my _blog_latest.html file, but it didn't do anything (no surprise there). So, I changed it to this:

<img src="blogimage.jpg" width="200" />

And then on each of the five blog posts (titled first through fifth), I uploaded an image. I made sure that the image on each blog post was titled blogimage.jpg. The image for first blog post had a big "1" on it, the second with a big "2", etc.

Now, on my blog summary on the home page, I am noticing that the wrong images are showing up in the blog summary. As you can see from this screenshot, the images that are being pulled in are not appearing with their correct respective blog posts, and the the first one in the list (the most recent blog post) is missing its image altogether:

If you click through to the blog post, you can see that the wrong image is showing up adjacent to each blog post summary.

This is not working as intended. Can you please tell me what I am doing wrong?

Thank you!

Official response from Taylor Pineiro

Please see the comments for a discussion!

Share this post

Showing 17 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Charles Sprickman

Charles Sprickman commented
Nothing to add other than a fiddle with Carey Miller’s example stripped of all the junk this forum does to it:

https://jsfiddle.net/csssss/fv5qgev0/
posted 2017-06-25 23:14:18 -0700
Taylor Pineiro

NationBuilder employee

Taylor Pineiro responded with completed

posted 2017-01-15 13:48:18 -0800
Carey Miller

Carey Miller commented
I was able to help out Jay with his issue. The page looks pretty nice now at http://acceleratetexas.nationbuilder.com/
posted 2015-08-01 15:41:42 -0700
lukas oktaba

hyperVote
hyperVote
Certified Architect

lukas oktaba commented
https://jsfiddle.net/ppuheq7u/1/

see if this link works for you, good luck!
posted 2015-07-30 17:57:43 -0700
Carey Miller

Carey Miller commented
Jay, not sure what issue you are having. If you want, email me at [email protected] and we can arrange for me to take a look. I am sure it is something simple that is causing your issue.
posted 2015-07-30 17:03:03 -0700
Jay Matthew

Jay Matthew commented
No. None of these suggestions have worked that I have found on this page. Maybe linking to an image of the code would be better if it cannot be typed. I have the pictures showing up, but they are not in the correct spaces like this post was all about. I can’t figure out how to get the right images near the right post.
posted 2015-07-30 16:49:00 -0700
Kevin Coleman

NationBuilder employee

Kevin Coleman commented
Hey @jay, when @tim is talking about removing the spaces when you’re calling the image he means remove the space that’s in this line of code: <img src=" { { post[‘filename.jpg’] } } " /> and replace it with this code <img src=" {{ post[‘filename.jpg’] }} " />. Does that make sense?
posted 2015-07-28 11:22:23 -0700
Jay Matthew

Jay Matthew commented
Still cant figure it out.
posted 2015-07-26 15:14:49 -0700
Tim Wayne

Tim Wayne
Tim Wayne
Certified Architect
Certified Expert

Tim Wayne commented
I mean remove the spaces between the { and the % in the examples above. I couldn’t put those two characters right next to each other because they would cause the system to read them as actual code, causing an error or making them invisible.
posted 2015-07-24 11:16:36 -0700
Jay Matthew

Jay Matthew commented
I cant get this to work. I have tried it all the ways here. Tim, what do you mean “removed the extra spaces?” I’m not seeing any.
posted 2015-07-23 22:15:05 -0700

Certified Architect

commented

  {% for attach in post.attachments limit:1 %}
      &lt;div class="imgWrap"&gt;
        &lt;img src="%7B%7B%20attach.url%20%7D%7D" alt=""&gt;
&lt;/div&gt;  
      {% endfor %}

posted 2015-02-11 08:23:14 -0800

lukas oktaba

hyperVote
hyperVote
Certified Architect

lukas oktaba commented
try this,
{% for attach in post.attachments limit:1 }
<div class=“imgWrap”>
<img src=“%7B%7B%20attach.url%20%7D%7D” alt="">
</div>
{ endfor %}
posted 2015-02-11 08:21:31 -0800

commented

I find this to work well on my sites. I create a second _blog_latest.html and populate it thusly. Works great.


&lt;table border="0"&gt;
  
    {% for post in page.blog.most_recent_blog_posts limit:7 offset:0 %}

  &lt;tr&gt;
&lt;td style="vertical-align: top; padding-right: 10px;"&gt;
        


{% for attachment in post.attachments limit:1 %}  
        &lt;a href="%7B%7B%20post.url%20%7D%7D"&gt;&lt;img src="%7B%7B%20attachment.url%20%7D%7D" width="150"&gt;&lt;/a&gt;
{% endfor %}          
    &lt;/td&gt;
      &lt;td style="vertical-align: top; padding-right: 10px;"&gt;
        &lt;div style="font-weight: bold; font-size: 14px;"&gt;&lt;a href="%7B%7B%20post.url%20%7D%7D"&gt;{{ post.headline }}&lt;/a&gt;&lt;/div&gt;


        &lt;div class="blog_teaser"&gt;&lt;div style="font-weight: normal; font-size: 14px;"&gt;{{ post.blog_post.content | strip_html | truncatewords:35 }}&lt;/div&gt;&lt;/div&gt;
        &lt;div class="continue_reading"&gt;
&lt;a href="%7B%7B%20post.url%20%7D%7D"&gt;Read more&lt;/a&gt; →&lt;/div&gt;
&lt;hr&gt;
&lt;/td&gt;{% endfor %}
  &lt;/tr&gt;
&lt;/table&gt;

posted 2014-05-02 10:14:24 -0700

Anupam Chander

Anupam Chander tagged this with Helpful

posted 2014-04-30 22:20:41 -0700
Anupam Chander

Anupam Chander commented
Oh nevermind, URL-encoding
posted 2014-04-30 21:56:32 -0700
Anupam Chander

Anupam Chander commented
Hi,

<img src=“%E2%80%9C%7B%20%7B%20post%5B%E2%80%99blogimage.jpg%E2%80%99%5D%20%7D%20%7D%20%E2%80%9D” width=““200””>

does not work for me. Could you look into it?
posted 2014-04-30 21:34:35 -0700
Tim Wayne

Tim Wayne
Tim Wayne
Certified Architect
Certified Expert

Tim Wayne commented
FIXED! The answer, for anyone interested:

Replace:

<img src=“blogimage.jpg” width=“200”>

with:

<img src=“%7B%20%7B%20post%5B’blogimage.jpg’%5D%20%7D%20%7D%20” width=“200”>

(remove the extra spaces between the braces, or it won’t work)
posted 2014-02-25 13:41:54 -0800