Topic List Previews

(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’?


Probably not, as the thumbnail creation and delivery requires back-end processing changes, so changes to Ruby code. Iirc that’s not possible with a Theme component.


Bart in my current PR there’s a new setting for Transition Time. This can be set to zero. (On mobile this is enforced)

It’s imminent …

(Bart) #163

Seems like every time I ask for something, you already did it :joy:

One request that’s been flying under the radar is the sorting of tag galleries by tagging date, maybe you could take a look at that as well?


Bart so that’s bug? I’ll add it as an issue on the repo so it’s not forgotten.

(Bart) #165

I think so yes, IIRC Angus added something to the tag sorting so that our tag gallery would match the order of the featured bar.


Don’t you mean the other way around? I believe it is intended to sort the featured images by tagging date or by Topic posting date depending on the admins preference.

(Bart) #167

No; the featured images at the top row are sorted the way we want - by tagging date. It’s only when visiting the tag gallery sorted by ‘order_by=tag_date’ that the order is no longer by tagging date but by last update: