# 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:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@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")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Topic List Thumbnails** allows you to show topic thumbnails in topic list views. |
| 👓 | **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) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-topic-thumbnails](https://github.com/discourse/discourse-topic-thumbnails) |
| 📖 | **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. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=topic-list-thumbnails "Ask for support on configuring and using Topic List Thumbnails") [🐛&nbsp; **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") [👀&nbsp; **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)") [💡&nbsp; **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
![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << this one will be the thumbnail

```

There are five modes, configurable per category or tag using the theme settings.

For example:

Grid mode:

 ![grid mode example](https://global.discourse-cdn.com/meta/original/3X/0/9/098f8167ccce99ec3e4416f2e6943595561bb6c9.jpeg)

Masonry mode:

 ![masonry mode example](https://global.discourse-cdn.com/meta/original/3X/4/f/4f939545372be903c1d541bcde084bfd7932dcfa.jpeg)

And list mode:

 ![list mode example](https://global.discourse-cdn.com/meta/original/3X/e/b/eb4f548f288ed42054af1687906609d098229583.jpeg)

### 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:

---

_[View the full topic](https://meta.discourse.org/t/topic-list-thumbnails/150602)._