Original Poster Headshot as the first column on Topic List Pages

UX
1

Apologies if this has been asked / posted elsewhere. On the category pages, is it possible on the Discourse Hosted version to have a picture/head shot of whoever originally posted the discussion appear to the left of the discussion title?

It’s nice seeing what users are participating (under “Users” tab), but having the original poster headshot is something I’d love to be able to show.

Thanks!

2 Likes
2

Can you post a visual mockup? It’s technically possible, albeit tricky

3

No problem. Here’s a screenshot from our current Vanilla forum where I really like the layout. Headshot of the original poster on the left (see arrow), title of post on the right.

Example.png855×434 111 KB

4

We meant a mockup of how it would look in Discourse. I am still unclear if you are referring to the topic, the category page, or what…

5

Gottcha, sorry about that. Mocked up what I’d ideally like it to look like in Discourse below. Biggest change is no “Users” category. Instead, only the original poster’s avatar is shown on the left hand side before the discussion title.

Didn’t mention this in the original post, but also removed the “Views” and “Activity” columns. If possible, that’d be our ideal, simplified category page layout if possible to do on the hosted version. Possible to achieve?

Discourse-Category.jpg926×581 110 KB

4 Likes
6

Yep, it’s possible. Start here, and tweak it to what you’re trying for:

4 Likes
7

Fantastic, thank you - greatly appreciated!

1 Like
8

BTW, I just made this change on our mobile view, so that we would show the content author instead of the last poster. @youderian, how did the change work out for you?

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
<td>
  {{~#unless content.hasExcerpt}}
  <div class='pull-left'>
    <a href="{{content.firstPostUrl}}">{{avatar content.creator imageSize="large"}}</a>
  </div>
  <div class='right'>
  {{else}}
  <div>
  {{/unless~}}
    <div class='main-link'>
      {{raw "topic-status" topic=content}}
      {{topic-link content}}
      {{#if content.unseen}}
        <span class="badge-notification new-topic"></span>
      {{/if}}
      {{raw "list/topic-excerpt" topic=content}}
    </div>

    <div class='pull-right'>
      {{raw "list/post-count-or-badges" topic=content postBadgesEnabled=controller.showTopicPostBadges}}
    </div>

    <div class="topic-item-stats clearfix">
      {{#unless controller.hideCategory}}
        <div class='category'>
          {{category-link content.category}}
        </div>
      {{/unless}}

      {{plugin-outlet "topic-list-tags"}}

      <div class="pull-right">
        <div class='num activity last'>
          <span class="age activity" title="{{content.bumpedAtTitle}}"><a href="{{content.lastPostUrl}}">{{format-date content.bumpedAt format="tiny" noTitle="true"}}</a></span>
        </div>
      </div>

      <div class="clearfix"></div>
    </div>
  </div>
</td>
</script>
3 Likes
9

@CharlesWalter We didn’t have a live site, I was asking as we’re planning
on moving eventually from Vanilla. So was just making sure it was
possible. Sorry!

10

Does anyone have a theme or example of this running on the latest Discourse? I tried @charleswalter’s code but it didn’t work and my topic list just disappeared.

I think this is an important change as on the small support forum I run where I answer everyone’s issues it looks as though I’m the only one doing the posting. It would be far better looking if the OP had their avatar displayed on mobile.

11

Actually it works for me what I have done is to change “content” by “topic” and placing this code inside the actual topic-list-item.raw.hbs in any case someone else need this.

1 Like
12

Is this solution still compatible with the latest version?

13

No. We should update this topic @dax.

3 Likes
15

Here it is a theme component that show the topic creator in the first column of the /latest page

9 Likes