Topic List Previews

(MengyuLi) #51

Another issue, all images seem to be square… Any idea for that?
No matter what size of images I uploaded, they are all cropped to square…


Pleasure. Glad you have the original issue sorted. (I was able to reproduce your issue but only when site_settings.yml or database.yml were incorrect.)

To your new issue:

The plugin generates thumbnails of fixed size (that you specify) to reduce bandwidth and improve performance. An unfortunate side effect for some use cases is that original aspect ratio can be lost.

The Tiles mode however can respect the original aspect ratio but only if you switch thumbnailing off in the settings.


(MengyuLi) #53

It works! Do you know to what extent it will affect performance? I have no idea about that. Are you setting this in your website: Topic List Previews - Angus' Sandbox ?


That’s Angus’ site. Can’t comment. :wink:

I use full size images on one of my sites with no issues. Try it. :).

(T. H. Wright) #55

I have a feature request. For the topic list tiles view, would it be possible to add an option that disables automatic scrolling for adding new posts and instead places a centered “view more” (or your text here) button?

The thought came to me as I have a footer on my website which is more or less useless. Perhaps I should ditch the footer instead, but this seemed like a decent proposal for a fix. This would also give the user more control over how their device behaves when interacting with the website.

Also, just overall praise for the plugin. I just discovered the featured posts setting. Marvelous! Absolutely marvelous!


Thank you.

My opinion as contributor (but not owner): I don’t think replacing infinite scroll is the focus of this plugin. It might make sense for that to live in a different plugin.

Perhaps you could leverage an existing attempt at this if such a thing exists. Did you search? I note there’s been a lot of debate about this previously on meta regarding footers and buttons. For example, this post.

Infinite scroll on the TL is a key part of how Discourse works. In fact it was not trivial to get the masonry code to hook into it: a button would have made it much easier!! :smiley:

(MengyuLi) #57

Do you think we can use the code below to solve the performance issue?

document.getElementById("list-area").style.display = "none";
function show(){



Can you explain why that would work? I’m not sure it addresses the core issue?:

The issue is simply that by sending down the images full size (and by full size that’s actually determined by the limit the Discourse engine sets up) you are using more bandwidth and more processing power on the client to then scale them back.

This is mitigated greatly by caching. So for a new user this is a big hit first time, then there should just be a much smaller delta as new topics are streamed. I cannot speak to how efficiently the local browser caches results of scaled images to optimise things though.

A modern fast computer on a modern internet link should have no issue with that, but a mobile computer, tablet or phone might have if they have not cached anything and are downloading the Topic List for the first time.

All that said, my iPad mini 4 on cellular copes completely fine with examples I’m aware of.

So I have not personally found it an issue at all and Tiles is not available as an option on phones presently anyway.

Only one user has told us recently that he would not use this feature as I believe they may have allowed Discourse to store very large images.

The proper solution is to update the codebase to scale image size whilst respecting the original aspect ratio. Presently the current thumbnail code, when set to do so, simply scales and crops to the chosen size, almost certainly losing the original aspect ratio of at least some of your images. This makes Tiles view more boring as it relies on variation in the aspect ratios for layout variety and in addition the cropping of course can make some of the images look awkward. Thus it remains the administrators trade-off.

This is “doable” and highly desirable, we just haven’t prioritised it.


Just to let everyone know, I’m aware of the issue with the Category column that’s now been removed from core Discourse. This now means that TLP shows Users where it should show Category in the table header for some views (Social and Tiles views are not impacted) I’ll take a look!

(T. H. Wright) #61

I did not! I didn’t even think about it. Something in my mind separated the two and attributed infinite scroll to the plugin. My mistake! I will do more reading.

(Angus McLeod) #62

Hey guys,

As @merefield mentioned, the removal of the category column from the standard topic list caused an issue with this plugin.

There was an existing setting in this plugin “topic list category badge move” which made the same move that has now been adopted in core. Since this is now a core feature, I’ve removed that setting from the plugin, rectifying the immediate issue.

You can see it live here: Topic List Previews - Angus' Sandbox

Separately, @merefield is working on a new feature which will restore the existing category column for those who prefer the old style. That will be merged soon.

Add Category Column

Hi all, I have a simple question
Is there a setting that I can hide the ‘like’ icon in the topic card? If no, I can modify it from theme setting.



Yes, it’s part of the topic list action setting:


Thanks for your answer. It works!
Another question, can I use it on my different categories? For example, I create a new category named ‘ABC’. Can I use this topic-list-preview for my new category?

Just like the screenshot below, can I use it here?


Yes you can … there are settings for each Category via the Edit wrench:



My teammates always say I’m an idiot…
Just select ‘Latest’ here? If I have a topic, which belongs to this category, but does not belong to ‘Latest’, will it be shown as expected?


I think you need to have a play! :wink:

(jjaarrvviiss) #69

We are using Tiles View on our site and want to highlight specific topic tiles based on the group the poster is a member of. We have a user group that is a higher Patreon level… and want to add a specific CSS class to topics posted by member of this group. I dug into the plugin code, but can’t quite find out how to accomplish this. I’m guessing it needs to happen in preview-edits.js.es6?


That’s correct. You might consider toggling a class based on group membership in component:topic-list-item and format your highlighting in CSS

However, I would urge you to consider this functionally first - whats the full criteria for highlighting a topic? Are you in essence wishing to highlight watched items based on membership of a group and some additional criteria?


I tried the “social” theme, but it looks a little strange.

My setting is as follows:

I need your help! Merefield