Is it possible to put avatar picture before topics?

I searched here, but I didn’t find anything, maybe google translate uses a term that you are not using…

I wanted pictures of people’s avatars to appear before topics like this

The avatar of the topics always show the photo of who was the last to comment on the topic, is this an altar for whoever created the topic and leave it fixed? That is, the photo that will appear will be of the person who created the topic and will stay that way forever.

1 Like

Hello, check out this component.

2 Likes

This is really good, thanks for helping me, but how do I put the avatar before the topic?

1 Like

I am not an expert in this but let me do some tests in my forum to see if I can do what you ask.

@Danielabc I think this could be of use to you.

Desktop / Head

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if showParticipants}}
  {{raw "list/posters-column" posters=topic.participants}}
{{/if}}
<td class='author' style="width: 60px;"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="55"}}</a></td>
{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}
<td class='main-link clearfix topic-list-data'>
  {{~raw-plugin-outlet name="topic-list-before-status"}}
  {{raw "topic-status" topic=topic}}
  {{~topic-link topic class="raw-link raw-topic-link"}}
  {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
  {{~/if}}
  {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  <div class='creator'>
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {{~#if topic.creator ~}}
      <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}></a>
    {{~/if ~}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
</td>


{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>


<td class="activity" title="{{topic.bumpedAtTitle}}">

   
        <span class='latest-info'>
          <span class='name'>
       
          </span>
          {{format-date topic.bumpedAt format="medium"}}
        </span>
    </a>
</td>

</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if showPosters}}
  {{raw "topic-list-header-column" order='posters' forceName='Author' style='width: 70px;' }}
{{/if}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}

{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script type="text/x-handlebars" data-template-name="components/latest-topic-list-item">
<div class='topic-poster'>
 {{#user-link user=topic.creator}}
  {{avatar topic.creator imageSize="large"}}
 {{/user-link}}
</div>
<div class='main-link'>
 <div class='top-row'>
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
  {{#if topic.featured_link}}
   {{topic-featured-link topic}}
  {{/if}}
  {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
 </div>
 <div class='bottom-row'>
  {{category-link topic.category}}
  {{discourse-tags topic mode="list"}}
 </div>
</div>
<div class='topic-stats'>
 {{raw "list/posts-count-column" topic=topic tagName="div"}}
 <div class="topic-last-activity">
  <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
 </div>
</div>
</script>
<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '80');
});
</script>


<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

  <td class='main-link clearfix'>
    {{raw "topic-status" topic=topic}}
    {{topic-link topic}}

    {{#if controller.showTopicPostBadges}}
      {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
    {{/if}}

    {{raw "list/topic-excerpt" topic=model}}

    <div class='creator'>
        {{#if showCategory}}
            {{category-link topic.category showParent="true" onlyStripe="true"}}
        {{/if}}

        {{~#if topic.creator ~}}
            <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            &nbsp;
            {{format-date topic.createdAt format="medium-with-ago"}}
        {{~/if ~}}
        
        {{raw "list/action-list" topic=topic postNumbers=topic.bookmarked_post_numbers className="bookmarks" icon="bookmark"}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
    </div>
  </td>

  {{#if controller.showLikes}}
    <td class="num likes">
      {{number topic.like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  {{#if controller.showOpLikes}}
    <td class="num likes">
      {{number topic.op_like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  <td class="num replies">
    {{topic.replyCount}}
  </td>
    <td class="last-post">
  
              
      <a href="{{topic.lastPostUrl}}">
        {{format-date topic.bumpedAt format="medium-with-ago"}}
      </a>
     
      
    </div>
    
  </td>
  
 </script>

Desktop / Css

.topic-list .posters {
    width: 50px;
}

I loved this code, thank you, but I’m just having some problems, do you know how to edit this code? I want the avatar to have the photo of the last person who commented on the topic, I saw that the name of the topic creator appears after the category name, can you put a word before? Of type “Topic created by:”