Author name plus avatar

P2W · April 26, 2022, 4:14pm

Hey all - our community has a desire to see post author’s name in addition to their avatar. Any tips on emulating this display, as seen on Sam’s Simple Theme.

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.

system · February 19, 2023, 3:52pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Display Topic Author on Topic List UX	7	2420	February 8, 2021
Username, user title, and post count beside avatar Dev	4	1406	February 4, 2020
Add column to home page topic list Support	8	1211	April 27, 2020
Can Categories mode show something other than most recent poster? Support	3	431	January 31, 2023
Change Default Avatar in home page (for original author avatar) Support	6	2693	January 14, 2019

Author name plus avatar

Related Topics