¿Lightbox ya no funciona?

Error
1

No estoy seguro de qué cambió, pero hoy me di cuenta de que hacer clic en las imágenes en las publicaciones ahora simplemente abre la imagen como una nueva página (enlace directo a la imagen) en lugar de abrirla dentro de un marco Lightbox. Esto incluye imágenes grandes en publicaciones que sé que solían funcionar.

No veo ninguna configuración nueva en la interfaz de administración que habilite/deshabilite esta función. No estoy seguro de cuándo esta funcionalidad dejó de funcionar. Discourse está completamente actualizado según la página /admin/upgrade.

¿Hay alguna forma de depurar por qué las imágenes no se muestran en Lightbox? Puedo ver en el código HTML que la clase “Lightbox” se está aplicando correctamente a las imágenes (y también hay una clase “Lightbox” en la etiqueta a que envuelve la imagen):

image
image602×107 13 KB

Mi sitio está usando Cloudflare. ¿No estoy seguro de si eso podría estar interfiriendo de alguna manera?

¡Gracias!

3 Me gusta
2

Probé esto con la versión 2.9.0.beta3 de Discourse y no pude reproducir el problema.

Hacer clic en una imagen en un tema abre una Lightbox que contiene la imagen, y el HTML muestra que la clase lightbox también se está aplicando a la imagen.

Estoy accediendo a Discourse a través de Google Chrome Versión 99.0.4844.82, y el sitio de Discourse con el que probé esto está alojado en Digital Ocean.

Espero que esto ayude a proporcionar más información sobre lo que podría estar causando este problema en su sitio.

4 Me gusta
3

¿También estás usando rocket loader o alguna otra optimización de JS de Cloudflare en Discourse?

Si es así, lo primero que debes intentar es deshabilitar dichas optimizaciones y volver a intentarlo.

4 Me gusta
4

El problema no parece depender del navegador ni del sistema operativo. Lo veo en Firefox, Chrome y Safari en macOS, Safari en iOS y Firefox/Chrome/Edge en Windows. No puedo encontrar ninguna combinación de navegador/sistema operativo donde Lightbox realmente funcione, así que supongo que es algún tipo de problema con el sitio en sí, ¿quizás alguna configuración u otro plugin que lo esté rompiendo?

No estoy seguro de cómo o dónde empezar a intentar averiguar eso, ya que no veo nada en la consola ni en los registros del sitio que indique un problema.

No, no estoy usando ninguna opción de optimización o minimización en Cloudflare. Todas esas están deshabilitadas. Lo único que está actualmente habilitado es el caché durante 4 horas.

1 me gusta
5

Pude duplicar mi sitio de producción localmente y reproducir el problema. Resulta que es un error que está apareciendo debido a algún código en un plugin de tema personalizado que escribí. Todavía no puedo explicar por qué esto está rompiendo Lightbox o por qué esto se convirtió en un problema recientemente. ¿Podría ser un error aún no descubierto en el núcleo?

Mi código de plugin es muy 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 }
  );
});

Todo lo que intenta hacer es un simple reemplazo de cadenas en el contenido de las publicaciones renderizadas. De alguna manera, esto rompe todos los Lightboxes en todas las publicaciones (incluso aquellas que no contienen la cadena). Comentar la línea elem.innerHTML = ... hace que los Lightboxes vuelvan a funcionar.

Tenga en cuenta que el ejemplo anterior está simplificado (mi plugin real reemplaza enlaces renderizados específicos en las publicaciones y realiza otras operaciones en el contenido cocido), pero incluso el código muy simple anterior reproduce el problema que estoy viendo.

¿Es esta la forma correcta de modificar el contenido cocido en el momento de la renderización en las publicaciones y este es un nuevo error central relacionado con Lightboxes? ¿O lo he estado haciendo mal todo el tiempo y esto nunca debió haber funcionado en primer lugar?

6

He creado un componente de tema sencillo que expone este problema de Lightbox. Cualquiera debería poder reproducir el problema en cualquier instalación de Discourse activando este componente de tema:
https://github.com/hayatae/lightbox-theme-component-bug

Si alguien tiene alguna posible solución o sugerencia, ¡hágamelo saber! Todavía no estoy seguro de por qué esto rompe Lightbox.

7

Para cualquier otra persona que pueda encontrarse con este problema, pude encontrar una solución provisional por ahora.

Siempre que no realice reemplazos de innerHtml en ningún elemento que contenga imágenes que se mostrarán en lightbox, el problema no ocurrirá. Pude rehacer parte de mi código para que coincida con los elementos de forma más específica y solo dirigirme a aquellos que no son hrefs alrededor de las imágenes.

4 Me gusta