Control deslizante de comparación de imágenes

¿Hay alguna forma de que esto funcione con fotos que no se han subido? ¿Con fotos que se insertan a través de enlaces?

Hola, me gustaría informar de un error reciente con este componente de tema.

Visible aquí: 

Última versión de Image comparison slder

Versión de Discourse: 3.5.0.beta1-dev

(402ec6bf5c)

Gracias por su trabajo
Stéphane.

2 Me gusta

He actualizado este componente para cumplir con los nuevos estándares de la API:

2 Me gusta

¡Buen trabajo!

No es por añadir más a tu carga de trabajo… pero… ¿le has echado un vistazo usando el nuevo editor de texto enriquecido?

1 me gusta

No, no lo he hecho, ¿hay algún problema con él?

2 Me gusta

Sí, desafortunadamente no funciona. Veo esto después de presionar el botón de imagen de comparación cuando el editor de texto enriquecido está habilitado:

1 me gusta

No estoy seguro de cómo hacer que esto funcione, parece que el editor de texto enriquecido maneja HTML incorrectamente. Me imagino que verías el mismo problema en cualquier componente similar, como una galería de imágenes.

2 Me gusta

Oye Joseph, ¿te parecería bien que intentara arreglar el componente?

2 Me gusta

No supongo que tengas tiempo para investigar esto o aceptar la oferta de @Arkshine :smiley:

1 me gusta

Lo siento, olvidé responder. Me encantaría que alguien con más conocimiento intentara esto, la instancia de Discourse a la que tengo acceso no tiene habilitada la prueba enriquecida y no tengo la capacidad de habilitarla, así que realmente no puedo probar esto :thinking: ¡gracias por ofrecerte!

3 Me gusta

OK, gracias por avisarme, lo intentaré. :+1:

3 Me gusta

¡Hola a todos! Por fin he tenido tiempo de trabajar en esto.
Espero que todavía haya interés en este TC.

La PR moderniza el TC con las siguientes características:

  • Zoom y desplazamiento (rueda del ratón, pellizco y controles en la imagen)
  • Vista en pantalla completa
  • Abrir las imágenes originales de tamaño completo en la ventana emergente (lightbox)
  • Etiquetas opcionales de «antes/después» con colocación configurable
  • Subtítulo opcional
  • Varios estilos de controlador (línea, delgado, círculo, asa) y un color personalizado para el controlador
  • Editar los controles deslizantes directamente en el editor de texto enriquecido o con markdown
  • Accesible desde el teclado (las flechas mueven el divisor, +/-/0 para zoom)
  • Restringir quién puede insertar controles deslizantes por grupo

El formato markdown ha cambiado usando la etiqueta [wrap]. Se garantiza la compatibilidad con versiones anteriores.
Se requiere la versión 2026.6.0-latest.

Es compatible con dispositivos móviles y RTL. Sin embargo, no soy experto en UX y no pude probarlo mucho en móviles ni en iOS.

Si quieres probarlo por separado, puedes usar:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • rama: modernize-with-rte
    (Recomiendo no editar los controles deslizantes de la versión anterior para no cambiar el formato markdown)
5 Me gusta