تغيير حجم غير متوقع في مكون PhotoSwipeLightbox التجريبي يكسر نسبة الصورة الأصلية

تجربة المستخدم
1

يحتوي PhotoSwipeLightbox التجريبي الجديد (siteSettings.experimental_lightbox) على أخطاء عندما يكون رابط الصورة موجودًا في Discourse Solved أو مكون التحميل في admin/config/logo. السبب الجذري هو أن PhotoSwipeLightbox يحتاج إلى العرض والارتفاع من الصورة التي تم تحميلها بالفعل، بينما لا يحتوي Discourse Solved ومكون التحميل على هذه السمات.

بدون هذه السمات، سيتم تمديد الصورة لملء نافذة المتصفح، مما يتسبب في تشويه، كما هو موضح في الشكل المرفق.

يضيف هذا الالتزام آلية تحميل مسبق للصور التي لا تحتوي على أبعاد للحصول على أبعادها، حتى يمكن عرضها بشكل طبيعي.

إعجابَين (2)
2

شكراً لك على الإبلاغ عن هذا ومشاركة الحل.

لقد أضفت بعض التعليقات/الاقتراحات على طلب السحب (PR) ولكن بشكل عام أعتقد أننا بحاجة إلى آلية احتياطية كهذه للتعامل مع الحالات الاستثنائية.

4

حسنًا، شكرًا، سأقوم بإلقاء نظرة على التعليقات عند توافري.

  context "عندما تفتقد سمات البيانات" do
    it "يقوم بتحميل الصور مسبقًا ويضبط الأبعاد" 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

أنا أضيف هذا إلى lightbox_spec.rb كاختبار وحدة لتلك الصور التي لا تحتوي على أبعاد، هل يبدو هذا جيدًا؟

5

بالإضافة إلى ذلك، لقد أجريت بعض التعديلات على منطق التمييز، للتعامل مع تلك التي تحتوي على بيانات وصفية ولكن البيانات الوصفية لا تحتوي على معلومات الحجم. (أي، مكون التحميل)

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