Lightbox funktioniert nicht mehr?

Fehler
1

Ich bin mir nicht sicher, was sich geändert hat, aber ich habe heute gerade bemerkt, dass das Klicken auf Bilder in Beiträgen jetzt einfach das Bild als neue Seite (direkter Link zum Bild) öffnet, anstatt es in einem Lightbox-Rahmen zu öffnen. Dies gilt auch für große Bilder in Beiträgen, von denen ich weiß, dass sie früher funktioniert haben.

Ich sehe keine neuen Einstellungen in der Admin-Oberfläche, die diese Funktion aktivieren/deaktivieren könnten. Ich bin mir nicht sicher, wann diese Funktionalität aufgehört hat zu funktionieren. Discourse ist laut der Seite /admin/upgrade vollständig auf dem neuesten Stand.

Gibt es eine Möglichkeit, zu debuggen, warum Bilder nicht lightboxed werden? Ich kann im HTML-Code sehen, dass die Klasse „Lightbox“ korrekt auf Bilder angewendet wird (und es gibt auch eine Klasse „Lightbox“ im a-Tag, der das Bild umschließt):

image
image602×107 13 KB

Meine Website verwendet Cloudflare. Ich bin mir nicht sicher, ob das in irgendeiner Weise stören könnte?

Danke!

3 „Gefällt mir“
2

Ich habe dies gerade mit Discourse Version 2.9.0.beta3 getestet und konnte das Problem nicht reproduzieren.

Wenn Sie auf ein Bild in einem Thema klicken, wird eine Lightbox mit dem Bild angezeigt, und das HTML zeigt, dass die Lightbox-Klasse auch auf das Bild angewendet wird.

Ich greife über Google Chrome Version 99.0.4844.82 auf Discourse zu, und die getestete Discourse-Website wird über Digital Ocean gehostet.

Hoffentlich hilft dies, weitere Einblicke in die Ursache dieses Problems auf Ihrer Website zu geben.

4 „Gefällt mir“
3

Nutzen Sie auch Rocket Loader oder andere JS-Optimierungen von Cloudflare bei Discourse?

Wenn ja, sollten Sie als Erstes die genannten Optimierungen deaktivieren und es erneut versuchen.

4 „Gefällt mir“
4

Das Problem scheint nicht vom Browser oder Betriebssystem abhängig zu sein. Ich sehe es in Firefox, Chrome und Safari unter macOS, Safari unter iOS und Firefox/Chrome/Edge unter Windows. Ich kann keine Browser-/Betriebssystem-Kombination finden, bei der Lightbox tatsächlich funktioniert. Daher vermute ich, dass es sich um ein Problem mit der Website selbst handelt, vielleicht eine Einstellung oder ein anderes Plugin, das sie beeinträchtigt?

Ich bin mir nicht sicher, wie oder wo ich anfangen soll, das herauszufinden, da ich in der Konsole oder den Website-Protokollen nichts sehe, das auf ein Problem hindeuten würde.

Nein, ich verwende keine Optimierungs- oder Minimierungsoptionen in Cloudflare. All diese sind deaktiviert. Das Einzige, was derzeit aktiviert ist, ist das Caching für 4 Stunden.

1 „Gefällt mir“
5

Ich konnte meine Produktionsseite lokal duplizieren und das Problem reproduzieren. Es stellt sich heraus, dass es sich um einen Fehler handelt, der aufgrund von Code in einem benutzerdefinierten Theme-Plugin, das ich geschrieben habe, auftritt. Ich kann immer noch nicht erklären, warum dies Lightbox beeinträchtigt oder warum dies erst seit kurzem ein Problem ist. Könnte es ein noch unentdeckter Fehler im Kern sein?

Mein Plugin-Code ist sehr einfach:

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 }
  );
});

Alles, was es versucht zu tun, ist ein einfacher String-Ersatz in gerendertem Post-Inhalt. Irgendwie beeinträchtigt dies alle Lightboxen in allen Posts (auch solche, die den String nicht enthalten). Das Auskommentieren der Zeile elem.innerHTML = ... lässt Lightboxen wieder funktionieren.

Beachten Sie, dass das obige Beispiel vereinfacht ist (mein tatsächliches Plugin ersetzt bestimmte gerenderte Links in Posts und führt andere Operationen mit gekochtem Inhalt durch), aber selbst der sehr einfache Code oben reproduziert das von mir beobachtete Problem.

Ist dies der richtige Weg, um gekochten Inhalt zur Renderzeit in Posts zu ändern, und handelt es sich um einen neuen Kernfehler im Zusammenhang mit Lightboxen? Oder habe ich das schon immer falsch gemacht und es hätte von Anfang an nicht funktionieren dürfen?

6

Ich habe eine einfache Theme-Komponente erstellt, die dieses Lightbox-Problem aufzeigt. Jeder sollte in der Lage sein, das Problem auf jeder Discourse-Installation zu reproduzieren, indem er diese Theme-Komponente aktiviert:
https://github.com/hayatae/lightbox-theme-component-bug

Wenn jemand mögliche Workarounds oder Vorschläge hat, lasst es mich bitte wissen! Ich bin mir immer noch nicht sicher, warum dies Lightbox beeinträchtigt.

7

Für alle anderen, die auf dieses Problem stoßen könnten: Ich konnte vorerst eine Problemumgehung finden.

Solange Sie keine innerHtml-Ersetzungen an Elementen vornehmen, die Bilder enthalten, die per Lightbox angezeigt werden, tritt das Problem nicht auf. Ich konnte einige meiner Codes umarbeiten, um Elemente spezifischer abzugleichen und nur diejenigen anzusprechen, die keine hrefs um Bilder herum sind.

4 „Gefällt mir“