Consertar imagens quebradas nos posts criados pelos plugins WP Discourse e RSS

Há um caso em que imagens publicadas no Discourse por meio dos plugins WP Discourse e RSS podem ficar quebradas. Isso pode ocorrer quando o conteúdo completo da postagem é publicado no Discourse com o plugin WP Discourse e o editor clássico do WordPress é usado para publicar a postagem. Também pode acontecer com postagens puxadas para o Discourse com a coleta RSS quando a configuração de incorporação Truncar as postagens incorporadas não está ativada.

O problema ocorre quando o Discourse tenta baixar imagens que foram adicionadas à postagem. Se o download da imagem remota resultar em uma tag de imagem em Markdown envolta por tags HTML, a imagem ficará quebrada.

Se as postagens estiverem sendo publicadas a partir do WordPress, o problema deve ser resolvido alternando do Editor Clássico para o Editor de Blocos para publicar as postagens. Se isso não for possível ou se não resolver o problema, uma solução alternativa é impedir que o Discourse baixe as imagens remotas.

Se você conhece os domínios dos quais as imagens remotas estão sendo publicadas, pode impedir que o Discourse baixe essas imagens adicionando o(s) domínio(s) à configuração do site domínios de download de imagem desativados:

Se você não tem certeza de todos os domínios que estão sendo usados, pode impedir que o Discourse baixe todas as imagens remotas desativando a opção baixar imagens remotas para local. Observe que desativar essa configuração pode resultar em imagens quebradas no seu site. Se possível, é melhor impedir o download de imagens remotas apenas de domínios específicos que você controla.

5 curtidas

Posso pedir mais detalhes sobre isso? Todos os meus sites usam o Editor Clássico, mas muito poucos usam um plugin para renderizar Markdown como entrada (o espaço de plugins para parsers de Markdown secou, então as pessoas geralmente recorrem ao Jetpack).

Esse caso ocorre quando um parser de Markdown é usado sobre o Editor Clássico? :thinking:

O problema ocorre quando HTML no formato a seguir é publicado no Discourse. É mais provável que aconteça quando um tópico é publicado no Discourse via API:

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

Qualquer tag externa ao redor da tag de imagem causará o problema, por exemplo <figure><img src="remote-image-domain/..."/></figure>.

Quando o Discourse tenta baixar a imagem remota, o seguinte markdown seria gerado para o primeiro exemplo:

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

Isso resultará em uma imagem quebrada. Pode ser corrigido manualmente editando a postagem no Discourse para:

<p>

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

</p>

mas simplesmente impedir que o Discourse baixe a imagem remota com a configuração do site “domínios de download de imagem desabilitados” é uma maneira mais fácil de corrigir.

Para postagens publicadas a partir do WP Discourse com o Editor de Blocos, o plugin tenta corrigir o problema processando a postagem com o seguinte código antes de publicá-la no Discourse:

Pode ser possível implementar uma correção semelhante para o Editor Clássico, mas com o Editor Clássico a função parse_blocks do WordPress não está disponível, então a correção seria mais complexa. Minha esperança é que o problema possa eventualmente ser resolvido com alterações no código principal do Discourse.

3 curtidas

Muito obrigado, Simon! Entendi o problema, ótima explicação. :slight_smile:

1 curtida

Olá Simon,
Obrigado por criar o WP Discourse. :slight_smile:

Eu também tive esse problema com imagens. Eu uso isso para baixar imagens localmente, o que quebrou as imagens como você explicou acima. Depois disso, converti o HTML do WordPress para Markdown e colei o convertido no Discourse. Está funcionando bem, mas é manualmente.
É possível integrar o conversor para fazer isso automaticamente ao exportar do WordPress?

Obrigado!

1 curtida

Se você estiver usando o editor de blocos do WordPress para publicar posts, a conversão deve ocorrer automaticamente. Se estiver usando o Editor Clássico, será necessário corrigir manualmente o HTML no Discourse para evitar imagens quebradas.

Avise-me se você estiver usando o Editor de Blocos, mas ainda tiver problemas com imagens quebradas.

Pode ser possível adicionar funcionalidade semelhante para posts publicados com o Editor Clássico, mas o código necessário para isso seria mais complexo do que o que está sendo feito com o Editor de Blocos.

1 curtida

Estou usando o editor de blocos (Gutenberg), mas há alguns plugins de terceiros instalados nele. Talvez isso esteja causando o problema com as imagens quebradas. Também utilizo alguns plugins de galeria de terceiros no WordPress.

O plugin de galeria pode ser a causa do problema. O que o plugin WP Discourse faz, antes de definir o conteúdo do post que será publicado no Discourse, é procurar por quaisquer blocks no post cujo blockName esteja definido como core/image ou core/gallery. O HTML das imagens nesses blocos é reescrito em um formato que pode ser interpretado pelo Discourse.

Parece possível que plugins de imagem usados no seu site estejam utilizando nomes de blocos que não estão sendo tratados. Qual é o nome do plugin de galeria que você está usando?

Entendi… Estou usando isso, mas acabei de perceber que já não é mais suportado. Então, acho que vou converter as imagens de volta para a galeria padrão e tentar atualizar os tópicos do Discourse. Esse deve ser o problema, desculpe por isso.

1 curtida

Mudei para o Editor de Blocos (isso precisa ser feito em algum momento, já que o suporte ao Editor Clássico terminará no próximo ano), mas não resolveu o problema. As imagens estavam hospedadas no Facebook.

Você consegue verificar a marcação das imagens na postagem do WordPress selecionando o ‘Editor de código’ na barra lateral? O que me pergunto é em que tipo de bloco (se houver) as imagens estão:

O plugin do WordPress usa nomes de bloco para analisar as imagens. Se a imagem não estiver em um bloco que o plugin esteja atualmente gerenciando, sua marcação não será limpa.

1 curtida

O post do WP foi uma cópia e colagem do Facebook, aqui está uma amostra do código HTML.
As imagens eram emojis de imagem:

<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>

Eu não tenho a mesma barra lateral que você no editor de blocos, então exibi o conteúdo HTML do bloco com esta opção:

Se o problema ocorrer porque não é conteúdo “regular” do WP, mas uma cópia e colagem em HTML, isso não é um problema. Vou avisar meus usuários para evitar copiar e colar imagens, até mesmo emojis. :slight_smile:

1 curtida

Sim, acho que o problema aqui é que o HTML foi copiado para a postagem do WordPress. O plugin WP Discourse deve ser capaz de lidar com imagens adicionadas por meio de um bloco de imagem. Ele não está configurado para corrigir o HTML de imagens adicionadas de qualquer outra forma.

Idealmente, o Discourse conseguiria lidar com tags de imagem HTML envoltas em outras tags HTML, mas é um problema complicado. É possível que o plugin WP Discourse possa ser atualizado para lidar com imagens adicionadas fora dos blocos de imagem. Minha esperança era que lidar com blocos de imagem cobrisse a maioria dos casos, mas parece haver muitas exceções a isso.

3 curtidas

Olá,

Li este tópico e o outro tópico principal que trata de imagens.

Publicar um trecho do meu site no Discourse funciona perfeitamente. No entanto, ao clicar no botão “Mostrar Postagem Completa”, parece entrar em um loop de carregamento e nunca carrega a postagem completa (ou faz qualquer outra coisa, aliás).

Se eu tentar publicar a postagem completa no Discourse, isso também funciona, embora com algumas peculiaridades:

  1. as imagens não carregam (foi assim que encontrei esses tópicos);
  2. ele carrega a postagem completa (tenho vários botões/links dentro do conteúdo de cada postagem que podem confundir o plugin), mas também carrega um trecho perfeitamente formatado da mesma postagem no final, por algum motivo. Em outras palavras, ele carrega a postagem completa (menos as imagens) e, em seguida, carrega outro trecho da mesma postagem na parte inferior.

Uma coisa a notar: meu site WP está em modo de staging e não usa HTTPS. Meu site Discourse é HTTPS. Achei que o carregamento da postagem completa pudesse ser o problema devido ao site de staging, mas outras coisas parecem funcionar (por exemplo, forçar atualizações de categoria).

Entendo que se trata de uma questão complexa. Ter um plugin formatando postagens de outras pessoas, quando todos estamos fazendo coisas diferentes, seria incrivelmente desafiador, e acho que a equipe do Discourse fez um trabalho admirável. Estou apenas tentando encontrar uma solução alternativa o mais simples possível. Talvez apenas Oneboxing o link para a postagem? Pelo menos a postagem (ou um link para ela) estaria no site do Discourse, mas não haveria nenhuma coordenação de ida e volta.

Obrigado por qualquer sugestão que alguém possa ter.

O problema pode ser que o Discourse não consegue encontrar nenhum conteúdo na página do WordPress. Não esperaria que isso causasse um loop, porém. O Discourse deveria apenas falhar silenciosamente se não conseguir encontrar conteúdo na página. Apenas para garantir que você esteja testando isso com uma postagem sem conteúdo real, tente criar uma postagem com algum texto real e veja se isso faz diferença. Você também pode querer consultar Como configurar a opção de seletores de incorporação permitidos. A opção allowed embed selectors pode ser usada para ajudar o Discourse a encontrar o conteúdo da página.

Você está usando o Editor de Blocos para publicar suas postagens no WordPress? Se sim, como as imagens estão sendo adicionadas às postagens? Você está usando um plugin que adiciona blocos de imagem personalizados?

O resumo da postagem carregado inclui as imagens da postagem?

Não esperaria que o resumo fosse carregado automaticamente aqui. O que esperaria é que o botão “Mostrar Postagem Completa” fosse exibido. Ao clicar nesse botão, o resumo deve ser carregado. Quando o conteúdo completo da postagem é publicado do WordPress para o Discourse, você pode impedir que o botão “Mostrar Postagem Completa” seja exibido desativando a configuração de site do Discourse embed truncate.

Isso pode ser uma boa solução para você. Confira Customize the structure of WP Discourse templates para detalhes sobre como personalizar o modelo usado para publicar postagens. Há um modelo de exemplo para publicar a postagem como um onebox aqui.

Olá,

Obrigado, Simon, pela sua resposta muito rápida.

Segui suas sugestões, mas não consegui alterar o resultado. Isso provavelmente é mais uma questão das minhas habilidades com o Discourse do que qualquer outra coisa.

Sua primeira sugestão foi garantir que a postagem tivesse algum conteúdo. As postagens realmente tinham conteúdo, então não acredito que esse fosse o problema. Você também sugeriu que eu configurasse a opção “Como configurar os seletores de incorporação permitidos”, o que também fiz, mas ainda não notei nenhuma diferença. Mantive essa configuração bem simples e incluí até mesmo as tags

e mais uma classe CSS (bastante genérica), mas ao clicar em “Mostrar Postagem Completa”, ainda aparece apenas “Carregando”.

Estou usando o Editor de Blocos. Não tenho plugins específicos para imagens, mas uso os Genesis Blocks. No entanto, a imagem que o Discourse está tentando carregar é a Imagem em Destaque da postagem, que, creio eu, é nativa do WordPress.

Quanto à sua pergunta: “O resumo da postagem carregado inclui as imagens da postagem?” — Não, a postagem não inclui nenhuma imagem. No entanto, se eu clicar onde a imagem deveria estar, sou redirecionado para o artigo original.

Vou investigar mais a fundo a opção Oneboxing. Obrigado também pelos links para esse tópico.

Isso pode ser a causa do problema com essa imagem. Vou investigar.

Não tenho certeza do que pode estar acontecendo com isso. Se o seu site do Discourse for público, você pode compartilhar um link para um tópico que apresente esse problema? Você pode me enviar por MP se preferir.

Obrigado novamente por isso. O site ainda está em staging e não é público. Isso poderia ser o problema?

Além disso, por algum motivo, o Oneboxing não funciona. Se eu colar um link, por exemplo, do CNN.com, o Oneboxing funciona muito bem, mas do meu site de staging, sem HTTPS, ele apenas cola o link. É porque o site de staging não é seguro?

Manter o site do Discourse privado não deve causar problemas. Você está ocultando o site do WordPress de alguma forma? Se o site do WordPress estiver bloqueando as solicitações do Discourse para obter o conteúdo completo da postagem, isso causaria um problema.

O site Discourse está público. Gostaria muito de escondê-lo durante o desenvolvimento, mas não consegui descobrir como colocá-lo em staging. Tenho um site principal do WordPress que está em staging/desenvolvimento, e esse site é privado/escondido.

Consegui forçar uma atualização de categoria a partir do plugin do WordPress. Acredito, provavelmente de forma incorreta, que isso significava que o Discourse poderia entrar em contato com o site principal, mesmo que ele estivesse em staging.