Escalado inesperado en el componente experimental PhotoSwipeLightbox rompiendo la proporción de la imagen original

UX
1

El nuevo PhotoSwipeLightbox experimental (siteSettings.experimental_lightbox) contiene errores cuando el enlace de la imagen existe en Discourse Solved o en el componente de carga en admin/config/logo. La causa raíz es que PhotoSwipeLightbox necesita el ancho y la altura de la imagen ya cargada, mientras que Discourse Solved y el componente de carga no tienen estos atributos.

Sin estos atributos, la imagen se estirará para llenar la ventana del navegador, causando distorsión, como se muestra en la figura adjunta.

Este commit agrega un mecanismo de precarga para imágenes sin dimensiones para obtener sus dimensiones, de modo que puedan mostrarse normalmente.

2 Me gusta
2

Gracias por informar y compartir una solución.

He añadido algunos comentarios/sugerencias en la PR, pero en general creo que necesitamos una solución alternativa como esta para capturar los casos extremos.

4

OK, gracias, echaré un vistazo a los comentarios cuando tenga tiempo.

  context "cuando faltan atributos de datos" do
    it "precarga imágenes y establece dimensiones" 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

Estoy agregando esto a lightbox_spec.rb como prueba unitaria para esas imágenes sin dimensiones, ¿parece correcto?

5

Además, he realizado algunas modificaciones en la lógica de discriminación para manejar aquellos con metadatos pero sin metadatos que no contengan información de tamaño. (es decir, el componente de carga)

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