I want to display OP avatar in latest column of the category.
Here
I had read some docs about how2create a component and tried to do it by imitating Mobile OP avatars.
https://github.com/scvoet/discourse-desktop-op-avatars
Thanks for your help.
I want to display OP avatar in latest column of the category.
Here
https://github.com/scvoet/discourse-desktop-op-avatars
Thanks for your help.
I’m commenting on this because I want this tooooo!!! It’s been driving me nuts that I can’t make this change…
You can try this CSS:
.latest-topic-list-item .topic-poster {
order: 3;
text-align: right;
}
You can target other columns and set their order
as well as long as they have display: flex;
(if you want for example put the avatar between the last activity and the topic’s name).
@Canapin It moved the avatar images to the right, but is still displaying the avatar of the most recent poster, as oppose to the original poster…
There is a theme-component that shows Topic Author instead of the most recent poster.
Sorry, I misunderstood What you were asking for.
If you only want to change that in the Category page and don’t want the other changes that the Discourse Topic Author will make you can override the components/latest-topic-list-item
With something like below in your theme:
<script type="text/x-handlebars" data-template-name="components/latest-topic-list-item">
{{plugin-outlet name="above-latest-topic-list-item" connectorTagName="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 unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl}}
</div>
<div class="bottom-row">
{{category-link topic.category}}{{discourse-tags topic mode="list"}}{{! intentionally inline to avoid whitespace}}
</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>
<div class="topic-creator">
{{#user-link user=topic.creator}}
{{avatar topic.creator imageSize="large"}}
{{/user-link}}
{{user-avatar-flair user=topic.creator}}
</div>
</script>
But you will be overriding a template so if it ever gets changed in the core, it is up to you to keep it updated.