Topic List Author

[Lilly]

	Summary	Makes the topic author appear instead of posters and allows changing the placement of the author column in topic list pages.
	Repository	https://github.com/Lillinator/topic-list-author
	Preview	https://discourse.theme-creator.io/theme/Lilly/topic-list-author
	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

This is a theme component that is based on the Topic Author and Original Posters Avatars concepts, which makes the topic author appear in topic filter list pages (ie: /latest /new /unread /top) and the category homepage (if using a category view with topic list). Also features username only option on topic list pages. I also added settings to change where the author column appears since i have seen this request before - this can be changed for topic list pages and the category homepage.

This component works with both mobile and desktop views. It is compatible with Topic List Stats to customize topic list page stats and columns display. I have used the latest Discourse templates so please update your Discourse instance to the latest version before installing.

Screenshots:

Author avatar in default column placement

Author avatar in first column

Author avatar in last column

Show only author's username

Author avatar on category homepage topic list

Author avatar in last column of category homepage topic list

Mobile view with topic author avatar in first column

Mobile view with topic author avatar in last column

Mobile view with topic author name instead of avatar

Settings

To-do

Simplify the settings for topic author column order display. Add option to show both username and avatar. Fine tune mobile view.

Thanks to many people for snippets, support and inspiration, especially @awesomerobot, @Don, @dax, @tshenry and @Canapin.

[davidkingham]

Nice work! Any plans to support Topic List Thumbnails?

Currently it’s broken when used together:

[Lilly]

yea probably not compatible with that component, but i can have a look later. thanks for letting me know

[rogerdean (Roger)]

Just what I need, thank you @Lilly
Could there be a way to apply this to some Categories and not others? One of my more static categories would suit this but not the main discussion area
Best
Roger

[Lilly]

I will add this option.

[Lilly]

BTW, @davidkingham this component now seems to be working with the Topic List Thumbnails component on my local dev instance.

Added theme creator preview link to the OP.

[jrgong]

have you found a workaround for this one? Having same issue on discourse 3.1.1

[Lilly]

Have you updated the component(s)? I have no problem running the both together as evidenced by my above screenshot.

[jrgong]

Yep, just double-checked and everything on latest version.

You can see it yourself here, no need to log in: KANNABIA SPRING GROW - Forum | Cannabisanbauen.net

[Canapin (Coin-coin le Canapin)]

It only happens on topics where the thumbnail is cropped. Somehow, the background image seems to overlap the .author div.

[Lilly]

How do I get that cropped view so I can reproduce this? I can see where it is happening on that forum but I can’t seem to find a way to reproduce that cropped view for the thumbnails in any of the view settings. It looks like masonary but I’m trying to get a cropped pic in there.

I see the topic thumbnails component is using z-index properties and some transparency, so I suspect those are causing issues in cases when the image is being cropped (which I still can’t figure out how to reproduce). Hard for me to write a fix for those particular cases. I don’t particularly like messing with other component properties.

[Canapin (Coin-coin le Canapin)]

This seems to work (can’t fully explain why it needs a specific rule because I didn’t explore the HTML and CSS in-depth):

.topic-list-item .author {
    z-index: 1;
    background-color: rgba(var(--primary-low-rgb), 0.85);
}

Before:

After:

[Lilly]

yea I had that same fix but without the transparency. I guess I can apply that. Seems weird to target something specific to another component. thanks!

I still haven’t been able to get that cropped view on my dev instance. LOL.

edit: ok I applied that fix. @jrgong and @davidkingham can you update the component and let me know if that fixes it? I noticed the problem seems to be only with desktop view so I only applied the fix to desktop. and thank you @Canapin

[davidkingham]

That seems to have done the trick. Thank you Lilly, and Canapin!

[jrgong]

Lilly, you are awesome!
That did the trick for us!

[Lilly]

Heh, thank @Canapin, he came up with the fix.

Glad that worked. Let me know if there is anything else I can help with regarding this component.

[Canapin (Coin-coin le Canapin)]

@Lilly

I still haven’t been able to get that cropped view on my dev instance. LOL.

Besides editing directly the CSS in the browser dev tools, which is fragile as the modification will be gone of the HTML changes or if we reload the page, I use GitHub - webextensions/live-css-editor: Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass) almost daily when I work on CSS customization.

[Óscar_David_Sánchez (Osvid)]

Great component! Thanks!

[Óscar_David_Sánchez (Osvid)]

Just a comment, I noticed that the flair in the author avatar is correctly displayed in the category homepage, while in the other pages it doesn’t appear.

Would it be possible to display it everywhere? That would be great because the flair is given to users supporting our community in Patreon.

Thanks!

[Lilly]

Oh good question. I’ll have a look at this when I get some time.