Original Poster Headshot as the first column on Topic List Pages

themes-discussion

(Andrew Youderian) #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!


(Sam Saffron) #2

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


(Andrew Youderian) #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.


(Jeff Atwood) #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…


(Andrew Youderian) #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?


(Kane York) #6

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


(Andrew Youderian) #7

Fantastic, thank you - greatly appreciated!


(Charles Walter) #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>

(Andrew Youderian) #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.


(Alexis Duran) #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.