Display All Posts Title with Author Avatar in Index

How do I list all posts with their author avatar on the home page? I can easily do that in the single page, but I’m having a hard time figuring this out for the index page. It’s like a one-to-one relationship in SQL,

Below are my content files.

content/author/john-doe.md

name: John Doe
twitter: johndoe
avatar: john-doe.jpg

content/post/welcome-post.md

title: Welcome Post
author: John Doe

On the home page, I’d like to list all posts title with their author avatar by the title. Each post title will link to the single post.

Ex:
POST TITLE - AVATAR

  • Welcome Post - (john-doe.jpg)
  • Post #2 - (jane-smigth.jpg)
  • Post #3 - (dean-adams.jpg)
{{ range first 10 .Data.Pages }}
<li>
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ with .Params.author }}{{ . }}{{ end }}
</li>
{{ end }}

Thanks for the quick reply - I updated topic description. I meant to say to display the author’s avatar. The avatar will be set in content/author/john-doe.md

<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ with .Params.avatar}}<img src="/images/{{ . }}">{{ end }}

But that picture in the list looked nice little need to tinker with css.

This didn’t work. .Data.Pages displays all the sections from my site. I tried the range with a “where” clause, it still didn’t work. Since we’re on the home page {{ .LinkTitle }} displays the site’s title.