# Topic List Thumbnails

**URL:** https://meta.discourse.org/t/topic-list-thumbnails/150602
**Category:** Theme component
**Tags:** official, topic-list-thumbnails
**Created:** [May 6, 2020, 2:15pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602 "2020-05-06T14:15:18Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 11, 2022, 2:03pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/205 "2022-01-11T14:03:46Z")

</div>

I’m afraid it looks like the Discourse Topic Author component overrides some core templates, which means that it’s incompatible with topic-list-thumbnails. You’ll need to pick one of them to use.

---

<div class="post-metadata">

### Author: ![ariznaf](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@ariznaf](https://meta.discourse.org/u/ariznaf)
#### Post date: [January 11, 2022, 2:07pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/206 "2022-01-11T14:07:17Z")

</div>

It seems you are right, I can do the previews with the thumbnails from the preview link at the bottom of the TC page.

We used the author theme component to customize the avatar where it was shown, and we used a customization in order to get squares with rounded corners instead of circles.

But even if I disable the topic author, I cannot see the thumbnails.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 11, 2022, 2:11pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/207 "2022-01-11T14:11:11Z")

</div>

What if you go to the topic-list-thumbnails component, and use the “Preview” button. Does it work then?

If so, it suggests a conflict with one of the other themes/components.

---

<div class="post-metadata">

### Author: ![ariznaf](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@ariznaf](https://meta.discourse.org/u/ariznaf)
#### Post date: [January 11, 2022, 2:14pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/208 "2022-01-11T14:14:03Z")

</div>

Yes it seems to work.

Seems both are incompatible between them.  
I have to see what was the use of topic author and decide if we disable it (or we find a solution).

I see that this plugin does not excepert the post and you have another one that does, will try it too.

---

<div class="post-metadata">

### Author: ![ariznaf](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@ariznaf](https://meta.discourse.org/u/ariznaf)
#### Post date: [January 11, 2022, 2:19pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/209 "2022-01-11T14:19:24Z")

</div>

Now it seems to work, with excerpts and thumbnails and avatar customization.

Just disabling Author topic.

Have to read what it did, and why we installed it, as it has been working for quite long and I don’t remember the use.  
If it is not all that important I just will disable it.  
Thanks a lot.  
@david :  
By the way: as an improvement, it would be great to add an option to show the avatar for topics that have no image in it, instead of just showing a selected image.  
With an option or using a special meaning placeholder name like $avatar or something like that.

For many uses, it is better to see the author avatar than just the same icon for all the topics with no image.  
Another improvent I would like to see is the option to include the excerpts (generated by the corresponding TC) in the masonry and grid views, not only in the list view.

It woud be great to be able to read something of the content.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [January 23, 2022, 11:17pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/210 "2022-01-23T23:17:56Z")

</div>

I run into the same issue, did you find how to display the last image instead of the first one in OP?

---

<div class="post-metadata">

### Author: ![puchal](https://avatars.discourse-cdn.com/v4/letter/p/87869e/32.png) [@puchal](https://meta.discourse.org/u/puchal)
#### Post date: [February 24, 2022, 9:23pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/211 "2022-02-24T21:23:57Z")

</div>

Hi, is there an easy way to use e.g. category icon as a place holder image? With old solution (excerpts module) only topics with image in first post had image thumbnail, other had nothing (in list view). With TC I am able to see thumbnails of images, but if topic has no image in a body, it displays a placeholder icon. Is there a way to disable the icon (but keep thumbnails for topics with images), or use category logo as thumbnail? Thank you! Other than that, great component!

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [April 2, 2022, 11:47pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/212 "2022-04-02T23:47:59Z")

</div>

Set thumbnails for tag settings seems broken on latest discourse ( [6555f0c11b](https://github.com/discourse/discourse/commits/6555f0c11bb04fb4a52b62d6cf62f4df82761cd6)) + latest topic list thumbnail component

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/841d97dbf07b351dee19b18599c03928449b2282.png)

Those 4 settings are not working on desktop/mobile.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [April 5, 2022, 2:40am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/213 "2022-04-05T02:40:49Z")

</div>

The tag setting also doesn’t work on [b20307377a](https://github.com/discourse/discourse/commits/b20307377a99b72675f195d2391815fed3c2a2ae) and does not work on theme-creator.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [April 9, 2022, 10:33pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/214 "2022-04-09T22:33:35Z")

</div>

The bug was fixed on the latest commit, I was assuming the [excerpts component](https://meta.discourse.org/t/topic-list-excerpts-theme-component/151520) is broken due to a similar reason and tried to apply the same fix on a forked repo. Sadly the result works on theme-creator but not on [6555f0c11b](https://github.com/discourse/discourse/commits/6555f0c11bb04fb4a52b62d6cf62f4df82761cd6) still.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 11, 2022, 12:37pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/215 "2022-04-11T12:37:11Z")

</div>

Yep, discourse-topic-thumbnails should be fixed by [FIX: Correctly detect current tag (#15) · discourse/discourse-topic-thumbnails@4c666e0 · GitHub](https://github.com/discourse/discourse-topic-thumbnails/commit/4c666e06dc01f9d5c0b58a2a62aaf245b262eeee)

I’ll take a look at the excerpts component 👀 Thanks for reporting @th21!

---

<div class="post-metadata">

### Author: ![tkearsley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tkearsley/32/155788_2.png) [@tkearsley](https://meta.discourse.org/u/tkearsley)
#### Post date: [April 11, 2022, 4:27pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/216 "2022-04-11T16:27:36Z")

</div>

Hi David,

Is there any way this component could be set up for a single category and not the whole site?

Thanks,  
Tom

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 11, 2022, 4:29pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/217 "2022-04-11T16:29:57Z")

</div>

Yep, it can be applied based on a specific category or tag. Once installed, you should see these settings in the theme admin section:

 ![Screenshot 2022-04-11 at 17.28.51](https://global.discourse-cdn.com/meta/original/4X/d/e/0/de05efc4380eceda14f3043376eba60f464606ee.png)

(e.g. here on Meta we have it enabled for #Customization > Theme and #Customization > Plugin, with a different mode for each)

---

<div class="post-metadata">

### Author: ![tkearsley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tkearsley/32/155788_2.png) [@tkearsley](https://meta.discourse.org/u/tkearsley)
#### Post date: [April 11, 2022, 4:31pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/218 "2022-04-11T16:31:10Z")

</div>

This is great! Can we get this installed?

Thanks,  
Tom

---

<div class="post-metadata">

### Author: ![tkearsley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tkearsley/32/155788_2.png) [@tkearsley](https://meta.discourse.org/u/tkearsley)
#### Post date: [April 13, 2022, 5:32pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/220 "2022-04-13T17:32:49Z")

</div>

What is needed to get this installed?

Thanks,  
Tom

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [April 13, 2022, 5:35pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/221 "2022-04-13T17:35:43Z")

</div>

There is a guide linked on the op

> [@david](#):
>
> | ❓ | **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)

---

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [April 29, 2022, 9:15am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/224 "2022-04-29T09:15:33Z")

</div>

Thank you so much for this useful component!  
I find that the last replied user’s avatar appears beside the thumbnail on mobile. Is this on purpose or a bug? Is it possible to hide the avatar?

 ![2022-04-29_17-15-06](https://global.discourse-cdn.com/meta/original/4X/9/0/7/907ced53010fda0e00501e03ffd717c6a5d8c0c3.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 29, 2022, 4:31pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/225 "2022-04-29T16:31:29Z")

</div>

I believe the component intentionally leaves other parts of the UI unchanged, so it’s up to the admin to make a decision about whether or not to hide the avatars there.

It can be done by adding a little CSS to your theme…

```scss
.mobile-view .topic-list-data .pull-left {
  display: none; // hides the avatars
}

.mobile-view .topic-list .right {
  margin-left: 0; // removes the space for the avatars
}

```

---

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [April 30, 2022, 6:42pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/226 "2022-04-30T18:42:22Z")

</div>

Thanks!!! It’s really kind of you.

---

<div class="post-metadata">

### Author: ![markersocial](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markersocial/32/170136_2.png) [@markersocial](https://meta.discourse.org/u/markersocial)
#### Post date: [May 7, 2022, 7:50am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/227 "2022-05-07T07:50:43Z")

</div>

Just a heads up - I’ve noticed a bug, when using the setting:

```plaintext
Enable thumbnails on non-topic-list pages (e.g. user activity, personal messages, suggested topics)

```

On the suggested topics list, the user avatar uses the url of the topic thumbnail instead of the user avatar. So there is a small blurry square shown instead of the user avatar.

Running on Discourse stable with the latest version of the component and using the Masonry grid layout.

[Previous page](https://meta.discourse.org/t/topic-list-thumbnails/150602.md?page=2)

[Next page](https://meta.discourse.org/t/topic-list-thumbnails/150602.md?page=4)
