Topic List Previews Theme Component

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

3 Likes

Try looking here: how to install a theme or component

4 Likes

Thanks! This is very helpful!

3 Likes

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 in Discourse

You need both for all the TLP goodness.

I’ll update the OP to add these links.

3 Likes

Fixed I hope with:

4 Likes

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.

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

1 Like

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:

Cc: @merefield

3 Likes

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).

1 Like

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

It’s working fine, see 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.

1 Like

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?

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,

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

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.

1 Like

@merefield I just ran,

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.

1 Like

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

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.

1 Like

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?

3 Likes

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 has different image sequence in the featured row than category and other pages like Support and Advice - Krita Artists

1 Like

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?

Hope you can help?

3 Likes

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.

1 Like

Welcome @bstimac! :wave:

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

3 Likes

Thanks that would be awesome. You can view the iphone thumbnail problem here: 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?

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

What are the devices on which you have the issue?

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

4 Likes

Thanks heaps for taking a look. That screenshot in the previous post was taken by selecting an iPhone 12 (i think) from 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.

1 Like