# Topic List Previews (TLP) **URL:** https://meta.discourse.org/t/topic-list-previews-tlp/209973 **Category:** Theme component **Created:** [November 23, 2021, 12:25pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973 "2021-11-23T12:25:59Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield) #### Post date: [November 23, 2021, 12:26pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/1 "2021-11-23T12:26:00Z")
**This is a Theme Component** but has the option to add a complementary plugin. | | | | | --- | --- | --- | | ℹ | **Summary** | The original Topic Preview component that allows you to add images and excerpts (and more!) to the Topic List whilst being able to configure what additions appear on what list. | | 🛠 | **Repository Link** | [GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub](https://github.com/merefield/discourse-tc-topic-list-previews) | | 📖 | **Install Guide** | [Installing a theme or theme component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682) | | ❤ | **Sponsorship** | Please consider becoming an ongoing [sponsor of my open source work](https://github.com/sponsors/merefield) at a level that suits your or your organisation’s resources and needs to ensure this component gets the maintenance it deserves and continues to work for your site in the future. | Enjoying this Theme Component? Please ⭐ it on [GitHub](https://github.com/merefield/discourse-tc-topic-list-previews) Install this theme component Works really well with [Discourse Bars 🍻 🍸 (a sidebar framework)](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216)! ## Overview Topic List Previews allows you to: - Add thumbnails, excerpts, participant avatars and topic statistics to topic lists - Use traditional rows, responsive tiles or masonry-style layouts - Configure previews independently by topic list, category and tag - Control thumbnail size, resolution, fallbacks and display limits - Highlight selected topics with larger featured tiles - Add ‘Featured’ topics above topic lists, filtered and ordered as required - Enhance full-page search with thumbnails, excerpts and author details - Add a User Wall to activity pages - the ‘Portfolio’ feature ## The Sidecar This can be complemented with [the ‘sidecar plugin’](https://github.com/merefield/discourse-topic-previews-sidecar-pro): `https://github.com/merefield/discourse-topic-previews-sidecar-pro` This is currently a private repo for which my GitHub sponsors who contribute at least $7/month gain access. to add the following features: - ‘Actions’ — bookmark, share and like directly from the topic list - Thumbnail picker — select any image from the entire topic - Dominant-colour backgrounds based on the selected thumbnail - Automatic removal of black borders from YouTube thumbnails - Optional thumbnail recreation when rebuilding a topic post - Configurable excerpt length and optional link removal - Accepted-solution and Q&A answer previews - Option to show the latest post’s excerpt - Option to direct preview clicks to the latest post - Thumbnail previews in search results - Per-user preference for lower-resolution thumbnails Plugin install guide: [Install plugins on a self-hosted site](https://meta.discourse.org/t/install-plugins-in-discourse/19157) You need at least the Theme Component, the Plugin is optional. These settings can be applied to all or selected topic lists on a site-wide or category-specific basis. This flexible feature-set allows you create a variety of different topic list styles, including **Basic Style** > **Relevant settings** > > - topic list thumbnail > - topic list excerpt > - topic list action ![27%20PM](https://global.discourse-cdn.com/meta/original/3X/3/0/302ad968dd997f1e8b6d23aa56137731e0c3462c.jpeg) **Pinterest (Masonry) Style aka ‘tiles’** > **Relevant settings** > > - topic list tiles > - topic list thumbnail > - topic list excerpt > - topic list action > - topic list thumbnail width > - topic list thumbnail height ![image](https://global.discourse-cdn.com/meta/original/4X/c/1/d/c1d3b600fe30ac1841908ae79d8726ee1020fdd4.jpeg) which has wide format option (behind setting `topic_list_tiles_wide_format`): ![The image is a screenshot of YouTube video listings related to Star Citizen's "Fight for Pyro" live stream, playing segments of the game, as well as the SC Patch Notes, including details about the Super Hornet and citizen gameplay testing. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/6/2/8/628637b1286a41ff2da089c29d5f51b56f1fb4aa.jpeg) This works responsively so will collapse to masonry format if not given enough width (and vice versa). **Featured Images** > **Relevant settings** > > - topic list featured images tag > - topic list featured images count > - topic list featured width > - topic list featured height > - topic list featured title > - topic list featured excerpt > - topic list featured order ![33%20PM](https://global.discourse-cdn.com/meta/original/3X/7/a/7a9b5213765bac6dfe49e48861065fa81c4fbccb.jpeg) ## Toggling Excerpts: I introduced this a while back for use with my [AI Topic Summaries](https://meta.discourse.org/t/discourse-ai-topic-summary/256711) plugin. You can use it for TLP: > **[GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...](https://github.com/merefield/discourse-tc-excerpts-toggle)** > > A small Discourse theme component that adds a button to toggle on and off the excerpts in the Topic List ## Examples in the Wild 🌱 - [https://www.artofsm.art/](https://www.artofsm.art/) ## Support I do not provide any guaranteed support for free. I can provide support to businesses or institutions who sign up to one of my [GOLD or PLATINUM monthly Sponsorship tiers](https://github.com/sponsors/merefield?frequency=recurring&sponsor=merefield). There is also a [one-off bug hunt option](https://github.com/sponsors/merefield/sponsorships?sponsor=merefield&tier_id=464899&preview=false). --- _[View the full topic](https://meta.discourse.org/t/topic-list-previews-tlp/209973)._