업데이트 후 이상한 레이아웃

최신 버전의 Discourse로 업데이트할 때 문제를 경험하신 분이 계신가요? 제 카테고리 섬네일이 모두 왜곡되어 있습니다. 홈 페이지에만 커스터마이징을 적용했는데, 카테고리 페이지에서도 섬네일이 모두 비뚤어져 있습니다.
이를 어떻게 수정할 수 있을까요?

아무도 없나요?
Laugh Lol GIF by PG Tips

이미 수정하셨을 수도 있지만, 익명으로 접속해 보니 정상적으로 보입니다:

새로운 기능(다크/라이트 카테고리 로고)을 추가한 업데이트가 있어 일부 커스터마이징에 영향을 미쳤을 것 같아요. 아직 어떻게 수정해야 하는지에 대한 정확한 답변은 100% 확신할 수 없지만, 주변에 물어보고 있습니다. :+1:

(물론 @renato 님이 맞고 마법처럼 스스로 해결되었기를 바랍니다 :crossed_fingers:)

여기서 이미지는 Chrome에서는 @renato의 스크린샷처럼, Safari에서는 OP의 스크린샷처럼 보입니다. 분명히 회귀(regression) 문제인데, 죄송합니다. 커스터마이징은 없는 것 같지만, 카테고리 로고로 매우 큰 이미지를 사용하고 있습니다. 예를 들어 OP의 이미지는 2657x2657 크기입니다.

따라서 두 가지 해결 방법이 있습니다:

  1. 더 작은 이미지를 업로드하세요. 150x150 크기의 이미지를 사용해 보시면 잘 작동할 것입니다. (작은 이미지를 사용하면 페이지 로딩 속도도 빨라집니다.)
  2. 이미지를 다시 업로드하기 원치 않으시면, 테마 컴포넌트에 다음 CSS 규칙을 적용해 보세요:
body .category-logo.aspect-image {
  max-width: 150px;
}

네, 크롬에서는 괜찮아 보이는데 사파리에서는 그렇지 않아요. 왜 그런지 혹시 아이디어가 있을까요? max-width 수정도 시도해 봤는데 효과가 없었어요. 450px 정사각형의 더 작은 이미지로 업로드해 봐도 여전히 해결되지 않네요.

다음 코드로 시도해 보시겠어요?

@supports (--custom: property) {
  body .category-logo.aspect-image {
    max-width: 150px;
  }
}

절대 혼자만의 문제가 아닙니다. 다만 (완전한 초보자인) 저는 해결 방법이 뭔지 잘 모르겠어요. 이 해결책을 어디에, 어떻게 구현해야 하는지에 대해 좀 더 자세한 정보를 찾을 수 있는 곳이 있을까요? 감사합니다.

안녕하세요, @Richard 님. 환영합니다! :slightly_smiling_face:

작은 테마 컴포넌트를 만들어 테마에 연결하면 사이트에 추가 코드 스니펫을 추가할 수 있습니다:

  • /admin/customize/themes로 이동하세요.
  • 설치를 클릭한 다음 새로 만들기를 선택하세요.
  • 이름을 지정하고 ‘컴포넌트’를 선택하세요.
  • 만들기를 클릭하세요.
  • 테마에 추가하세요.
  • CSS/HTML 편집 버튼을 클릭하고 코드를 공용 탭에 붙여넣으세요.
  • 마지막으로 저장하세요. :+1:

이 문제에 대한 수정 사항이 몇 가지 추가된 것 같습니다. 업데이트 후 커스텀 코드를 제거할 수 있을 것입니다. :+1: