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

<div class="post-metadata">

### Author: ![Charlie\_Li](https://avatars.discourse-cdn.com/v4/letter/c/dbc845/32.png) [@Charlie\_Li](https://meta.discourse.org/u/Charlie_Li)
#### Post date: [December 4, 2022, 5:38pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/243 "2022-12-04T17:38:54Z")

</div>

Hi, this plugin looks great! I’m relatively new to discourse, I was wondering how to install and setup this plugin? thanks!

---

<div class="post-metadata">

### Author: ![Nick\_Tomlinson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nick_tomlinson/32/282728_2.png) [@Nick\_Tomlinson](https://meta.discourse.org/u/Nick_Tomlinson)
#### Post date: [December 4, 2022, 5:53pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/244 "2022-12-04T17:53:47Z")

</div>

Try looking here: [how to install a theme or component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682)

---

<div class="post-metadata">

### Author: ![Charlie\_Li](https://avatars.discourse-cdn.com/v4/letter/c/dbc845/32.png) [@Charlie\_Li](https://meta.discourse.org/u/Charlie_Li)
#### Post date: [December 4, 2022, 6:06pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/245 "2022-12-04T18:06:30Z")

</div>

Thanks! This is very helpful!

---

<div class="post-metadata">

### 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: [December 4, 2022, 6:09pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/246 "2022-12-04T18:09:50Z")

</div>

Thanks @Nick_Tomlinson

You may also want to install the complementary “sidecar” plugin also linked in the OP that adds additional features, using this guide: [Install plugins on a self-hosted site](https://meta.discourse.org/t/install-plugins-in-discourse/19157)

You need both for all the TLP goodness.

I’ll update the OP to add these links.

---

<div class="post-metadata">

### 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: [December 12, 2022, 1:12am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/247 "2022-12-12T01:12:24Z")

</div>

Fixed I hope with:

[https://github.com/paviliondev/discourse-tc-topic-list-previews/commit/dbca65fcc869a9ddd30339e9f0ded7209c0053a0](https://github.com/paviliondev/discourse-tc-topic-list-previews/commit/dbca65fcc869a9ddd30339e9f0ded7209c0053a0)

---

<div class="post-metadata">

### Author: ![Sectros](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Sectros](https://meta.discourse.org/u/Sectros)
#### Post date: [January 9, 2023, 11:30pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/248 "2023-01-09T23:30:16Z")

</div>

Installed the Topic List Preview component, and now the frontpage of my forum is on Tile mode. However I just want to use the basic layout (topic title with a thumbnal to its left). I don’t see any option for that in the Components settings nor any instructions for that [in the release post.](https://meta.discourse.org/t/topic-list-previews-theme-component/209973)

So, how can I change from Tiles to Basic layout (or to Featured Images if need be)?

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [January 10, 2023, 10:56am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/249 "2023-01-10T10:56:36Z")

</div>

Because of the way that the Theme Component is designed, in the TC settings you have to deselect all the views where you don’t want it to show.

You need to do this for the tiles, thumbnail, excerpts, and actions settings. For example, I have disabled all entries for tiles except a single category:

> ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/3/d736d0ba605b47b3ea400de38af1320e98bd7f35.png)

Cc: @merefield

---

<div class="post-metadata">

### Author: ![Brandon007](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@Brandon007](https://meta.discourse.org/u/Brandon007)
#### Post date: [January 14, 2023, 4:18pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/250 "2023-01-14T16:18:04Z")

</div>

How exactly do we configure this to display the “Pinterest (Masonry) Style” on mobile only, but display the “Basic Style” on desktop?

I tried setting “topic list tiles categories” to

- latest-mobile
- new-mobile
- unread-mobile
- top-mobile

… but that doesn’t seem to work. I just get the Pinterest style for said category on all devices. I’ve tried numerous ways, perhaps this is a glitch? I did notice the colorization does not really work as well _(experimental feature)_.

---

<div class="post-metadata">

### 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: [January 14, 2023, 5:14pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/251 "2023-01-14T17:14:53Z")

</div>

> [@Brandon007](#):
>
> How exactly do we configure this to display the “Pinterest (Masonry) Style” on mobile only, but display the “Basic Style” on desktop?

Remove `latest` etc. from main tiles setting. Just tested that and it’s working.

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/9/1/59146d35cad2360e14ff0b28be7cf554dd4ded1c.png)

> [@Brandon007](#):
>
> I did notice the colorization does not really work as well _(experimental feature)_.

It’s working fine, see [https://www.starzen.space](https://www.starzen.space)

That site was updated yday.

Have you installed the “sidecar” plugin (in addition to the theme component) and enabled it? (as per OP). You may have to also rebuild the posts you wish to colorize.

---

<div class="post-metadata">

### Author: ![Brandon007](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@Brandon007](https://meta.discourse.org/u/Brandon007)
#### Post date: [January 14, 2023, 8:13pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/252 "2023-01-14T20:13:16Z")

</div>

Interesting, I’m definitely experiencing some oddities.

I have the latest release, 3.1.0.beta1. I removed all settings from “topic list titles topic lists” and the cards still display as long as I have a category set under “topic list titles categories.” Once I remove the category, then I get the “basic styling” for desktop and mobile.

If I set those fields to just mobile only fields as below, nothing changes just for mobile. Instead, cards are displayed for desktop and mobile. I figure if I only set mobile options, then it should only affect mobile display?

 ![Screen Shot 2023-01-14 at 3.00.30 PM](https://global.discourse-cdn.com/meta/original/4X/d/0/b/d0b48314ea25097a2e8839e9ee4e36c3f30482af.png)

[quote="Robert, post:251, topic:209973, username:merefield”]  
Have you installed the “sidecar” plugin  
[/quote]

I do have the sidecar plugin enabled, in addition to the component which is enabled. I did not rebuild the posts again after I installed the plugin. I assume I need to rebuild Discourse to do that…

Lastly, even when I turn the sidecar plugin off,

 ![Screen Shot 2023-01-14 at 3.05.31 PM](https://global.discourse-cdn.com/meta/original/4X/3/d/0/3d0d33ce4597c0b625f6f9f19792591c433871e0.png)

The topic cards or basic style background for a row remain colored. I have to go deselect,

 ![Screen Shot 2023-01-14 at 3.06.36 PM](https://global.discourse-cdn.com/meta/original/4X/2/8/c/28cdccc0440f997d273705eca08377e22d1a3bc4.png)

Then the colorization turns off. It seems if the plugin is not enabled, none of the features should work.

FYI: For some reason, only a single card’s background color gets colorized, all others stay white. I figured there might be some glitch or conflict. So I turned off all plugins and components, but no change.

_I can try and rebuild the whole Discourse app tonight and try again._

Thanks for trying to help.

---

<div class="post-metadata">

### Author: ![Brandon007](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@Brandon007](https://meta.discourse.org/u/Brandon007)
#### Post date: [January 14, 2023, 11:56pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/253 "2023-01-14T23:56:47Z")

</div>

@merefield I just ran,

```plaintext
cd /var/discourse
./launcher rebuild app

```

and no change from what I explained above. Craziness, it’s not the end of the world. But I figured if I’m having some issues, perhaps others are as well. Thanks!

_FYI, this is a Digital Ocean build with Discourse specifications._

---

<div class="post-metadata">

### 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: [January 15, 2023, 10:37am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/254 "2023-01-15T10:37:36Z")

</div>

Let’s talk about the layout between mobile and desktop though (so let’s ignore the plugin for now).

I’m not sure if there is a mis-understanding here?

Basically, you want to add a specific layout feature to only a specified device type and only in a specific Category, is that correct?

Bear in mind that the Category setting will affect both mobile _and_ desktop, it’s a global setting. There’s presently no way to say “apply this _only_ to this category and _only_ on mobile”. I think that might be where some confusion has come.

One workaround you may not have discovered yet is to clear the individual Category settings (as needed), and use this instead:

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

Which will then set _all_ Categories to follow the Discovery list settings.

The logic is “is this feature for this type of Discovery List & device, or is this feature declared for this Category or is “set Category Defaults” set (in which case I’ll follow the Discovery List settings)?”

Please confirm if that makes sense to you.

If that’s no help, I think the “simplest” way of dealing with that would be to introduce another Category setting for each class of feature so we would have one each for desktop & one for mobile?

The downside of that is it represents yet another set of settings (four more) and this system is already _very_ complex to set up in a bespoke way, with a very long set of settings already (as you’ve proven to some extent).

You could argue that you’d then do the same for Tag, so that’s another 4 settings! A total of 8 more settings (and all the associated increase in logic!).

I think you maybe the only person who’s found this a limitation?

That said if you wish to carry out or fund all the associated work, PR accepted.

---

<div class="post-metadata">

### Author: ![Brandon007](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@Brandon007](https://meta.discourse.org/u/Brandon007)
#### Post date: [January 20, 2023, 3:16pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/255 "2023-01-20T15:16:23Z")

</div>

> [@merefield](#):
>
> Basically, you want to add a specific layout feature to only a specified device type and only in a specific Category, is that correct?

Only one category, but “basic style” for desktop, and “masonry style” for mobile.

The second explanation there was a bit tough to follow.

The gist seems, you cannot have different devices with different category views?

---

<div class="post-metadata">

### Author: ![raghukamath](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/raghukamath/32/160330_2.png) [@raghukamath](https://meta.discourse.org/u/raghukamath)
#### Post date: [January 25, 2023, 3:49am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/256 "2023-01-25T03:49:53Z")

</div>

I am often having problem in getting an older post into the featured row, as it doesn’t show posts based on tagging date or even activity date but creation order. In some pages the posts gets shown but on homepage there is different order.

[krita-artists.org](http://krita-artists.org) has different image sequence in the featured row than category and other pages like [Support and Advice - Krita Artists](https://krita-artists.org/c/support/6)

---

<div class="post-metadata">

### Author: ![bstimac](https://avatars.discourse-cdn.com/v4/letter/b/87869e/32.png) [@bstimac](https://meta.discourse.org/u/bstimac)
#### Post date: [January 25, 2023, 4:47am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/257 "2023-01-25T04:47:25Z")

</div>

Hey there,

Love this theme component. I’m using it with the popular “Air Theme” and it’s great.

I have an issue with the mobile preview image overlapping the curved boarder at the top of the post that seems to only happen on iPhone browsers. It works perfectly on android and desktop versions. Is that an issue with this component or something to do with the theme?

 ![ScreenshotIOS](https://global.discourse-cdn.com/meta/original/4X/3/1/b/31bc58bd68b53549e76e6b10676268164c98709f.png)

Hope you can help?

---

<div class="post-metadata">

### 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: [January 25, 2023, 7:24am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/258 "2023-01-25T07:24:59Z")

</div>

Glad you are enjoying it! I’m afraid I can’t support this with arbitrary third party themes. You’ll need to resolve this yourself. If you need help, post in #Marketplace Suggest digging into the browser inspector in first instance.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 25, 2023, 12:37pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/259 "2023-01-25T12:37:18Z")

</div>

Welcome @bstimac! 👋

Do you have a public link to your forum that displays this issue? I can have a look.

---

<div class="post-metadata">

### Author: ![bstimac](https://avatars.discourse-cdn.com/v4/letter/b/87869e/32.png) [@bstimac](https://meta.discourse.org/u/bstimac)
#### Post date: [January 30, 2023, 11:32am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/260 "2023-01-30T11:32:24Z")

</div>

Thanks that would be awesome. You can view the iphone thumbnail problem here: [https://architected.world](https://architected.world)

I was also wondering if there is a way to disable the topic “view count”? Sorry not sure what it’s called, but the eye icon with the number that that counts clicks?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 30, 2023, 12:48pm UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/261 "2023-01-30T12:48:05Z")

</div>

I don’t have the picture corner issues on my computer (mobile view) or on my Android phone.

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/e/5ee47d05b572429c2f695a5df155e0c67b580ffb.jpeg)

What are the devices on which you have the issue?

> [@bstimac](#):
>
> I was also wondering if there is a way to disable the topic “view count”?

Yes, it’s very simple with CSS. On which page(s) do you want to hide it?

---

<div class="post-metadata">

### Author: ![bstimac](https://avatars.discourse-cdn.com/v4/letter/b/87869e/32.png) [@bstimac](https://meta.discourse.org/u/bstimac)
#### Post date: [January 31, 2023, 12:08am UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/262 "2023-01-31T00:08:54Z")

</div>

Thanks heaps for taking a look. That screenshot in the previous post was taken by selecting an iPhone 12 (i think) from [BrowserStack.com](http://BrowserStack.com). I can recreate the issue on 3 different iPhones. They range from iPhone 11 to 13. Using Safari, Firefox and Chrome.

Oddly enough when using an iPad it works fine. I think that’s because it displays the desktop site by default. If you switch it to mobile view using the side menu it shows the issue as well. Maybe something to do with how WebKit displays the mobile site?

Regarding the view count, I’d like to remove it from all pages if possible.

[Previous page](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=12)

[Next page](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=14)
