Topic List Previews (legacy)

Can you see the lightboxes in the latest.json under each topic’s excerpt? I have a suspicion Discourse is including this undesirable html in the serialized excerpt.

1 Like

I upgraded to the latest Discourse and TLP versions today and have noticed minor but annoying issue: when clicking certain topics you’ll see a ‘flash’ or reload happen. Here’s a video of the effect:

I’ve tracked it down to TLP after doing several safe-mode and rebuild tests on my staging server. I have also observed the same effect on some other sites that use TLP.

To reproduce:

  1. Visit Blenderartists.org
  2. Click on a topic with replies (the effect seems to be more pronounced with more replies)

You’ll also see it on these sites:

After removing the TLP plugin and rebuilding, the ‘flash’ is gone.

1 Like

Yes, it was reported above and I responded. Any idea how long this has been the case from your perspective?

It looks like some kind of strange Ember issue (see above).

I don’t have a solution at this stage. The url’s are being generated by a Core template (not TLP) and are compliant. It also happens on the TC.

1 Like

Ah sorry, I hadn’t checked that far back. I hadn’t updated for two months (2.7.0.beta1) and noticed it after the update today.

2 Likes

The thumbnail doesn’t do it, yet is almost exactly the same link (identical if you’ve not read a Topic)?

Here’s the TLP code:

https://github.com/paviliondev/discourse-topic-previews/blob/1eff5bad4b9b4af8053ee0cbcb885188aafe6464/assets/javascripts/discourse/templates/list/topic-list-title.hbr#L5

Here’s core:

https://github.com/discourse/discourse/blob/61f5d501cb84ee56a56d89a7efae96b871407d43/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr#L21

Spot the diff?!

Meta vanilla:

TLP example:

Answers on a postcard?

1 Like

I don’t know how links work in Discourse; they certainly don’t act as ‘normal’ hyperlinks as you don’t leave the app. What I did observe is that the ‘second load’ seems a lot slower - to me, it seems that after clicking a link, first the ‘app link’ works, which quickly loads the content. On the background, at the same time, the entire page starts reloading, which needs to reload the entire app and is much slower. Could it be that there’s an event listener or onclick event attached to the link in addition to the a href?

1 Like

The TLP Title link is somehow causing the Ember framework and browser to escalate to a complete page call whereas the standard Discourse app is just doing an XHR request (without a page refresh). Thumbnail click is working fine this way in TLP. I’m pretty certain this didn’t used to happen, it’s most weird.

1 Like

The plot thickens, the browser is making this decision?

No issue on Meta:

1 Like

Oh, I think I know what might be up! The entire surface is a click surface. It might be getting upset with a double click. I’ll check.

It might be we will have to get rid of the surface click to get this to work.

2 Likes

OK @bartv @_diondiondion

This should be fixed in the plugin: https://github.com/paviliondev/discourse-topic-previews/commit/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67
and the TC: https://github.com/merefield/discourse-topic-list-previews-theme/commit/7fbe8ca0395c8404d22f1da6865626fd0f7fd006

3 Likes

It seem that Tile image overlapping when excerpt contain “inline-onebox” link.

“excerpt”: “source: <a href=“https://t.co/WMHOR1b1cm” class=“inline-onebox”>https://twitter.com/gintarosu/status/1304621851075731457/photo/1 …”,

If I edit the post, start a new line before the link.
The overlapping problem solved.

“excerpt”: “source: \n<a href=“https://t.co/WMHOR1b1cm” class=“onebox” target=”_blank" rel=“noopener”>https://t.co/WMHOR1b1cm \n ",


Excerpt contain “lightbox” link, if there are image in the top of the post. The excerpt text font size & font style change after the image but won’t cause tile image overlapping.

“excerpt”: "<a class=“lightbox” href=“https://whatever.hk/uploads/default/original/2X/c/c42ca98cb9b3b6c6401c89940259cdc84800c70d.jpeg” data-download-href=“https://whatever.hk/uploads/default/c42ca98cb9b3b6c6401c89940259cdc84800c70d” title=“image_title”>\n text ",

1 Like

You could try to hide the anchor with lightbox class in CSS.

1 Like

Thank you very much for your help. :grinning:

For the font style problem, currently, I add font-size & color in all theme CSS for tiles-style topic-details, topic-excerpt and topic-excerpt-more. It seem fixed the problem. :smiling_face_with_three_hearts:

The image lightbox links code are still there hiding inside excerpt. I think discourse should remove it completely. Those codes seem done nothing other than increase the size of web page. :thinking:

2 Likes

Yeah that fixed it, thanks Robert!

2 Likes

Yes I agree. I am reluctant to override the back-end because this should remain native. I’m also reluctant to apply javascript to remove it. CSS is the right way for now if it works.

Feel free to share your CSS with the community here :).

1 Like

I just simply set font-size & color for topic-details, topic-excerpt and topic-excerpt-more. This prevent different font style in excerpt before & after image. :grinning:

.tiles-style .topic-details {
font-size: 14px;
color: var(--primary-high);
}

.tiles-style .topic-excerpt {
font-size: 14px;
}

.tiles-style .topic-excerpt-more {
font-size: 15px;
color: var(--tertiary);
}
2 Likes

Since this week I’ve started noticing issues with the thumbnail selector. On some topics it will work, and on others it will consistently fail and show up empty, but I have yet to discover a pattern. Here’s one topic that it fails on. I see no messages in the console, and no network request issues.

Here’s the response when I click the ‘Select thumbnail’ button:

1 Like

A quick fix for the ‘gap’ is just this:

.topic-list .topic-excerpt {
    padding-right: 0px;
}

I suspect this is a hangover from the non-tiles view. I may add this into the Tiles CSS.

2 Likes

Yeah, it’s not 100% perfect.

Here is the current set of criteria. If you can find an obvious omission, happy to consider it, but it’s very close to that which is used in the core logic that Discourse uses.

https://github.com/paviliondev/discourse-topic-previews/blob/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67/lib/thumbnail_selection_helper.rb#L3

2 Likes

Ha, of course NOW it works :facepalm:

2 Likes