Topic List Previews (legacy)

Thank you, i’ll give that a go.

2 Likes

Jon also check /latest.json and the data coming through for thumbnails - check the url’s work, e.g.

2 Likes

I’ve ported the improvements to Featured Images from the TC to the Plugin today, so you can now get Featured Images on mobile and the formatting is much improved.

https://github.com/paviliondev/discourse-topic-previews/commit/c77e730a134efedb4d86d34b51b081c8682624f0

This may mess up some custom CSS you may have developed, sorry about that, but pretty unavoidable. The improvements should be worth it.

Remember you can set the horizontal width to zero to let the layout determine the width against the aspect ratio which facilitates a neater look. You can also hide the excerpts in the settings if things are too cramped with your images/settings.

This site is currently running the plugin:

NB it looks a little better on Safari with its more svelte scroll bar :slight_smile:

3 Likes

Hey, after the update I have a useless horizontal scrolling bar. How I could remove that :slight_smile:

Currently I have removed that scrollbar with manipulated CSS:

.tlp-featured-topics.has-topics .topics {
    overflow-x: hidden;
}
2 Likes

Yep, that’s the right approach. I can’t see that it is over-flowing at all at present. That scroll bar looks a lot less ugly on Safari btw.

Unfortunately that approach will prevent you from scrolling if featured images become significantly more numerous and render off to the right.

So another approach - publish a lot more featured content!!

2 Likes

btw, you can play around with the scroll-bar styling. Unfortunately it is complicated by the fact it’s not standard across all browsers. e.g:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: grey darkgrey;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: darkgrey;
}

*::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 0px;
  border: 0px solid grey;
}

source: How To Style Scrollbars with CSS | DigitalOcean

2 Likes

Thank you! That’s a great solution :slight_smile:

2 Likes

Hi @merefield, thanks a lot for the plugin, it’s very popular in our community. We use it in a quite minimal setup, only for displaying topic thumbnails in topic lists, nothing else really.

However, after a few weeks of usage we had to disable it now, as it causes quite severe issues when navigating in and out of topics. Basically, when entering a topic, there will often be a flicker in the layout, and the navigation bar will disappear for a moment before the topic ist rendered. Conversely, when navigating back, the same will happen, and the scroll position in the topic list will be lost. On top of that, navigating in and out of topics is noticably slower than it is with the plugin disabled. Here’s a screen recording of what it looks like on mobile (sorry about the gfycat link, the screen cap was too large to upload on Discourse).

Do you know what might cause these issues, and is there anything that can be done to prevent them? There are no errors in the console or anything else that would give a hint about what’s broken.
I’ve set the topic list thumbnail resolution level to the lowest setting 6 as we don’t require large images, so image size shouldn’t really be a factor either. Feel free to let me know if there’s any other info I could provide to help.

2 Likes

Thanks for the report. Have you tried the TC, out of interest?

1 Like

No, haven’t tried that yet – if you think it might improve things I’ll give it a try. Is it safe to install it side-by-side with the (disabled) plugin?

1 Like

Probably, not, you’d need to reinstall.

The behaviour you describe is odd. The href of titles is almost identical to those on the thumbnails.

Can you confirm that clicking on thumbnails does not exhibit the issue? (in the plugin).

1 Like

Can confirm! I never even noticed until now that clicking the thumbnail takes you to the first post in the topic. Clicking the thumbnail is as snappy as it should be.

Thanks, will give that a try then, probably won’t get around to it tonight though. I also just found that Topic list thumbnails TC exists, I wonder if that would be a better fit for our use case due to its more limited scope. :thinking:

Thanks for your super fast responses, by the way!

2 Likes

I’ve given the TC a try now, and unfortunately it shows the same behaviour.

2 Likes

Thanks.

Yes this is interesting.

The url’s are correct, but Ember seems to be escalating the title clicks to a full page refresh.

If you look at the network tab of your browser you will see the difference.

I’m fairly sure this didn’t used to happen.

The title is created by the same code in core so this is most perplexing.

2 Likes

It seem that when there are images in the top of the post can cause some format style problem in the “topic list excerpt”.
(It happen in both plugin & TC)

Here is a example.
The first two line is correct, but after a image, the third & forth lines style changed. (It happen in all the theme I have tried)
2021-02-03_222316

With inspector, it seem the " topic list excerpt" are trying to include link of image within the excerpt, which cause problem in the style.
2021-02-03_222334

1 Like

“list/topic-excerpt” is in core, not in the plugin or TC unfortunately.

I’m not directly overriding it.

I wonder if its some jQuery junk though?

Please feel free to assist with debugging

1 Like

Thank you for your quick reply. :smiling_face_with_three_hearts:

I also found that some link within post excerpt can cause tile image overlapping.

It seem that it caused by inline-onebox link.
2021-02-03_222334s_cr2

Not sure whether it is related to discourse core or TLP plugin. :thinking:

May be I will temporally disable excerpt at the moment.
Thank you very much :grinning:

2 Likes

Sorry, yes that’s possibly the CSS. Try modifying it. The TC might have improved CSS for that … can’t recall :slight_smile:

1 Like

Thank you very much. :grinning:

Yes I think you are right, when using TC, it have no problem.
The overlapping problem only occur after I switched to Plugin.

Hopefully Chrome can fix the 1000 lines CSS Grid limit soon, then we can replace the Plugin with TC completely.

1 Like

Thanks for confirming. I’ll try to move that CSS over at some point. For now you could simply use it to override in a local TC.

1 Like