이미지 미리보기가 잘립니다

어떤 이유인지 모르겠지만, Discourse 버전이 거의 동일한 두 포럼 중 한 곳에서만 이런 현상이 발생합니다.

최근 업데이트 이후로, 게시물에 이미지가 삽입되면 라이트박스(라이트박스) 썸네일에서 이미지의 양쪽이 잘립니다. 이미지 안에 텍스트가 있는 경우 내용을 읽기가 매우 어렵습니다.

이것이 의도된 동작처럼 보이지는 않으며, 실제로 Meta에서는 이런 문제가 발생하지 않습니다.

전체 이미지

@FroggyC 님, 안녕하세요 :slight_smile:

그렇다면 아마도 파일 설정 때문일 가능성이 높습니다. 예를 들어:

  • max image width (최대 이미지 너비): 게시물 내 이미지의 최대 섬네일 너비입니다. 너비가 더 큰 이미지는 크기 조절 및 라이트박스 처리가 적용됩니다.

  • max image height (최대 이미지 높이): 게시물 내 이미지의 최대 섬네일 높이입니다. 높이가 더 큰 이미지는 크기 조절 및 라이트박스 처리가 적용됩니다.

  • min ratio to crop (크롭할 최소 비율): 세로로 긴 이미지를 크롭하는 데 사용되는 비율입니다. 너비 / 높이의 계산 결과를 입력하십시오.


조금 서둘러 읽은 것 같습니다.

업데이트 이전에는 이미지가 정상적으로 표시되었나요?

마우스 오른쪽 버튼 클릭 → 새 탭에서 이미지 열기를 선택하면 이미지가 완전히 표시되나요?

설정 → 파일에서 기본값이 아닌 설정 항목이 있나요?

해당 설정들은 모두 기본값으로 설정되어 있습니다.

이미지를 열면 잘리지 않습니다.


새 인스턴스에서 사이트 백업을 복원해 보았지만, 문제 해결에 도움이 되지 않았습니다. 따라서 분명히 설정 문제인 것 같지만, 솔직히 무엇 때문인지 알지 못하겠습니다.

이 문제에 대한 해결책을 알고 계신 분 계신가요? 이 문제로 정말 진절머리가 납니다.

안전 모드에서 사이트를 방문하여 차이가 있는지 확인해 보세요.

이미지가 공개 게시물에 있다면, 여기에 링크를 공유해 주세요. 누군가가 무슨 일이 일어나고 있는지 파악할 수 있을지도 모릅니다.

안녕하세요 :waving_hand:

사이트를 확인해 봤는데, 섬네일(썸네일)에 영향을 미치는 사용자 지정 CSS나 기타 커스터마이징 설정은 없는 것 같습니다.

아래와 같은 사이트 설정 오류일 가능성이 높습니다:

하지만 당신은 이렇게 말씀하셨습니다:

참고로, 현재 min ratio to crop 설정의 기본값은 얼마인가요?


아마도 CDN 설정 오류일 수도 있습니다. 클라우드 기반 이미지 리사이저를 사용하여 이미지(섬네일)를 최적화하고 있다면 해당 가능성도 있습니다. 확률은 높지 않지만, 이 역시 가능한 원인 중 하나입니다.


또 다른 가능한 원인은 섬네일을 조작할 수 있는 플러그인입니다. Simon이 제안한 대로, 플러그인으로 인한 문제인지 확인하기 위해 안전 모드에서 새 이미지를 업로드해 볼 수도 있습니다. (다만 제가 확인한 바로는, 그러한 플러그인을 사용하지 않는 것 같습니다.) 만약 제가 착각한 것이고 이런 플러그인을 사용 중이라면, 관리자 화면에서 플러그인을 비활성화하는 것만으로는 충분하지 않을 수 있습니다. 이 경우 app.yml에서 해당 항목을 주석 처리(제거)한 후 다시 시도해야 합니다…

다만 주의할 점은: 이러한 섬네일은 게시글 내에서 해당 크기로 처리되고 자릅니다. 따라서 설정을 변경하더라도, 게시글을 다시 생성(rebake)하거나 파일을 수동으로 리사이즈하여 시스템이 새 파일로 인식하게 하지 않는 한 기존 섬네일에는 반영되지 않습니다. 새로 업로드된 이미지의 경우, 페이지를 새로고침하면 변경된 결과가 표시되어야 합니다.

안전 모드에서 사이트를 방문했는데 문제가 여전히 지속됩니다.

또한 동일한 app.yml을 가진 Discourse 설치 환경에서 다른 서버로 사이트를 복원한 뒤, 게시물을 다시 생성(rebake)하여 문제가 해결될지 테스트해 보았지만, 아무런 변화가 없었습니다.

0.22입니다. 이 문제가 없는 제가 관리하는 다른 포럼에서도 동일한 값으로 설정되어 있습니다.

제 CDN은 Amazon AWS의 기본 CDN이며, 이 문제가 없는 다른 사이트와 동일한 설정으로 사용 중입니다.

불행히도 썸네일과 상호작용하는 플러그인은 사용하지 않고 있습니다. 혹시 discourse-topic-previews-sidecar일까요?

AWS S3 버킷 내부를 확인해 보니, 이미지가 잘린 상태인 것이 최적화 버전이었습니다. 따라서 이미지 업로드 과정에서 발생하는某种의 버그인 것 같습니다.

다음 방법을 시도해 볼 수 있을까요:

  1. 원본 이미지를 약간 수정 (Discourse에서 이미 존재하는 이미지로 인식되지 않도록, 클립보드에서 붙여넣는 경우에도 실제로 그런지 확신은 없습니다),
  2. 안전 모드로 전환하고 모든 것을 비활성화
  3. 새 게시글을 작성
  4. 이미지를 붙여넣기/업로드
  5. 미리보기나 결과가 잘리는지 확인

:thinking:

이런 경우엔 모두가 문제를 정확히 파악하려고 애쓰다가 결국 다들 "아, 너무 뻔한 거였네"라고 말하는 거죠, 그렇죠?

season 3 facepalm GIF

마지막 업데이트를 올렸을 때 작성 중이신 걸 봤습니다. AWS 버킷에서 발견한 내용을 고려할 때, 그 단계들이 여전히 유용한가요?

네, 안전 모드에서 이미지를 다시 업로드하면(스크린샷으로 찍어서 약간 달랐습니다) 문제가 해결됩니다.

이것이 플러그인 때문이라는 뜻일까요?

사이드카 플러그인에는 일부 실험적 기능이 있는 것 같습니다.

이 설정을 비활성화할 수 있을까요?

그 설정은 아니지만, 바로 아래에 있는 설정이 활성화되어 있었습니다.

이를 비활성화하니 문제가 해결된 것 같습니다 (적어도 새로운 사진들에 대해서는).

이제 전체 사이트의 문제를 해결하기 위해 모든 최적화 버전을 다시 생성할 방법이 있을까요?

uploads:regenerate_missing_optimized rake 작업이 있는 것을 확인했는데, 제 이해가 맞다면 이는 누락된 최적화 버전만 다시 생성할 것 같습니다.

cd /var/discourse
./launcher enter app
rake posts:rebake

저는 마크다운에서 게시글 HTML만 다시 생성한다고 생각했습니다. 어쨌든 시도해 볼게요.

그래도 설정이 바뀌었으니 재생성되는 게 맞다고 봐요.

안타깝게도 게시물을 다시 베이킹(재처리)해도 최적화된 버전이 재생성되지 않았습니다.

버킷의 optimized/ 폴더를 이동하고 rake uploads:regenerate_missing_optimized를 실행해 보는 유혹이 듭니다. 모든 것이 망가지지 않을까 한번 해보겠습니다.

수정: 아, 하지만 그 태스크는 내부 저장소에서만 작동합니다. S3에서는 작동하지 않네요.

결국 문제의 이미지 수가 적어서 결국 모두 수동으로 다시 업로드했습니다. 그래서 문제는 해결되었지만, 가장 효율적인 방식은 아니었습니다.