Topic List Previews

(MengyuLi) #140

Can I make the thumbnails clearer? I mean get a higher definition than the current. I do not tick the “topic list hotlink thumbnails”.

(Angus McLeod) #141

Both of these should be fixed now.

Can you show me an example where the thumbnail resolution is an issue?

(Chris Beach) #142

Many thanks @Angus :+1:

(Dmitry Krasnoperov) #143

Great plugin thanks!!!

Do you have any benchmark in performance? TLP feels a bit slower agains plain Discourse in terms of page loading time.


(David Kingham) #144

Hi Angus, this plugin is causing tags to not show up under category settings for allowable tags in a category.

With plugin on:

With it off:

Console error:

(Bart) #145

Are there any plans to support the tiles view on mobile devices?


Yes, and more than that, it’s been developed and the subject of my PR which @angus is currently reviewing.

It comes with a slew of other improvements to Tiles over all devices:

(Bart) #147

(Angus McLeod) #148

Hey, I haven’t benchmarked it, but yes it will be slower if you’re loading images in the topic list. The plugin is optimised for performance in various ways, including the creation of topic-list-specific thumbnails, with the size set according to user preference (@lmy I suspect this is your issue).

@davidkingham This should fix that (cc @merefield)

(David Kingham) #149

What would cause the desktop view to crop images, but the same page in mobile shows the images uncropped? I would prefer uncropped. I have topic list hotlink thumbnails enabled. I also have topic list thumbnail width and topic list thumbnail height set to 100, if I set these to null the thumbnails do not display.




David, the CSS differs.

E.g. ignoring social and tiles views for a moment, here’s mobile CSS for img.thumbnail:

img.thumbnail {

I suspect it is scaling it down to those and because it is doing an object-fit: cover it’s maintaining aspect ratio - the longest edge will be 80px.

Whereas on desktop this is not restricted in this way and it sticks dogmatically to the dimensions you specified, cropping as required (the poor polar bear risking his rear end!).

(Angus McLeod) #152

@merefield hm that’s a bit strange actually. I’m not sure that’s necessary. Would you mind investigating what happens if we remove that, or at least make it the standard 100px? If it makes sense remove and commit straight to master. We can discuss more privately.

(David Kingham) #153

I don’t think I’ve seen this mentioned before, when using the tiles arrangement; if I scroll down and then quickly scroll back up, I see this garbled mess for a moment, after a few seconds it goes back to normal.

Also, would it be possible to add a graphic to show the images are loading? Right now all you see is this:

A spinning loading graphic for each image would be fantastic to let the user know something is happening, we have large image sizes so this is a big deal for my site.

I also see this sometimes after they load:


It’s because TLP is rendering the new tiles off-screen, then the masonry javascript takes over to move them into position. If you scroll back fast, you can catch them in their starting position. I’m not sure there is an easy way to solve that but could be wrong. We might be able to do something with classes and visibility. This is even more of an issue on mobile because the browsers have less grunt. I’ll add as an issue on the repo. However, on desktop that’s hardly a frequent occurrence?

On the second issue, not sure what’s causing that, there’s some kind of mis-prediction going on about how big things will be and what space they need … trickier! Masonry may being doing a calculation before the tiles are fully rendered in that case and then underestimating the size of the target space they need. We already leverage another javascript library to delay that until the images are loaded, but that’s not to say the entire tile is rendered at that point … challenging! The workaround with that one is to refresh or resize the viewport and it will all move into neat order.

It’s a challenge to marry a completely independent and relatively complex javascript library with a totally separate javascript Ember app when they are both doing so many independent manipulations.

(David Kingham) #155

Thank you, I can only imagine how complex this is! Any idea about showing a loading wheel for the images?

Also, the tiles do not seem to respect the category setting Topic List Sort By: which I have set to Created, any chance this can be changed? We really want to keep things ordered by posted date so people don’t have a reason to bump their image back to the top.


David, are you finding the rendering slow with thumbnails activated, or when hotlinking (which uses the original images and will be slower)?

One potential solution to this is just to implement a solution that allows you to limit thumbnail size whilst supporting any aspect ratio. I have an idea about how to achieve that.

(David Kingham) #157

This is when using the hotlinking. As we discussed previously, it was the only way to display the uncropped images. The implementation of uncropped thumbnails would be amazing!

Edit: I realized the topic list sorting is working, I just didn’t realize it read from left to right, which makes sense but isn’t immediately intuitive. Sorry for the confusion!

(Ben Tristem) #158

Do you know if it would be possible to create something similar for those that have Discourse host their site? That is not a plugin, but a Component?


Thanks for clarifying David. I intend to take a look at that improvement soon. It’s already captured as an issue.

Glad you got the sorting ‘sorted’ :slight_smile:

(Bart) #160

I find that the ‘fly-in from the top’ animation of the tiled view is too distracting and that it doesn’t fit into the overall Discourse experience. Can I replace this with a simple ‘fade-in’?