Lightbox no longer working?

Bug
1

I’m not sure what changed, but I just noticed today that clicking on images in posts now simply opens the image as a new page (direct link to image) instead of opening within a Lightbox frame. This is including on large images in posts that I know used to work.

I don’t see any new settings in the admin interface that would enable/disable this feature. I’m not sure when this functionality decided to stop working. Discourse is fully up to date according to the /admin/upgrade page.

Is there any way to debug why images are not being lightboxed? I can see in the html code that the “Lightbox” class is being applied to images correctly (and there is also a “Lightbox” class on the a tag wrapping the image):
image

My site is using Cloudflare. I’m not sure if that could be interfering in some way?

Thanks!

3 Likes
2

I just tested this with Discourse version 2.9.0.beta3 and was unable to reproduce the issue.

Clicking on an image in a topic brings up a Lightbox containing the image, and the HTML shows that the lightbox class is being applied to the image as well.

I’m accessing Discourse through Google Chrome Version 99.0.4844.82, and the Discourse site I tested this with is being hosted through Digital Ocean.

Hopefully this helps provide some more insight on what might be causing this issue on your site.

4 Likes
3

Are you also using rocket loader or any other JS optimization of cloudflare on discourse?

If so, the first thing to try is to disable the said optimizations and try again.

4 Likes
4

The issue does not seem to be browser or OS dependent. I’m seeing it in Firefox, Chrome, and Safari on macOS, Safari on iOS, and Firefox/Chrome/Edge on Windows. I’m not able to figure out any browser/OS combination where Lightbox does actually work, so I’m guessing it’s some kind of issue with the site itself, perhaps some setting or other plugin breaking it?

I’m not sure how or where to even begin trying to figure that out as I’m not seeing anything in console or site logs that would indicate a problem.

No, not using any optimization or minimizing options in Cloudflare. All of those are disabled. The only thing that is currently enabled is caching for 4 hours.

1 Like
5

I was able to duplicate my production site locally and reproduce the issue. Turns out that it is a bug that is surfacing because of some code in a custom theme plugin that I wrote. I still cannot explain why this is breaking Lightbox or why this only recently became a problem. Could be a yet-undiscovered bug in the core?

My plugin code is very simple:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

All it is trying to do is a simple string replace in rendered post content. Somehow, this breaks all Lightboxes in all posts (even those which don’t contain the string). Commenting out the elem.innerHTML = ... line causes Lightboxes to work once again.

Note that the above example is simplified (my actual plugin replaces specific rendered links in posts and does other operations on cooked content), but even the very simple code above reproduces the issue I’m seeing.

Is this the correct way to modify cooked content at render time in posts and this is a new core bug related to Lightboxes? Or have I been doing this wrong all along and this never should have worked in the first place?

6

I’ve created a simple theme component which exposes this Lightbox issue. Anyone should be able to reproduce the issue on any Discourse install by activating this theme component:

If anyone has any possible workarounds or suggestions, please let me know! I’m still not sure exactly why this breaks Lightbox.

7

For anyone else who might run into this issue, I was able to figure out a workaround for now.

As long as you do not do any innerHtml replacements on any elements containing images which will be lightboxed, the issue will not occur. I was able to re-work some of my code to match elements more specifically and only target those which are not hrefs around images.

4 Likes