# 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:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [May 6, 2020, 2:15pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/1 "2020-05-06T14:15:18Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Topic List Thumbnails** allows you to show topic thumbnails in topic list views. |
| :eyeglasses: | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-blog) (blog style)
[Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-grid) (grid)
[Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnail-list) (list)
[Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-masonry) (masonry)
[Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-minimal-grid) (minimal grid) |
| :hammer_and_wrench: | **Repository Link** | [https://github.com/discourse/discourse-topic-thumbnails](https://github.com/discourse/discourse-topic-thumbnails) |
| :open_book: | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. :+1:
>
> [:question: **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=topic-list-thumbnails "Ask for support on configuring and using Topic List Thumbnails") [:bug: **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=topic-list-thumbnails "A bug report means something is broken, preventing normal/typical use of the theme component") [:eyes: **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=topic-list-thumbnails "Discussion about the user interface of Topic List Thumbnails, and how features are presented (including language and UI elements)") [:bulb: **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=topic-list-thumbnails "Discussion about how existing Topic List Thumbnails features can be improved or enhanced, and how proposed new features could work")
### Features
Optimized images are generated for the lists, and different resolutions are made available for high-dpi displays. Images are lazy-loaded as you scroll (where native browser support is available).
By default, Discourse will use the first image in the OP of the topic. If you would like to select a different image from the OP, add `|thumbnail` to the markdown. For example
```plaintext
 << this one will be the thumbnail
```
There are five modes, configurable per category or tag using the theme settings.
For example:
Grid mode:
Masonry mode:
And list mode:
### Tips and Tricks
If you want Oneboxes in your posts to generate thumbnails, you will need to turn on this site setting: `download_remote_images_to_local`. You’ll also need to rebake the relevant posts.
### Settings
| Name | Description |
| --- | --- |
| `default_thumbnail_mode` | Which thumbnail display mode should be used by default |
| `docs_thumbnail_mode` | If the docs plugin is enabled, which thumbnail display mode should be used for docs topics |
| `blog_style_categories` | The blog-style view will be used in these categories. This style makes use of topic-excerpts if enabled via theme or theme component |
| `minimal_grid_categories` | The minimal grid view will be used in these categories |
| `grid_categories` | The grid view will be used in these categories |
| `masonry_categories` | The masonry view will be used in these categories |
| `list_categories` | The list view will be used in these categories |
| `blog_style_tags` | |
| `minimal_grid_tags` | The minimal grid view will be used for these tags |
| `grid_tags` | The grid view will be used for these tags |
| `masonry_tags` | The masonry view will be used for these tags |
| `list_tags` | The list view will be used for these tags |
| `suggested_topics_mode` | Which thumbnail display mode should be used for suggested topics? If blank, will follow the ‘enable outside topic lists’ setting. |
| `enable_outside_topic_lists` | Enable thumbnails on non-topic-list pages (e.g. user activity, personal messages, suggested topics) |
| `placeholder_icon` | Icon to display on topics without thumbnail images |
| `mobile_thumbnails` | Enable thumbnails on mobile devices |
| `list_thumbnail_size` | Base size for thumbnails in the ‘list’ view |
> :discourse2: **Hosted by us?** Theme components are available to use on our Pro, Business, and Enterprise plans.
> Last edited by @Moin 2026-05-19T07:03:58Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 6, 2020, 2:48pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/2 "2020-05-06T14:48:45Z")
Wonder where you got the idea for this? :thinking::smiley:
Absolutely fantastic that core is paying more attention to image delivery and presentation. I like the direction!
(If this doesn’t fully replace Topic List Previews, there is now at least potential to eliminate a lot of bespoke API work from it which I won’t have to maintain anymore, great stuff!)
PS I just tested it and one thing that would be quite nice is if Polls generated a thumbnail so the charts could surface …
---
### Author:  [@Krischan](https://meta.discourse.org/u/Krischan)
#### Post date: [May 19, 2021, 6:54pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/161 "2021-05-19T18:54:31Z")
> [@david](#):
>
> If you would like to select a different image from the OP, add `|thumbnail` to the markdown.
This is a great feature. Does this come with Discourse 2.7 as mentioned here? Or is the syntax different?
> [@Discourse Version 2.7](https://meta.discourse.org/t/discourse-version-2-7/166607/2):
>
> Allow post/topic thumbnails to be prioritized via markdown
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [May 19, 2021, 6:56pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/162 "2021-05-19T18:56:55Z")
It’s available in Discourse 2.7 stable, yes. The syntax is the same :slight_smile:
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 21, 2021, 6:03pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/163 "2021-05-21T18:03:27Z")
I have a very odd problem that only applies to one member on my site. Some thumbnails do not display, seemingly randomly. It displays the default icon as if there was no image, yet for myself and everyone else the thumbnail displays. I had him look in his console and there is nothing pertinent, nothing in the logs either. I’ve had him try clearing the cache, trying different browsers and devices, and using a different isp. I even had him try a theme with only this component enabled. No matter what he tries this still happens. I even tried impersonating him and then it doesn’t happen for me. Any other thoughts on troubleshooting this? Thanks!
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 21, 2021, 6:47pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/164 "2021-05-21T18:47:31Z")
Have him try on mobile with wifi disabled so he’s not going through his home network, but the cellular network. This will eliminate anything on his network from interfering.
But if you have tried “different ISP” then maybe not.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 22, 2021, 9:09am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/165 "2021-05-22T09:09:01Z")
> [@david](#):
>
> If you would like to select a different image from the OP, add `|thumbnail` to the markdown.
I can’t get this to work anymore, did this revert perhaps?
Also, the feature is not easy to discover for users. Would it be possible to add an option to select the thumbnail to the ‘size selection’ in the preview?
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 24, 2021, 2:48pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/166 "2021-05-24T14:48:43Z")
Thanks Jeff, he has tried hotspotting to his phone, and at a friends house with a different ISP. I thought it might be a CDN issue so I tried clearing the CDN cache which did not help him. I also tried impersonating him while using a VPN in Atlanta where he is from which did not help either. I’m not sure what else to try.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [May 26, 2021, 10:05am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/167 "2021-05-26T10:05:48Z")
3 posts were split to a new topic: [Caching for tag topic lists?](https://meta.discourse.org/t/caching-for-tag-topic-lists/191677)
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [May 27, 2021, 8:35am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/168 "2021-05-27T08:35:26Z")
> [@bartv](#):
>
> > [@david](#):
> >
> > If you would like to select a different image from the OP, add `|thumbnail` to the markdown.
>
> I can’t get this to work anymore, did this revert perhaps?
It’s still working for me. Can you share some more details about what you tried, and what result you’re seeing? This is what I have in my test OP:
```plaintext
```
and the second image is correctly selected as the thumbnail.
> [@bartv](#):
>
> Would it be possible to add an option to select the thumbnail to the ‘size selection’ in the preview?
I agree that would be nice, but I don’t think it would be needed for most sites. I think it would make a great separate theme component.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 27, 2021, 11:35am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/169 "2021-05-27T11:35:01Z")
Ha, that’s embarrassing, of course it _does_ work now.. :facepalm:
---
### Author:  [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [May 28, 2021, 12:00pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/170 "2021-05-28T12:00:51Z")
> [@david](#):
>
> ``
Hi @david,
I have the following requirement and maybe you can point me to how to achieve this.
Sometimes we have a topic that we want to share via social media and we prepare an image for it that should be used as thumbnail and for the og:image tags, but we don’t want it to be visible inside the topic.
How could we realize something like this e.g. add “hide” to the sizes and then a class is added to the image container that applies “display: none;”?
> ``
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [May 28, 2021, 12:07pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/171 "2021-05-28T12:07:51Z")
Maybe you could use [Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516) to do something like
```plaintext
[wrap=hidden]
[/wrap]
```
Then some CSS like
```css
div[data-wrap="hidden"]{
display: none;
}
```
---
### Author:  [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [May 28, 2021, 12:21pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/172 "2021-05-28T12:21:23Z")
Oh, did not know about this one. Neat, thank you!
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [June 10, 2021, 2:14am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/174 "2021-06-10T02:14:03Z")
The `alert-info` banner overlaps the thumbnails, is this by design or a bug?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [June 10, 2021, 8:46am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/175 "2021-06-10T08:46:49Z")
It’s somewhat by design. Normally, that bar sits on top of the column headings in the topic list. The alternative would be for the bar to “push down” all the topics when it appears, which would make the entire UI jump down, and could be quite jarring.
I’m not sure why there is a ~1px gap on the right hand side of the bar in your screenshot. That could be an issue with the component, or it could be related to your custom theme CSS.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [July 5, 2021, 7:15am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/177 "2021-07-05T07:15:30Z")
Is it possible to show the number of likes on the thumbnail cards + make it clickable so images can be liked straight from the gallery view?
---
### Author:  [@th21](https://meta.discourse.org/u/th21)
#### Post date: [August 1, 2021, 7:42pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/178 "2021-08-01T19:42:20Z")
list categories is not working on mobile mode even when check ` Enable thumbnails on mobile devices` ?
---
### Author:  [@yhmtsai](https://meta.discourse.org/u/yhmtsai)
#### Post date: [August 11, 2021, 8:58pm UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/179 "2021-08-11T20:58:22Z")
Hi, it is pretty cool.
Is it possible to use the hotlink figure (from imgur for example) as thumbnail?
---
### Author:  [@ChanTallyagora](https://meta.discourse.org/u/ChanTallyagora)
#### Post date: [September 1, 2021, 3:03am UTC](https://meta.discourse.org/t/topic-list-thumbnails/150602/180 "2021-09-01T03:03:03Z")
hi I just set the blog category to use list categories, but it shows in every categories, have I did some wrong set step?
[Next page](https://meta.discourse.org/t/topic-list-thumbnails/150602.md?page=2)