Lightbox non funziona più?

Bug
1

Non sono sicuro di cosa sia cambiato, ma ho notato oggi che fare clic sulle immagini nei post ora apre semplicemente l’immagine come una nuova pagina (link diretto all’immagine) invece di aprirla all’interno di un frame Lightbox. Questo include immagini di grandi dimensioni nei post che so che funzionavano in precedenza.

Non vedo nuove impostazioni nell’interfaccia di amministrazione che abilitino/disabilitino questa funzionalità. Non sono sicuro di quando questa funzionalità abbia smesso di funzionare. Discourse è completamente aggiornato secondo la pagina /admin/upgrade.

C’è un modo per eseguire il debug del motivo per cui le immagini non vengono visualizzate in Lightbox? Posso vedere nel codice HTML che la classe “Lightbox” viene applicata correttamente alle immagini (e c’è anche una classe “Lightbox” sul tag a che racchiude l’immagine):

image
image602×107 13 KB

Il mio sito utilizza Cloudflare. Non sono sicuro se ciò possa interferire in qualche modo?

Grazie!

3 Mi Piace
2

Ho appena testato questo con la versione 2.9.0.beta3 di Discourse e non sono riuscito a riprodurre il problema.

Fare clic su un’immagine in un argomento apre una Lightbox contenente l’immagine e l’HTML mostra che la classe lightbox viene applicata anche all’immagine.

Accedo a Discourse tramite Google Chrome Versione 99.0.4844.82 e il sito Discourse che ho testato è ospitato tramite Digital Ocean.

Spero che questo aiuti a fornire maggiori informazioni su ciò che potrebbe causare questo problema sul tuo sito.

4 Mi Piace
3

Stai utilizzando anche rocket loader o altre ottimizzazioni JS di Cloudflare su Discourse?

Se è così, la prima cosa da provare è disabilitare le ottimizzazioni menzionate e riprovare.

4 Mi Piace
4

Il problema non sembra dipendere dal browser o dal sistema operativo. Lo vedo su Firefox, Chrome e Safari su macOS, Safari su iOS e Firefox/Chrome/Edge su Windows. Non riesco a trovare alcuna combinazione di browser/sistema operativo in cui Lightbox funzioni effettivamente, quindi suppongo che si tratti di un problema del sito stesso, forse qualche impostazione o un altro plugin che lo interrompe?

Non sono sicuro di come o dove iniziare a capirlo, dato che non vedo nulla nella console o nei log del sito che indichi un problema.

No, non sto utilizzando alcuna opzione di ottimizzazione o minimizzazione in Cloudflare. Tutte queste sono disabilitate. L’unica cosa attualmente abilitata è la cache per 4 ore.

1 Mi Piace
5

Sono riuscito a duplicare il mio sito di produzione localmente e a riprodurre il problema. Si scopre che è un bug che sta emergendo a causa di del codice in un plugin di tema personalizzato che ho scritto. Ancora non riesco a spiegare perché questo stia rompendo Lightbox o perché questo sia diventato un problema solo di recente. Potrebbe essere un bug non ancora scoperto nel core?

Il mio codice del plugin è molto semplice:

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

Tutto ciò che sta cercando di fare è una semplice sostituzione di stringhe nel contenuto del post renderizzato. In qualche modo, questo rompe tutti i Lightbox in tutti i post (anche quelli che non contengono la stringa). Commentando la riga elem.innerHTML = ... i Lightbox tornano a funzionare.

Nota che l’esempio sopra è semplificato (il mio plugin effettivo sostituisce link specifici renderizzati nei post e svolge altre operazioni sul contenuto cotto), ma anche il codice molto semplice sopra riproduce il problema che sto riscontrando.

È questo il modo corretto di modificare il contenuto cotto al momento del rendering nei post e questo è un nuovo bug del core relativo ai Lightbox? O ho sbagliato tutto fin dall’inizio e questo non avrebbe mai dovuto funzionare in primo luogo?

6

Ho creato un semplice componente del tema che espone questo problema di Lightbox. Chiunque dovrebbe essere in grado di riprodurre il problema su qualsiasi installazione di Discourse attivando questo componente del tema:
https://github.com/hayatae/lightbox-theme-component-bug

Se qualcuno ha possibili soluzioni alternative o suggerimenti, per favore fammelo sapere! Non sono ancora sicuro del motivo esatto per cui questo interrompe Lightbox.

7

Per chiunque altro dovesse imbattersi in questo problema, sono riuscito a trovare una soluzione temporanea.

Finché non si eseguono sostituzioni innerHtml su elementi contenenti immagini che verranno visualizzate in lightbox, il problema non si verificherà. Sono riuscito a rielaborare parte del mio codice per associare gli elementi in modo più specifico e a puntare solo quelli che non sono href attorno alle immagini.

4 Mi Piace