Author name plus avatar

Don · August 16, 2022, 4:10pm

Hello Mike,

Sam’s Simple Theme is overriding the topic-list template and only shows the latest posters not the authors. Here a really cool guide how to override template.

There are 2 templates in core what we should override for this.

discourse/topic-list-header.hbr at main · discourse/discourse · GitHub
topic-list-header to modify the header section.
discourse/topic-list-item.hbr at main · discourse/discourse · GitHub
topic-list-item to modify the avatar and add username.

You can find all templates in here: discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub

Let’s start

Actually I made a theme component to present it easier. You can use it if you want.

You can select from two columns with settings.
By default it show the last post but you can change it to show authors.
Screenshot 2022-08-16 at 17.00.54

Topic list header
Firstly we have to modify the column header.

I added these lines and removes posters and views and activity column header.

github.com

VaperinaDEV/discourse-custom-user-column/blob/438529e70d03352296d13d6d46b20769f7cbf845/javascripts/discourse/templates/topic-list-header.hbr#L17-L22


      
          {{#if (theme-setting 'author_column')}}
            {{raw "topic-list-header-column" sortable=sortable order='created' forceName=(theme-i18n 'author_header')}}
            {{else}}
            {{raw "topic-list-header-column" sortable=sortable order='activity' forceName=(theme-i18n 'last_header')}}
          {{/if}}
          {{~raw-plugin-outlet name="topic-list-header-after"~}}

This is add the header Last Post or Author
Last Post

Author

I’ve also added a locale file to translate these…
You can translate here
Screenshot 2022-08-16 at 17.05.07

Topic list item

I removed the posters column and add the Last Post or Author column.

Last Post Column

Authors Column with (topic creation) time.

github.com

VaperinaDEV/discourse-custom-user-column/blob/215b70d13145477d9a9881868dc33c0d2e420a89/javascripts/discourse/templates/list/topic-list-item.hbr#L65-L86


      
          <td class="custom-user-column topic-list-data">
            <div class="custom-user-column-avatar">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.createdAt}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="medium"}}</a>
                {{else}}
                <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
              {{/if}}
            </div>
            <div class="custom-user-column-info">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.firstPostUrl}}">
                  {{format-date topic.createdAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
                {{else}}
                <a href="{{topic.lastPostUrl}}">
                  {{format-date topic.bumpedAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
              {{/if}}

This file has been truncated. show original

Finally add some CSS.

github.com

VaperinaDEV/discourse-custom-user-column/blob/main/desktop/desktop.scss

.custom-user-column {
  &.topic-list-data {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: var(--font-0);
    .custom-user-column-info {
      display: flex;
      flex-direction: column;
      a {
        color: var(--primary-high);
        span.relative-date {
          font-weight: 600;
        }
      }
      .editor a {
        font-size: var(--font-down-1);
      }
    }
  }

This file has been truncated. show original

Hope it helps! You can compare with the core templates or if you use any custom templates and change or use the component if it fits your needs.

Topic		Replies	Views
Display Topic Author on Topic List ux	7	2253	February 8, 2021
Username, user title, and post count beside avatar dev	4	1326	February 4, 2020
Add column to home page topic list support	8	1122	April 27, 2020
Can Categories mode show something other than most recent poster? support	3	368	January 31, 2023
Change Default Avatar in home page (for original author avatar) support	6	2548	January 14, 2019

Author name plus avatar

Related Topics