실험적 PhotoSwipeLightbox 컴포넌트에서 예상치 못한 스케일링으로 원본 이미지의 비율이 깨짐

기여 UX
1

새로운 실험적인 PhotoSwipeLightbox(siteSettings.experimental_lightbox)에는 이미지 링크가 Discourse Solved에 존재하거나 admin/config/logo의 업로드 컴포넌트 또는 렌더링된 [img] HTML 마크가 없는 다른 위치에 있을 때 버그가 있습니다.

근본 원인은 PhotoSwipeLightbox가 이미 로드된 이미지에서 너비와 높이를 가져와야 한다는 점인데, Discourse Solved와 업로드 컴포넌트에는 이러한 속성이 없기 때문입니다.

이러한 속성이 없으면 이미지는 브라우저 창을 가득 채우도록 늘어나 왜곡이 발생하며, 첨부된 그림에서 확인할 수 있습니다.

이 커밋은 치수가 없는 이미지에 대해 치수를 가져오기 위한 사전 로드(preload) 메커니즘을 추가하여, 이미지가 정상적으로 표시되도록 합니다.

2개의 좋아요
2

이 문제를 보고해 주시고 수정 방법을 공유해 주셔서 감사합니다.

PR에 몇 가지 코멘트와 제안을 남겼지만, 전반적으로 이러한 엣지 케이스를 포착하기 위해 이와 같은 폴백이 필요하다고 생각합니다.

4

네, 감사합니다. 시간이 나면 댓글에 맞게 인사이트를 정리해서 올리겠습니다.

  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")
      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에 차원이 없는 이미지에 대한 단위 테스트로 이 부분을 추가하려고 하는데, 괜찮을까요?

1개의 좋아요
5

또한, 메타는 있지만 메타에 크기 정보가 포함되지 않는 경우를 처리하기 위해 판별 로직을 일부 수정했습니다. (예: 업로드 컴포넌트)

const missingMetaData = !item
    .querySelector(".meta")
    ?.textContent.trim()
    .split(/x|×/)
    .every((v) => v && +v > 0);
1개의 좋아요
6

이 작업에 참여해 주시고 PR 리뷰 후속 조치를 진행해 주셔서 감사합니다. 이제 병합했습니다.

1개의 좋아요
7

@davidb 최근 lightbox 컴포넌트에 대한 커밋 중 하나에 버그가 있는 것 같습니다. 이 버그는 제 PR이 병합된 후 discourse solved 및 기타 항목에서 컴포넌트가 시작되지 못하게 하는 문제를 일으키고 있습니다.

이 문제는 다음 커밋과 관련이 있을 수 있습니다.

FEATURE: allow quoting an image from the lightbox - Pull Request #36156 - discourse/discourse - GitHub.

이 PR이 실제로 해당 문제를 일으키는지 확신은 없습니다.

재현 방법은 지금 여기서 바로 할 수 있습니다.

예를 들어, onebox 인용문에서 [IMG_6085]를 클릭하거나, 링크를 열어 해당 페이지의 discourse solved 컴포넌트에서 답변의 이미지를 클릭하는 경우입니다. 원래 동작은 라이트박스가 열리는 것이었지만, 지금은 아무 일도 일어나지 않습니다.

콘솔에는 다음 오류가 표시됩니다: Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

관련된 코드는 다음과 같습니다:

// this ensures that cropped images (eg: grid) do not cause jittering when closing
data.thumbCropped = true;

data.src = data.src || el.getAttribute("data-large-src");
-> data.origSrc = imgEl.getAttribute("data-orig-src");
data.title = el.title || imgEl.alt || imgEl.title;

아마도 코드를 다음과 같이 변경하면 해결될 수 있습니다:

data.origSrc = imgEl?.getAttribute("data-orig-src") || el.getAttribute("data-orig-src") || null;

data.base62SHA1 =
    imgEl?.getAttribute("data-base62-sha1") || el.getAttribute("data-base62-sha1") || null;

data.targetWidth =
    el.getAttribute("data-target-width") || imgEl?.getAttribute("width") || null;
data.targetHeight =
    el.getAttribute("data-target-height") || imgEl?.getAttribute("height") || null;

PR 수정이 여기에 적용되었습니다:

2개의 좋아요