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?

1 „Gefällt mir“
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);
1 „Gefällt mir“
6

Vielen Dank für Ihre Arbeit daran und für die Nachverfolgung der PR-Überprüfung. Ich habe dies nun zusammengeführt.

1 „Gefällt mir“
7

@davidb Es scheint, dass der letzte Commit an der Lightbox-Komponente einen Fehler enthält, der verhindert, dass die Komponente in Discourse gelöst und andere ähnliche Elemente gestartet werden.
Der Fehler könnte mit diesem Commit zusammenhängen
FIX: maintain extension when quoting images by SamSaffron · Pull Request #36240 · discourse/discourse · GitHub, Pull requests · discourse/discourse · GitHub
/36214. Ich bin mir da nicht ganz sicher.
Die Reproduktion kann hier jetzt durchgeführt werden.
Unexpected latest listing
Zum Beispiel durch Klicken auf [IMG_6085] aus dem Zitat oder der Discourse-gelöst-Komponente auf der angegebenen Seite.

1 „Gefällt mir“