Topic List Previews

Agreed. What device are you seeing that on?

I fixed the iPhone 8 plus series a while back but may just force it to one column for all mobiles.

1 Like

I’m using a Samsung Galaxy S8+. I think it’d be best to universally force one column.

1 Like

I’ll try to push that tomorrow

1 Like

Awesome, thanks for being a great plugin author :heart:

@merefield What do you think of extending this to desktop (via a checkbox setting) instead of maintaining the single tile view branch? Unless it is actually more work…

1 Like

The problem is the media queries are in CSS. CSS is far more fluid for switching between column proportions than javascript could ever be. That is partly why I’ve been investigating a CSS Grid layout solution as an alternative to Masonry. Unfortunately it too has limitations (especially on Chrome).

BUT, it turns out there’s a CSS nuclear option you can apply in a Theme Component:

.tiles-grid-item {   
   // give me 1 column all the time  
   width: 100% !important;

will force full width for the tiles (but they are BIG on desktop!). Remember to put this only in the ‘Mobile’ tab of the Theme Component if you want to restrict its affect to mobile. The downside on mobile is that you lose the additional tiles when viewing in landscape and the tiles become bigger (in both dimensions because they scale with image aspect ratio).

On desktop (using the ‘Desktop’ tab of the Theme Component) you might also consider:

.tiles-grid-item {
  // give me 2 columns all the time
   width: calc((100% - 6px)/2) !important;

But you will lose the out-of-the-box responsiveness wrt column numbers to changes in width. Might be useful if you have a side-bar though. @torstensson

Use of !important is generally frowned upon but it’s the only way I’ve so far found of overriding the media queries defined in the plugin from within a local Theme Component.

This then avoids having to use my separate branch if you are happy to force one column aaaaaallll of the time :slight_smile: :blush: @cursed_mask @P16 I recommend you move back to the standard plugin repo if this behaviour satisfies your needs.

I’m still tempted to force full width for mobile out-of-the-box, but now you have a CSS solution I may not change that today.


As long as it works with no side-effects, which it does :wink: , then perfect! Legend.

1 Like

Thanks @merefield! Works great :slight_smile:

1 Like

I tested around as much as I can to align the replies to the right by removing and reordering the grid items, but no luck. Thanks for the advice though :slight_smile:

1 Like

Found a visual inconsistency: on desktop, when a topic is bookmarked, the bookmark icon is placed onto the left behind the title which is correct. However, on mobile, it’s weirdly in the middle. Just a heads up.

1 Like

Can you confirm which style that is? Tiles will always place the action icons bottom right on both device classes.

Does it go away if you temporality remove your customisations?

I’m afraid I can’t reproduce that.

Try deleting your cache

Sneak peak of upcoming preview thumbnail selector functionality ;):



Ambassador you’re really spoiling us :blush:


feature I’d like:

for when 1 picture isn’t quite enough to give a good sense of a preview.
clickable arrows to view next thumbnail.

1 Like

A cute idea.

That’s a lot of effort to go to when you could simply click the topic though! :wink:

Some potential issues:

  • Because there are so many topics you’d be forced to load on each transition. Not sure how responsive that would be.
  • Aspect ratio is unlikely to be the same between thumbnails so you’d be forced tp crop or have an oversized tile to accommodate the complete range. Brute force cropping does not usually end well!
1 Like

ya might be a lot of work. can’t blame you there. and may be other priorities.
depending on what’s being displayed (something that has many different angles) could be worth while.
but ya, don’t mean to be too picky.

maybe the pictures aside from the first one could be of lower quality.
ya you’d have to ask the creator to crop manually. which I think is fine. wordpress has a system that lets you crop after uploading, but that sounds hard to implement too.

@merefield I am using the Avatar size component to increase avatar sizes for posters (to 45px). Could you please tell me which template I need to override the avatar size for, in order to make it work in TLP?

The template is here:

The problem is I don’t believe you can monkey-patch Plugin templates with a Theme Component (?) (it would be great if you could)

You can of course fork and edit, but that comes with risk and you will need to periodically merge to get new fixes and features …

1 Like

This works great, only issue I’m getting (besides looking messy while thumbs are loading) is there seems to be a maximum you can infinite scroll to. At that point the thumbs stop loading and format gets messy.

Which branch are you using in your plugin entry:

GitHub - angusmcleod/discourse-topic-previews?

There’s a known issue with the experimental CSS Grid renderer (which is on my fork), but that’s the first I’ve heard anyone raise that about the master version which uses Masonry.

It wouldn’t entirely surprise me as there’s a lot of div tags being rendered and browsers are bound to have a non-functional limitation due to memory constraints.

Out of interest do you see any improvement in Firefox?

How many times did you load in extra sections approximately?

1 Like