Thank you, i’ll give that a go.
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.
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
Hey, after the update I have a useless horizontal scrolling bar. How I could remove that
Currently I have removed that scrollbar with manipulated CSS:
.tlp-featured-topics.has-topics .topics {
overflow-x: hidden;
}
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!!
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;
}
Thank you! That’s a great solution
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.
Thanks for the report. Have you tried the TC, out of interest?
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?
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).
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.
Thanks for your super fast responses, by the way!
I’ve given the TC a try now, and unfortunately it shows the same behaviour.
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.
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)
With inspector, it seem the " topic list excerpt" are trying to include link of image within the excerpt, which cause problem in the style.
“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
Thank you for your quick reply.
I also found that some link within post excerpt can cause tile image overlapping.
It seem that it caused by inline-onebox link.
Not sure whether it is related to discourse core or TLP plugin.
May be I will temporally disable excerpt at the moment.
Thank you very much
Sorry, yes that’s possibly the CSS. Try modifying it. The TC might have improved CSS for that … can’t recall
Thank you very much.
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.
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.