Arreglar imágenes rotas en publicaciones creadas por los plugins WP Discourse y RSS

Existe un caso en el que las imágenes publicadas en Discourse a través de los complementos WP Discourse y RSS pueden quedar rotas. Esto puede ocurrir cuando se publica el contenido completo de la publicación en Discourse con el complemento WP Discourse y se utiliza el editor clásico de WordPress para publicar la publicación. También puede suceder con publicaciones extraídas en Discourse mediante la sonda RSS cuando no está habilitada la configuración de Incrustación Recortar las publicaciones incrustadas.

El problema ocurre cuando Discourse intenta descargar las imágenes que se han agregado a la publicación. Si la descarga de la imagen remota resulta en una etiqueta de imagen en markdown envuelta en etiquetas HTML, la imagen quedará rota.

Si las publicaciones se están publicando desde WordPress, el problema debería resolverse cambiando del uso del Editor Clásico al uso del Editor de Bloques para publicar las publicaciones. Si esto no es posible, o si no resuelve el problema, una solución alternativa es evitar que Discourse descargue las imágenes remotas.

Si conoce los dominios desde los que se publican las imágenes remotas, puede evitar que Discourse descargue estas imágenes agregando el(os) dominio(s) a la configuración del sitio dominios de descarga de imágenes deshabilitados:

Si no está seguro de todos los dominios que se están utilizando, puede evitar que Discourse descargue todas las imágenes remotas deshabilitando la opción descargar imágenes remotas a local. Tenga en cuenta que deshabilitar esta configuración podría resultar en imágenes rotas en su sitio. Si es posible, es mejor evitar solo la descarga de imágenes remotas de dominios específicos que usted controla.

5 Me gusta

¿Podría darme más detalles al respecto? Todos mis sitios utilizan el Editor Clásico, pero muy pocos usan un plugin para renderizar Markdown como entrada (el espacio de plugins para analizadores de Markdown se ha agotado, así que la gente suele recurrir a Jetpack la mayoría de las veces).

¿Se refiere al caso en el que se utiliza un analizador de Markdown encima del Editor Clásico? :thinking:

El problema ocurre cuando se publica HTML en el siguiente formato en Discourse. Es más probable que suceda cuando un tema se publica en Discourse a través de la API:

<p><img src="remote-image-domain/..."/></p>

Cualquier etiqueta externa alrededor de la etiqueta de imagen causará el problema, por ejemplo <figure><img src="remote-image-domain/..."/></figure>.

Cuando Discourse intenta descargar la imagen remota, se generará el siguiente markdown para el primer ejemplo:

<p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>

Esto creará una imagen rota. Se puede solucionar manualmente editando la publicación de Discourse de la siguiente manera:

<p>

![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
</p>

pero simplemente evitar que Discourse descargue la imagen remota con la configuración del sitio “dominios de descarga de imágenes deshabilitados” es una forma más sencilla de solucionarlo.

Para las publicaciones publicadas desde WP Discourse con el Editor de Bloques, el plugin intenta solucionar el problema procesando la publicación con el siguiente código antes de publicarla en Discourse:

Podría ser posible implementar una solución similar para el Editor Clásico, pero con el Editor Clásico la función parse_blocks de WordPress no está disponible, por lo que la solución sería más compleja. Mi esperanza es que el problema pueda resolverse finalmente con cambios en el código central de Discourse.

3 Me gusta

¡Muchas gracias, Simon! Entiendo el problema, gran explicación. :slight_smile:

1 me gusta

Hola Simon,
Gracias por crear WP Discourse. :slight_smile:

Yo también tuve este problema con las imágenes. Uso esta herramienta para descargar imágenes localmente y eso rompió las imágenes como explicaste arriba. Después, convertí el HTML de WordPress a Markdown y pegué la versión convertida en Discourse. Funciona bien, pero es manual.
¿Sería posible integrar un convertidor para que lo haga automáticamente al exportar desde WordPress?

¡Gracias!

1 me gusta

Si estás utilizando el editor de bloques de WordPress para publicar entradas, la conversión debería ocurrir automáticamente. Si estás utilizando el editor clásico, tendrás que corregir manualmente el HTML en Discourse para evitar imágenes rotas.

Avísame si estás utilizando el editor de bloques pero sigues teniendo problemas con imágenes rotas.

Sería posible agregar una funcionalidad similar a las entradas publicadas con el editor clásico, pero el código necesario para hacerlo sería más complejo que lo que se está haciendo con el editor de bloques.

1 me gusta

Estoy usando el editor de bloques (Gutenberg), pero hay algunos plugins de terceros instalados en él. Quizás eso esté causando el problema con las imágenes rotas. También utilizo algunos plugins de galería de terceros en WordPress.

El plugin de galería podría ser la causa del problema. Lo que hace el plugin WP Discourse es, antes de establecer el contenido del artículo que se publicará en Discourse, buscar cualquier blocks en el artículo cuyo blockName esté configurado como core/image o core/gallery. El HTML de las imágenes en esos bloques se reescribe en un formato que puede ser analizado por Discourse.

Parece posible que los plugins de imágenes utilizados en tu sitio estén usando nombres de bloques que no se están manejando. ¿Cuál es el nombre del plugin de galería que estás usando?

Entiendo… Estoy usando esto, pero acabo de ver que ya no tiene soporte. Así que creo que convertiré las imágenes de nuevo a la galería predeterminada e intentaré actualizar los temas de Discourse. Este debe ser el problema, lo siento por ello.

1 me gusta

Cambié al Editor de Bloques (debe hacerse en algún momento, ya que el soporte para el Editor Clásico finalizará el próximo año), pero no solucionó el problema. Las imágenes estaban alojadas en Facebook.

¿Puedes revisar el marcado de las imágenes en la publicación de WordPress seleccionando ‘Editor de código’ en la barra lateral? Lo que me pregunto es en qué tipo de bloque (si es que hay alguno) están las imágenes:

El plugin de WordPress utiliza nombres de bloques para analizar las imágenes. Si la imagen no está en un bloque que el plugin esté gestionando actualmente, su marcado no se limpiará.

1 me gusta

La publicación de WP fue un copiar y pegar desde Facebook, aquí hay un ejemplo del código HTML.
Las imágenes eran emojis de imágenes:

<div dir="auto"><span class="pq6dq46d tbxw36s4 knj5qynh kvgmc6g5 ditlmg2l oygrvhab nvdbi5me sf5mxxl7 gl3lb2sf hhz5lgdu"><img src="https://static.xx.fbcdn.net/images/emoji.php/v9/t34/1/16/1f914.png" alt="🤔" width="16" height="16"></span>Comment ? Vous avez 1 mois pour nous envoyer vos plus beaux poèmes et/ou dessins sur le thème du monocycle, ce qu'il vous évoque, votre passion pour ce sport, etc.</div>

No tengo la misma barra lateral que tú en el editor de bloques, así que mostré el contenido HTML del bloque con esta opción:

Si el problema ocurre porque no es contenido “regular” de WP sino un copiar y pegar de HTML, eso no es un problema. Le diré a mis usuarios que eviten copiar y pegar imágenes, incluso emojis. :slight_smile:

1 me gusta

Sí, creo que el problema aquí es que el HTML se copió en la publicación de WordPress. El plugin WP Discourse debería poder manejar imágenes agregadas mediante un bloque de imagen. No está configurado para corregir el HTML de imágenes agregadas de cualquier otra manera.

Idealmente, Discourse podría manejar etiquetas de imagen HTML envueltas en otras etiquetas HTML, pero es un problema complicado. Es posible que el plugin WP Discourse pueda actualizarse para manejar imágenes agregadas fuera de los bloques de imagen. Mi esperanza era que gestionar los bloques de imagen cubriera la mayoría de los casos, pero parecen haber muchas excepciones a eso.

3 Me gusta

Hola,

He leído este tema y el otro tema principal sobre imágenes.

Publicar un extracto de mi sitio en Discourse funciona perfectamente. Sin embargo, al hacer clic en el botón «Mostrar publicación completa», parece entrar en un bucle de carga y nunca carga la publicación completa (ni hace nada más, por cierto).

Si intento publicar la publicación completa en Discourse, también funciona, aunque con algunos problemas:

  1. Las imágenes no se cargan (por eso encontré estos temas);
  2. Se carga la publicación completa (tengo varios botones/enlaces dentro del contenido de cada publicación que podrían confundir al plugin), pero también se carga un extracto perfectamente formateado de la misma publicación al final, por alguna razón. Es decir, se carga la publicación completa (sin las imágenes) y luego se carga otro extracto de la misma publicación al final.

Un dato a tener en cuenta: mi sitio de WordPress está en modo de prueba (staging) y no usa HTTPS. Mi sitio de Discourse sí usa HTTPS. Pensé que la carga de la publicación completa podría ser el problema debido al sitio en staging, pero otras cosas parecen funcionar (por ejemplo, forzar la actualización de categorías).

Entiendo que se trata de un problema complejo. Que un plugin formatee las publicaciones de otras personas, cuando todos hacemos cosas diferentes, sería increíblemente difícil, y creo que el equipo de Discourse ha hecho un trabajo admirable. Solo estoy intentando encontrar una solución alternativa lo más sencilla posible. ¿Quizás simplemente usar Oneboxing para enlazar la publicación? Al menos la publicación (o un enlace a ella) estaría en el sitio de Discourse, aunque no habría una sincronización continua.

Gracias por cualquier sugerencia que alguien pueda tener.

El problema podría ser que Discourse no pueda encontrar ningún contenido en la página de WordPress. No esperaría que esto cause un bucle, sin embargo. Discourse debería simplemente fallar en silencio si no puede encontrar ningún contenido en la página. Solo por si acaso estás probando esto con una publicación que no tiene contenido real, intenta crear una publicación con algo de texto real y mira si eso marca la diferencia. También podrías querer consultar Cómo configurar la opción de selectores de incrustación permitidos. La opción «selectores de incrustación permitidos» puede utilizarse para ayudar a Discourse a encontrar el contenido de la página.

¿Estás utilizando el Editor de bloques para publicar tus publicaciones de WordPress? De ser así, ¿cómo se están agregando las imágenes a las publicaciones? ¿Estás utilizando un complemento que agrega bloques de imagen personalizados?

¿El extracto de publicación que se carga incluye las imágenes de la publicación?

No esperaría que el extracto se cargue automáticamente aquí. Lo que esperaría es que se muestre el botón «Mostrar publicación completa». Al hacer clic en ese botón debería cargarse el extracto. Cuando se publica el contenido completo de una publicación desde WordPress a Discourse, puedes evitar que se muestre el botón «Mostrar publicación completa» desactivando la opción del sitio de Discourse embed truncate.

Esto podría ser una buena solución para ti. Echa un vistazo a Customize the structure of WP Discourse templates para obtener detalles sobre cómo personalizar la plantilla que se utiliza para publicar publicaciones. Hay una plantilla de ejemplo para publicar la publicación como un onebox aquí.

Hola,

Gracias, Simon, por tu respuesta tan rápida.

He seguido tus sugerencias, pero no he logrado cambiar el resultado, lo cual probablemente se deba más a mis habilidades con Discourse que a cualquier otra cosa.

Tu primera sugerencia fue asegurarme de que la publicación tuviera contenido. Las publicaciones sí tenían contenido real, así que no creo que ese fuera el problema. También sugeriste que revisara la configuración de «Cómo configurar los selectores de incrustación permitidos», lo cual hice, pero aún no he notado ningún cambio. Mantuve esta configuración muy simple e incluso incluí las etiquetas

y otra clase CSS (bastante genérica), pero al hacer clic en «Mostrar publicación completa», sigue diciendo «Cargando».

Estoy utilizando el Editor de Bloques. No tengo plugins específicos para imágenes, pero sí uso Genesis Blocks. Sin embargo, la imagen que Discourse intenta cargar es la imagen destacada de la publicación, que, creo, es nativa de WordPress.

En cuanto a tu pregunta: «¿El extracto de la publicación que carga incluye las imágenes de la publicación?» — No, la publicación no incluye ninguna imagen. Sin embargo, si hago clic donde debería estar la imagen, me redirige al artículo original.

Investigaré más sobre la opción de Oneboxing. Gracias también por los enlaces a ese tema.

Eso podría ser la causa del problema con esa imagen. Lo revisaré.

No estoy seguro de qué podría estar ocurriendo aquí. Si tu sitio de Discourse es público, ¿podrías compartir un enlace a un tema que tenga ese problema? Puedes enviármelo por mensaje privado si lo prefieres.

Gracias nuevamente por esto. El sitio aún está en fase de pruebas y no es público. ¿Podría ser ese el problema?

Además, por alguna razón, la función de Oneboxing no funciona. Si pego un enlace de, por ejemplo, CNN.com, el Oneboxing funciona muy bien, pero desde mi sitio de pruebas, que no usa HTTPS, simplemente se pega el enlace. ¿Es eso porque el sitio de pruebas no es seguro?

Tener el sitio de Discourse privado no debería causar ningún problema. ¿Estás ocultando el sitio de WordPress de alguna manera? Si el sitio de WordPress está bloqueando las solicitudes de Discourse para obtener el contenido completo de la publicación, eso causaría un problema.

El sitio de Discourse es público. Me encantaría ocultarlo durante el desarrollo, pero no pude averiguar cómo ponerlo en fase de prueba. Tengo un sitio principal de WP que está en fase de prueba/desarrollo, y ese sitio es privado/oculto.

Puedo forzar una actualización de categoría desde el plugin de WP. Asumo, probablemente incorrectamente, que eso significaba que Discourse podía contactar al sitio principal incluso aunque el sitio principal estuviera en fase de prueba.