Mise à l'échelle inattendue dans le composant expérimental PhotoSwipeLightbox rompant le ratio de l'image originale

UX
1

Le nouveau PhotoSwipeLightbox expérimental (siteSettings.experimental_lightbox) contient des bugs lorsque le lien de l’image se trouve dans Discourse Solved ou dans le composant de téléchargement dans admin/config/logo. La cause première est que PhotoSwipeLightbox a besoin de la largeur et de la hauteur de l’image déjà chargée, tandis que Discourse Solved et le composant de téléchargement n’ont pas ces attributs.

Sans ces attributs, l’image sera étirée pour remplir la fenêtre du navigateur, provoquant une distorsion, comme le montre la figure ci-jointe.

Ce commit ajoute un mécanisme de préchargement pour les images sans dimensions afin d’obtenir leurs dimensions, afin qu’elles puissent être affichées normalement.

2 « J'aime »
2

Merci d’avoir signalé ce problème et d’avoir partagé une solution.

J’ai ajouté quelques commentaires/suggestions sur la PR, mais dans l’ensemble, je pense que nous avons besoin d’une solution de repli comme celle-ci pour gérer les cas limites.

4

D’accord, merci. Je vais ajouter des commentaires pertinents dès que j’aurai du temps.

  context "lorsque les attributs de données sont manquants" do
    it "précharge les images et définit les dimensions" 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

Je vais ajouter cela au fichier lightbox_spec.rb en tant que test unitaire pour les images sans dimensions. Cela vous semble-t-il correct ?

5

De plus, j’ai apporté quelques modifications à la logique de discrimination pour gérer ceux qui ont des métadonnées mais dont les métadonnées échouent à contenir les informations de taille. (c’est-à-dire le composant de téléchargement)

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