# 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:** 20
**Page:** 1
### Author:  [@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.
| | | |
| --- | --- | --- |
| :information_source: | **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. |
| :hammer_and_wrench: | **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) |
| :open_book: | **Install Guide** | [Installing a theme or theme component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682) |
| :heart: | **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 :star: 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
**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
which has wide format option (behind setting `topic_list_tiles_wide_format`):
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
## 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 :seedling:
- [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).
---
### Author:  [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [November 29, 2021, 5:02am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/2 "2021-11-29T05:02:45Z")
Is there a way to make the featured image order based on the time the tag is added. Currently it brings the featured image of the topic which has recent activity thus pushing the latest tagged images down.
For example If I have 10 images I mark 5 of them as featured now those 5 are shown in the top bar. If I add 5 more tags these will replace the existing 5. But If any of the previous 5 topics have any comments or posts that image is brought to the front now.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 29, 2021, 3:36pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/3 "2021-11-29T15:36:04Z")
Tag? No, but there is this option to order by Created date:
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 29, 2021, 3:39pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/4 "2021-11-29T15:39:14Z")
Warning: I’m going to be pushing a Tiles (item) layout change very soon. If you have some CSS tweaks these might need to be … erm … tweaked:
I promise I won’t do this very often, but this one is to tidy things up and facilitate some new functionality that might be appearing in the future …
Currently the change is on the `beta` branch.
---
### Author:  [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [November 29, 2021, 4:06pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/5 "2021-11-29T16:06:20Z")
Yes that option helps a bit, but if any of the older post has any update then it comes in front.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 29, 2021, 5:13pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/6 "2021-11-29T17:13:41Z")
I’m only using the native options available within Discourse API (it’s a Theme Component at heart so you can’t change the API). When I get chance I’ll have a look at the ordering again. However, this came up a little while back and I made a change to help one of the users. [Topic List Previews (legacy) - #1154 by merefield](https://meta.discourse.org/t/topic-list-previews-legacy/101646/1154). I’m surprised this isn’t working as specced. You’d expect a Topic’s `created_at` to remain static despite new posts? Are you sure you’ve changed the setting and refreshed the browser?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 29, 2021, 5:30pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/7 "2021-11-29T17:30:03Z")
@raghukamath I’ve just tested this and it seems to be working as intended? It still will not change order in response to new Posts and respects `created_at` date. Please refresh your browser and try it again.
---
### Author:  [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [November 29, 2021, 5:36pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/8 "2021-11-29T17:36:16Z")
Okay no problem. I’ll test more. May be I got confused due to the behaviour when option is enabled. Sorry to trouble you so much.
One other issue my members highlighted is about the unread and read topic color css fix not being applied to mobile browsers.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 29, 2021, 5:37pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/9 "2021-11-29T17:37:59Z")
> [@raghukamath](#):
>
> One other issue my members highlighted is about the unread and read topic color css fix not being applied to mobile browsers.
Yes, that was still outstanding as previously stated. I’ll try to ship that with the layout update described above, probably within a few days.
---
### Author:  [@flash](https://meta.discourse.org/u/flash)
#### Post date: [December 1, 2021, 12:17am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/10 "2021-12-01T00:17:03Z")
Hi I was trying to work with the git depreciated plugin when I couldnt override the css on mobile thumbnail. Kept reverting to height of 80px. Started searching and saw it was moved to component. Will I have the same issue and need to clone the component to change it or is there another workaround? I want mobile to have full width on the mobile browser.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 1, 2021, 10:13am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/11 "2021-12-01T10:13:51Z")
Would the layout here not suit your needs: [Topic List Previews (TLP) - #4 by merefield](https://meta.discourse.org/t/topic-list-previews-theme-component/209973/4) suit your needs? The new tiles have full width thumbnails. This is currently on the `beta` branch. Install that if you wish as an additional Theme Component and try it out. Remember to specify the branch when installing and edit the Theme Component name to make it clear it’s the Beta.
---
### Author:  [@flash](https://meta.discourse.org/u/flash)
#### Post date: [December 1, 2021, 10:23am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/12 "2021-12-01T10:23:22Z")
This definitely would. I have it full width now how I wanted. Thank you.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 1, 2021, 4:43pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/13 "2021-12-01T16:43:16Z")
I’ve merged the `beta` branch:
- the tiles internal styling has been [modernised and tidied up](https://meta.discourse.org/t/topic-list-previews-theme-component/209973/4). Thumbnails are now full width of column.
- there are a number of CSS simplifications
- mobile has had some minor layout improvements for non-tiles.
- tiles titles should reflect prior visits on mobile now too.
[https://github.com/merefield/discourse-topic-list-previews-theme/pull/7](https://github.com/merefield/discourse-topic-list-previews-theme/pull/7)
---
### Author:  [@sofi.pocketful](https://meta.discourse.org/u/sofi.pocketful)
#### Post date: [December 2, 2021, 1:19am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/14 "2021-12-02T01:19:06Z")
Hi there,
Thank you for this amazing component! I love the design :heart_eyes:
I’m relatively new in Discourse and don’t know much about the technical terms.
I have been having trouble with the images not showing in the list component. For some reason the images do show in the preview of the component but when I load the real thing the images aren’t there anymore.
^ This is the preview of the component
---
### Author:  [@sofi.pocketful](https://meta.discourse.org/u/sofi.pocketful)
#### Post date: [December 2, 2021, 1:19am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/15 "2021-12-02T01:19:29Z")
^ This is how it looks when I load the real page
Now, I believe it has something to do with my discourse settings??
Is there a specific setting that has to be activated for this component to work? I really do not know why it is not working the way it should…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 2, 2021, 8:19am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/16 "2021-12-02T08:19:28Z")
Hi there, thanks for your interest.
A couple of things:
- If you’ve never installed a similar component or plugin before there may be a delay before all the thumbnails are generated. This is a batch process and takes time. This process should start running in the background automatically once you’ve installed the component and added it to a theme. Check out your sidekiq queue. You may see a lot of queued jobs.
- it’s necessarily not compatible with just any theme, there is always a possibility there is a clash: it’s only developed and designed with the default theme. Please test it on your site with just the default theme initially. You can adapt its look and feel but that will need to be based on this components special artefacts.
---
### Author:  [@sofi.pocketful](https://meta.discourse.org/u/sofi.pocketful)
#### Post date: [December 2, 2021, 8:31am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/17 "2021-12-02T08:31:03Z")
Hi Robert,
Thank you for your reply! I’ll test what you suggested in my site :slight_smile:
---
### Author:  [@flash](https://meta.discourse.org/u/flash)
#### Post date: [December 5, 2021, 2:58pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/18 "2021-12-05T14:58:12Z")
Hi Robert. Im bringing in a table with 3rd party javascript below the header and script breaks the previews when I use it in a component. Any ideas on a workaround?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 6, 2021, 11:10am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/19 "2021-12-06T11:10:43Z")
If there’s an error in that script which is stopping javascript from executing, that could break TLP layout code which requires javascript to be on best behaviour. Look for red errors in your browser console.
---
### Author:  [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [December 9, 2021, 5:56am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/20 "2021-12-09T05:56:31Z")
> [@merefield](#):
>
> I’ve just tested this and it seems to be working as intended? It still will not change order in response to new Posts and respects `created_at` date. Please refresh your browser and try it again.
Hi I enabled the created at date option as you suggested. It somewhat solves the issues. but I think in older plugin the order was set according to the date the post was tagged. Also the problem of older image appearing in front page on any update or reply to the topic makes it hard for a recent image to stay featured. Suppose I make an image featured and if some older post from a year ago gets a new reply the front page will have that post’s featured image. If many odler post get replied then newly tagged featured image go away.
[Next page](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=2)