Formatação markdown junta com html faz imagens não carregarem

Aqui está um trecho de uma postagem criada no site de discussão do Projeto Fedora, extraído do nosso Blog da Comunidade:

<p>Diga-nos o que você pensa. Você usaria isso como sua página inicial agora que ela possui um campo de mecanismo de busca? Como você acha que podemos melhorá-la ainda mais?</p> ![](upload://na9g3dGvhEU753JEnGrz8xER4XS.png)<p class="has-text-align-center">OU</p> ![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png)<p>Se você estiver interessado em ver mais, confira o <a href="https://discussion.fedoraproject.org/t/how-do-you-feel-about-the-new-design-of-start-fedoraproject-org-page/28689">rascunho no Figma</a>. </p>

Veja como essas linhas de imagem em markdown não começam realmente em novas linhas? Isso faz com que as imagens não sejam exibidas. Se eu editar a mensagem e adicionar uma quebra de linha antes de cada ![], as imagens são exibidas corretamente.

Há algo que eu possa alterar em nossa configuração para corrigir isso? Ou isso é apenas um erro no plugin?

Olá @mattdm,

Você poderia compartilhar um link para a postagem original no WP e para a postagem no Discourse com o trecho, caso estejam publicadas publicamente?

O plugin WP Discourse, essencialmente, apenas transmite qualquer HTML encontrado na postagem do WP para o Discourse, que então o processa para inclusão na postagem do Discourse. Portanto, como o HTML é exibido em trechos de postagens do WordPress no Discourse depende de duas coisas:

  1. A estrutura original do HTML no WordPress (por exemplo)
  2. Como o analisador de markdown do Discourse interpreta o HTML para exibição nas postagens do Discourse (por exemplo).

Então, ou se trata de uma questão estrutural do HTML do WordPress, que é essencialmente algo fora do escopo do WP Discourse ou do próprio Discourse, ou é principalmente uma questão de opinião sobre o que um analisador de HTML deve fazer, embora às vezes haja uma melhoria clara que possa ser feita nesse sentido.

Dito isso, às vezes vale a pena explorar os detalhes da análise aqui. Então, se você tiver mais detalhes sobre a estrutura HTML da postagem do WP, compartilhe e eu investigarei mais :slight_smile:

Eu tive um problema semelhante neste post do Discourse, criado pelo plugin de polling RSS (não o plugin do WordPress):

O ™ na primeira linha era na verdade uma tag HTML <img>, e o plugin RSS a trouxe corretamente. No entanto, o post foi quebrado quando o Discourse executou a etapa de “baixar cópias locais das imagens”:

1 curtida

Parece que o problema do @mattdm foi o mesmo:

2 curtidas

@simonk Obrigado por essa investigação útil. Ambos podem resolver o problema inserindo seus domínios do WP na configuração do site domínios de download de imagem desabilitados.

Se você deseja se aprofundar no problema, ou seja, tentar lidar com isso de forma automatizada, a diferença entre o caso de @mattdm e o seu aponta para a complexidade envolvida. Ele espera que o tratamento do navegador em relação aos elementos HTML <p> e <img> seja mantido na forma de uma quebra de linha no markdown, enquanto você espera quase (mas não exatamente) o oposto, ou seja, que a imagem ainda seja exibida em linha, com as mesmas dimensões do elemento <img> existente no HTML original.

Para mais informações sobre esse aspecto do problema, você pode ver as postagens existentes sobre o assunto, por exemplo:

2 curtidas

Obrigado @simonk — sim, é exatamente isso.

@angus, qual é a consequência disso? Nenhuma imagem ou as imagens vinculadas cruzadamente aos originais no site do WordPress?

Espero que todos concordemos que algo que faz o Discourse mostrar markdown bruto em vez de renderizá-lo não pode estar certo, especialmente quando esse markdown foi criado pelo plugin. Estou perdendo algo aqui?

As imagens serão hotlinked para as originais.

Desculpe, estou confuso. Achei que sua preocupação fosse com a quebra de linha? Você está dizendo que a versão publicada (ou seja, quando você está apenas lendo, não editando) contém markdown bruto, e isso é sua preocupação?

O plugin apenas envia o HTML bruto. O markdown é gerado quando a postagem é processada no Discourse.

Dê uma chance ao domínios de download de imagem desativados e veja como funciona.

Por causa da falta de uma quebra de linha, quando o Discourse exibe a página — para usuários, não editores —, em vez de mostrar as imagens onde aparece ![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png), você vê literalmente esse texto. É necessário que uma pessoa intervenha e edite a postagem assim que ela for publicada automaticamente, adicionando quebras de linha antes de cada instância de imagem para que elas realmente apareçam.

Posso fazer isso, mas eu preferiria que as imagens fossem baixadas — é um ótimo recurso caso o outro site esteja fora do ar, se o blog mudar, etc. E não estamos perto da capacidade do nosso hospedagem, então não me preocupo com o espaço.

Entendi, obrigado por esclarecer. Honestamente, é pouco provável que isso mude em breve pelos motivos discutidos no tópico que linkei acima. Por exemplo

O ponto principal para nós é manter a integridade do conteúdo, então a solução de nova linha provavelmente não será implementada.

O problema é que, se você tentasse corrigir automaticamente o problema que está descrevendo, isso poderia potencialmente criar outros problemas. A solução atual aqui é adicionar seu domínio do WordPress à configuração do site domínios de download de imagem desabilitados.

edit Fiz uma pequena proposta nessa direção, mas é especulativa, e reforço que a solução atual aqui é desabilitar o download de imagens para o seu domínio do WP.

Não estou entendendo realmente a questão fundamental aqui. Como a integridade do conteúdo está sendo mantida pelo comportamento atual? Claramente não está.

Parece que, se você vai substituir HTML por Markdown, substituí-lo por um Markdown que renderiza corretamente é… a única resposta certa.

Não é como se estivéssemos fazendo algo sofisticado no lado do WordPress — é apenas o editor de blocos normal e as pessoas adicionando imagens da maneira normal do WordPress.

Vou usar a configuração “desativar download de imagem” para ver se isso nos ajuda, mas eu realmente, realmente prefiro que isso simplesmente funcione.

Entendo seu ponto de vista, e não estou dizendo que isso não seria ideal, mas transformar um motor de discussões baseado em Markdown também em um motor de renderização HTML perfeito não é uma tarefa simples, mesmo que casos individuais pareçam superficialmente simples (ou seja, basta adicionar uma nova linha).

A capacidade de renderizar o HTML completo de uma postagem de blog no Discourse é um recurso agradável, mas no final das contas é apenas um recurso em um sistema focado em discussões formatadas em Markdown.

Se você acompanhar a discussão que linkuei, incluindo a postagem recente de David, verá que existem algumas possíveis abordagens que podemos seguir aqui. Uma pode dar certo e resolverá esse caso específico. Se houvesse uma solução mais fácil, eu certamente faria um PR no Discourse para resolvê-la.

Avise-me se tiver problemas com a desativação de downloads de imagens, e trabalharei com você para resolver isso também. Vou te avisar se encontrarmos um caminho viável do ponto de vista técnico.

2 curtidas

Obrigado! Agradeço muito!

Atualizei a configuração e vou relatar como funciona.