# MD Topic List component

**URL:** https://meta.discourse.org/t/md-topic-list-component/117694
**Category:** Theme component
**Created:** [May 14, 2019, 1:59pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694 "2019-05-14T13:59:35Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 14, 2019, 1:59pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/1 "2019-05-14T13:59:35Z")

</div>

![The image shows a sample screenshot of a discussion forum interface with various topics, including a welcome thread, central questions, guidelines, and a dropdown option about editing themes. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/0/f/e0f5f25e02261b4d3fb4ac5e14f7ef83c46abbb7.jpeg)

A lighter topic-list presentation for your Discourse forum. The posters column has been deleted but some informations has been added (name and avatar of the last poster) in the activity column and below the topic title (name of the topic creator, and a little emoji for the tags).

  

### Compatibility

This theme component is compatible with the tags, featured links functions, and any functions available in the [original topic-list version](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs). Any category style presentation (bullet, bar, box) should work with this component.

The theme component has been tested on a few color palettes, it will work with light, neutral or dark themes.

Sadly, the theme component might not work with plugins that already changes the topic-list presentation like the Topic List Previews.

Let me know if you have any issue !

| | | |
| --- | --- | --- |
| 👓 | **Preview** | [md-topic-list - Preview](https://theme-creator.discourse.org/theme/Steven/md-topic-list) |
| 🛠 | **Repository** | [md-topic-list](https://github.com/mondiscourse/md-topic-list) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

<div class="post-metadata">

### Author: ![GuilhermeBac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/guilhermebac/32/139122_2.png) [@GuilhermeBac](https://meta.discourse.org/u/GuilhermeBac)
#### Post date: [September 29, 2019, 5:10am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/3 "2019-09-29T05:10:54Z")

</div>

Love this component.  
Is there any easy way to make the **poster-info** div exactly as in the screenshot?  
I think this makes it more readable

Author name above ⬆  
Relative-date below ⬇  
 ![image](https://global.discourse-cdn.com/meta/original/3X/3/4/341eb8120f5697a0abe33139b6f31d42dfc53ad0.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [September 29, 2019, 10:22am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/4 "2019-09-29T10:22:02Z")

</div>

It’s not a bad idea actually, I might use this by default 🤔

But for now, you can edit the component, ib the header part, around line 60 to 69

Original

```plaintext
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
<br />
<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>
</div>

```

What you want to use

```plaintext
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<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>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>

```

You’ll need to edit this after each update but the component will not be upgraded that much.

You could also fork the repository, edit the file and use this version on your forum, if you’re familiar with github

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 2, 2019, 10:50pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/5 "2019-10-02T22:50:14Z")

</div>

I tried this change on my forum and I think it’s a good idea, I pushed an upgrade

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/1/01bbfe3f3b846ee80ec9d28d5de52e2bb64a3265.png)

If you prefer what we previously used, let me know, I can make an alternate version

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [November 29, 2019, 1:16am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/6 "2019-11-29T01:16:06Z")

</div>

@Steven did it stoped working with the last update? Its broke here.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 29, 2019, 11:48am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/7 "2019-11-29T11:48:37Z")

</div>

I didn’t notice yet, I usually do my upgrades on the weekend, I’ll check this tonight

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 29, 2019, 5:29pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/8 "2019-11-29T17:29:55Z")

</div>

I upgraded a forum and checked the logs, no issue for me.

Can you share a screenshot of the issue on your forum ? If I remember correctly you use a heavily customized theme, I think it might come from it. But I’ll see what I can do

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [November 30, 2019, 8:28pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/9 "2019-11-30T20:28:05Z")

</div>

> [@Steven](#):
>
> If I remember correctly you use a heavily customized

I don’t use this theme anymore.

I tested in Material Design without CSS customizations, can’t make it work in any theme. Maybe it’s a plugin?

 ![59](https://global.discourse-cdn.com/meta/original/3X/0/b/0b4cccaef306e275b93d77d792363e25d9b32096.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 30, 2019, 9:04pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/10 "2019-11-30T21:04:39Z")

</div>

If you have **Discourse topic previews** for example the component will not work because it also uses change the topic-list-item.raw template

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [November 30, 2019, 9:10pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/11 "2019-11-30T21:10:55Z")

</div>

You’re right about it. But I only use it for [News Plugin 📰](https://meta.discourse.org/t/news-plugin/107971), that requires the Topic Preview.

So I have to choose between then. 😪

---

<div class="post-metadata">

### Author: ![ScammerRevolts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scammerrevolts/32/577396_2.png) [@ScammerRevolts](https://meta.discourse.org/u/ScammerRevolts)
#### Post date: [December 18, 2019, 12:15am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/12 "2019-12-18T00:15:53Z")

</div>

Looks awesome on my forum and the little tag emoji is nice haha, awesome work!

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [January 9, 2020, 9:39am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/13 "2020-01-09T09:39:48Z")

</div>

Using this too on my instance. Looks so much cleaner. I never understood the concept of the 5 avatars, looks so cluttered.

---

<div class="post-metadata">

### Author: ![ScammerRevolts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scammerrevolts/32/577396_2.png) [@ScammerRevolts](https://meta.discourse.org/u/ScammerRevolts)
#### Post date: [March 26, 2020, 12:23am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/14 "2020-03-26T00:23:17Z")

</div>

Just updated to the most recent ver of discourse ( 2.5.0.beta2 ) and it seems user avatars on posts have disappeared.

Forum link: [https://techscammersunited.com/](https://techscammersunited.com/)

 ![ss](https://global.discourse-cdn.com/meta/original/3X/2/f/2fd08438024f52addbf56064a22c789fb3d08847.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 26, 2020, 1:51am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/15 "2020-03-26T01:51:25Z")

</div>

I’ll check this tomorrow, I updated a few days ago, and it was fine, maybe something changed

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 26, 2020, 1:28pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/16 "2020-03-26T13:28:08Z")

</div>

Thanks for reporting, it is fixed now. You can upgrade the component and reactivate it

---

<div class="post-metadata">

### Author: ![ScammerRevolts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scammerrevolts/32/577396_2.png) [@ScammerRevolts](https://meta.discourse.org/u/ScammerRevolts)
#### Post date: [March 26, 2020, 2:53pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/17 "2020-03-26T14:53:15Z")

</div>

Ah, ty for the quick fix man! It’s working like a charm now 🙂

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [March 27, 2020, 11:32am UTC](https://meta.discourse.org/t/md-topic-list-component/117694/19 "2020-03-27T11:32:10Z")

</div>

I have updated to the newest version and my avatars are gone (2.4.1).  
I had to disable this component for now.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 27, 2020, 12:58pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/20 "2020-03-27T12:58:21Z")

</div>

You need to upgrade Discourse also and it will be fixed

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [March 27, 2020, 1:12pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/21 "2020-03-27T13:12:32Z")

</div>

Unfortunately for me, that means lots of upgrades (18 custom plugins) so I tend to update once every 3-4 months. I guess I am out of luck 😃

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [March 27, 2020, 1:14pm UTC](https://meta.discourse.org/t/md-topic-list-component/117694/22 "2020-03-27T13:14:08Z")

</div>

Anyway to access the previous version?

[Next page](https://meta.discourse.org/t/md-topic-list-component/117694.md?page=2)