Discourse Topic List Author & Posters

[Lilly]

	Summary	Adds a topic author to the left column of topic list pages, as well as an option to only display most recent poster in the default posters column. Author avatar can also be sized and shaped.
	Preview	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	Repository	https://github.com/Lillinator/discourse-topic-list-author-posters
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Overview

This Discourse theme component inserts a topic author avatar into the first column of all topic list routes and has settings that let the admin specify avatar shape and size. Also, the author’s avatar will not show as the first avatar in the posters list.

There is also a setting to make the posters avatars column display only the latest (most recent) poster, but only if there is more than one topic participant. Thus, the author’s avatar will only show if there are other posters in the topic.

In addition, admins can also choose to display the topic author on the category page when latest topic list views are enabled (i.e.: Categories with latest topics), and there are avatar size and shape options as well.

There is also a toggle for vertically aligning the row contents top or middle.

In small viewport (mobile size), the author will appear where latest poster avatar is.

This topic works well with Topic List Excerpts and Discourse AI summary gists.

Settings

Screenshot of settings with default options in component admin page

Settings	Description
Topic list author avatar size	Size of avatars in the author avatar column of topic list page routes - small, medium, or large.
Topic list author avatar border radius	Avatar rounding on topic list page routes: 0% = square → 50% = circle. tab_style = rounded left corners
Topic list show last poster only	Show just the last poster avatar in the posters column, but only if there are more than one participant in the topic.
Vertically align row top	Toggle for aligning the rows top or middle
Show author on categories page	Show the author avatar instead of the latest poster in topic lists on the categories page.
Category page topic avatar size	Size of avatars in the author avatar column in categories page topic lists - small, medium, or large.
Category page avatar border radius	Avatar rounding on categories page: 0% = square → 50% = circle. tab_style = rounded left corners

Screenshots

Here are some screenshots with different avatar size and shape settings, also showing with expanded AI summary gists.

Screenshots of various topic list pages with different component settings enabled, showing both compact and expanded gists modes, and expanded/collapsed sidebar

With default settings:

Large tab_style avatar shape with summary gists expanded:

Small avatars with 15% border-radius shape and Topic_list_show_last_poster_only enabled:

Medium sized avatars with 0% border-radius (square) with Topic_list_show_last_poster_only enabled, and summary gists expanded:

Screenshots of Category Page showing 2 different sizes & shapes of avatars with author or last poster.

Default component settings, with medium sized round avatars and Show_author_on_categories_page enabled:

Large sized tab_style avatars and Show_author_on_categories_page disabled:

Screenshot of mobile sized view

With tab_style author avatars:

---

Notes

• Inserts the author’s avatar and changes the posters column where expected in profile page tabs.
• Mobile behavior is the same as default in topic footer lists (suggested/related topics) and in profile and inbox tab pages.
• Not really compatible with horizon theme.

---

Possible future todos

• Add mobile disable toggle?
• Category and tag exemptions?
• Left-to-right support?
• Shape poster avatars?

As always, thank you to @Moin for the idea, feedback and debugging help.

[jordanjay29]

Thank you for making this, it instantly resolved a potential issue for me!

@Lilly

Further styling improvements

Perhaps this is already planned, wanted to mention that I noticed the padding and alignment of the poster avatar column on the left has an odd indentation (that isn’t present on mobile with the component disabled, for comparison). This looks like the td.posters text-align attribute is affecting the image as well.

The posters avatar list alignment also changes when enabled, and this looks like td.topic-list-data alignment is overriding the default. Easy enough to make stylesheet changes on my end if you’re happy with these otherwise.

Fantastic component, thanks again.

[Lilly]

thanks for the report, i just pushed a fix. update the component and let me know if that helps.

[jordanjay29]

The avatar left alignment is better on desktop. I added this CSS to adjust the middle poster’s column to my preferences:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

I think your future mobile disable will help, too, because the styling uses a bit more whitespace than needed.

[Lilly]

@jordanjay29

The avatar left alignment is better on desktop. I added this CSS to adjust the middle poster’s column to my preferences:

the top vertical alignment is intentional to be consistent with the rest of the topic card and won’t be changed.

i didn’t make any changes to mobile but i’ll look.

[jordanjay29]

The vertical alignment may have been too broadly applied in your CSS and probably only needs to target the custom-author-column where you’re using td.topic-list-data. I suspect changing the target to td.custom-author-column.topic-list-data will resolve and remove the need for custom styling to fix on my end.

[Lilly]

no i intended for the posters column to vertically aligned top along with all the other row elements. it looks out of place aligned middle (especially if you enable excerpts or ai-gists), but i suppose it is a matter of taste so you an adjust how you like.

vertical alignment

default:

with summary:

i pushed a small change for mobile that should fix the space on the left.

[jordanjay29]

Since my forum doesn’t use excerpts or gists or AI summaries, the default Discourse look is preferred. That change sounds like it makes more sense in a dedicated theme component to me, but we differ and I fixed it on my end so no hard feelings.

Mobile looks a tad better, thanks!

[Lilly]

@jordanjay29 after thinking about this more, i decided to add an alignment toggle (easy enough).

here you go

there is a new setting Vertically align row top that you can disable to get the middle default. let me know if that works for you.

edit: i pushed another fix for the categories page alignment.