Unerwartete Skalierung in experimenteller PhotoSwipeLightbox-Komponente bricht das Verhältnis des Originalbildes

UX
1

Das neue experimentelle PhotoSwipeLightbox (siteSettings.experimental_lightbox) enthält Fehler, wenn der Bildlink in Discourse Solved oder der Upload-Komponente in admin/config/logo vorhanden ist. Die Hauptursache ist, dass PhotoSwipeLightbox Breite und Höhe vom bereits geladenen Bild benötigt, während Discourse Solved und die Upload-Komponente diese Attribute nicht haben.

Ohne diese Attribute wird das Bild gestreckt, um das Browserfenster zu füllen, was zu Verzerrungen führt, wie in der beigefügten Abbildung gezeigt.

Dieser Commit fügt einen Vorlademechanismus für Bilder ohne Abmessungen hinzu, um deren Abmessungen zu ermitteln, damit sie normal angezeigt werden können.

2 „Gefällt mir“
2

Vielen Dank für die Meldung und die Bereitstellung einer Lösung.

Ich habe einige Kommentare/Vorschläge im PR hinzugefügt, aber insgesamt denke ich, dass wir einen solchen Fallback benötigen, um die Randfälle abzufangen.

4

OK, danke, ich werde entsprechend Einblick in die Kommentare werfen, sobald ich Zeit habe.

  context "when missing data attributes" do
    it "preloads images and sets 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

Ich füge dies als Unit-Test für Bilder ohne Abmessungen in die lightbox_spec.rb ein – scheint das in Ordnung zu sein?

5

Außerdem habe ich einige Änderungen an der Diskriminierungslogik vorgenommen, um diejenigen zu behandeln, die Metadaten haben, aber die Metadaten enthalten keine Größeninformationen. (d. h. die Upload-Komponente)

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