Dimensionamento inesperado no componente experimental PhotoSwipeLightbox quebrando a proporção da imagem original

Experiência do Usuário
1

O novo PhotoSwipeLightbox experimental (siteSettings.experimental_lightbox) contém bugs quando o link da imagem existe em Discourse Solved ou no componente de upload em admin/config/logo. A causa raiz é que PhotoSwipeLightbox precisa de largura e altura da imagem já carregada, enquanto Discourse Solved e o componente de upload não possuem esses atributos.

Sem esses atributos, a imagem será esticada para preencher a janela do navegador, causando distorção, como mostrado na figura anexa.

Este commit adiciona um mecanismo de pré-carregamento para imagens sem dimensões para obter suas dimensões, para que possam ser exibidas normalmente.

2 curtidas
2

Obrigado por relatar isso e compartilhar uma correção.

Adicionei alguns comentários/sugestões no PR, mas, no geral, acho que precisamos de um fallback como este para capturar os casos extremos.

4

OK, obrigado, vou analisar os comentários quando estiver livre.

  context "quando faltam atributos de dados" do
    it "pré-carrega imagens e define dimensões" do
      upload_1.update(width: 400, height: 300)
      post.update(
        cooked:
          "<p><a href=\"#{upload_1.url}\" class=\"lightbox\" data-download-href=\"#{upload_1.url}\">[image]</a></p>",
      )

      topic_page.visit_topic(topic)
      lightbox_link = find("#post_1 a.lightbox")
      expect(lightbox_link["data-target-width"]).to be_nil
      expect(lightbox_link["data-target-height"]).to be_nil
      lightbox_link.click

      expect(lightbox).to be_visible

      expect(lightbox_link["data-target-width"]).to eq(upload_1.width.to_s)
      expect(lightbox_link["data-target-height"]).to eq(upload_1.height.to_s)
    end
  end

Estou adicionando isso ao lightbox_spec.rb como um teste unitário para aquelas imagens sem dimensões, então isso parece estar correto?

5

Além disso, fiz algumas alterações na lógica de discriminação para lidar com aqueles que possuem metadados, mas os metadados falham em conter as informações de tamanho. (ou seja, o componente de upload)

const missingMetaData = !item
    .querySelector(".meta")
    ?.textContent.trim()
    .split(/x|×/)
    .every((v) => v && +v > 0);