Thumbnail images for each post on blog index?

#1

This is probably pretty basic but it’s my first time using MM’s blogging functionality. I’ve got everything set up and initialised, got a few test posts showing up in an index list with title & link using directory_indexes. What I can’t seem to crack is getting a thumbnail image to go alongside each post in the index. My project is structured like so:

source/
|- index.html
|- posts
|  |- post1.html.erb
|  `- post1
|     `- cover.jpg

I’m using the folder naming approach suggested in the MM docs here.
Index is marked up like so:

<% page_articles.each_with_index do |article, i| %>
  <div class="post-listing">
    <img class="post-listing__cover" src="???">
    <!-- /using an img tag as placeholder, but presumably the answer will come in the form of a helper? -->

    <div class="post-listing__summary">
      <h2><%= link_to article.title, article %></h2>
      <span><%= article.date.strftime('%b %e') %></span>
      <%= article.summary(240) %>
    </div>
  </div>
<% end %>

A point in the right direction would be much appreciated.

#2

You might consider leveraging frontmatter. Create a new frontmatter variable called thumbnail_image in your actual post, then call that from your template.

Frontmatter section of your post file:

---
title: Post title
thumbnail_image: path/to/file.jpg
---

article content...

Then in the articles loop:

<img class="post-listing__cover" src="<%= article.data.thumbnail_image %>">
#3

This feels really close to the solution but I’m having a hard time getting this to play ball with the per-post sub-directory feature. Middleman just can’t seem to get hold of the right file path.

Edit: I got it working moments after responding there, this is what I’m doing:

Post frontmatter:

---
title: Broccoli And Roasted Cauliflower Soup
date: 2015-12-23 06:27 UTC
tags: recipe
cover_image: 'broccoli-and-roasted-cauliflower-soup/cover.jpg'
---

Image tag in index:

<img class="post-listing__cover" src="<%= article.date.strftime('%Y') %>/<%= article.date.strftime('%m') %>/<%= article.date.strftime('%d') %>/<%= article.data.cover_image %>">

Thanks for the point in the right direction!

#4

Ah, clever. The whole per-post subdirectory organization is new to me. Glad you got it working!

#5

This is a really clever solution. Thank you for sharing!

#6

Why not use only the filename in the frontmatter, and you could do:

<img src="<%= article.url %>/<%= article.data.cover_image %>">

Its more flexible this way :slight_smile: