카테고리 박스 이미지 정렬 문제

안녕하세요, Air 테마를 사용 중인데 정말 멋져 보입니다!

카테고리를 박스 형태로 설정해 두었습니다. 200 x 200px 크기의 이미지를 업로드하면 잘 맞지 않네요. 제 이미지를 오른쪽 박스와 같은 스타일로 보이게 하려면 어떤 CSS가 필요한지 잘 모르겠습니다. 오른쪽 박스처럼 색상이 가장자리까지 똑같이 채워지도록 하려면 어떻게 해야 할까요?

간단한 업데이트입니다. 업로드 화면에 이렇게 나와 있습니다. “권장 비율 1:1, 최소 크기 200px. 비워 두면 이미지가 표시되지 않습니다.” 이미 1000 x 1000으로 설정했는데도 변화가 없어서, 테마 작동 방식에 문제가 있는 것 같습니다. 이미지 박스 가장자리까지 이미지가 표시되지 않는 것 외에도, 이미지 뒤에 이전의 파란색 배경 일부가 보이기까지 합니다.

혹시 조언이나 아이디어가 있으신가요?

안녕하세요 – 이 계정은 호스팅된 트라이얼 환경인가요? 그렇다면, 아쉽게도 스타터 플랜에서는 CSS를 편집할 수 없습니다.

Hawk님, 안녕하세요.

답장 주셔서 감사합니다.

아니요, 저는 Air 테마를 새로 설치한 자체 호스팅 환경에서 사용하고 있습니다. 이미지 정렬 관련해서 테마에 문제가 있는 것 같습니다. 제가 한 일은 권장 비율로 파일을 업로드한 것뿐인데, 화면에 표시되는 결과는 위에서 보시는 것과 같습니다.

이미지가 업로드 전 플레이스홀더처럼 가장자리까지 가득 차게 표시되면 좋겠습니다. 그렇게는 아니더라도, 최소한 제 이미지 뒤에 파란색 플레이스홀더 잔여물이 보이면 안 됩니다.

CSS 코드를 어딘가에 추가해서 수정할 의향은 있지만, 어디에 어떤 코드를 넣어야 할지 정확히 모르겠습니다. 다만 말씀드린 것처럼, 업로드된 파일이 제대로 표시되지 않는 것이 테마의 문제일 수도 있다고 생각합니다.

부모 div에 margin-top: .5em가 적용되어 있어, 부모 요소와 자식 이미지가 아래로 이동합니다.

이 동작을 다음과 같이 오버라이드해 볼 수 있습니다:

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

다만, 이 문제는 공식적으로 수정되어야 한다고 생각합니다.

Coin-coin le Canapin님, 안녕하세요.

CSS 코드를 공유해 주셔서 감사합니다. 정확히 어디에 추가해야 하는지 잘 모르겠습니다. 온라인으로 검색해 보니 air 테마에 컴포넌트로 추가해야 하는 것 같습니다. 실제로 그렇게 시도해 보았지만 활성화해도 아무런 변화가 없었습니다. 아마 제가 잘못하고 있는 것 같습니다.

이 문제는 테마 차원에서 살펴봐야 한다고 생각합니다. 테마 페이지에 게시글을 올려서 수정이 가능한지 확인해 보겠습니다.

Hawk님,

이 게시물에 Air Theme 팀의 누군가를 태그해서 이 문제를 해결할 수 있는 방법이 있을까요?

이 게시물에서 다른 사용자가 언급한 CSS를 시도해 보았지만, 작동하지 않는 것 같습니다.

감사합니다.
Bec

Bec, 안녕하세요. 디자이너를 배정해서 확인해 보게 할 건데, 죄송하지만 이번 주말이라 구체적인 일정을 말씀드리기 어렵습니다.

걱정 마세요. 정말 감사합니다.

안녕하세요! 이 문제를 보고해 주셔서 감사합니다. 곧 확인해서 답변을 드릴거나 테마에 수정을 반영하겠습니다.

여기 수정안이 있습니다 → DEV: fix image size - Pull Request #49 - discourse/discourse-minimal-category-boxes - GitHub

에어 테마에 설치된 최신 카테고리 박스 테마 컴포넌트를 업데이트하면 문제가 해결될 것입니다.

감사합니다!

조던, 안녕!

정말 감사합니다. 네, 배경에 여전히 플레이스홀더가 보였던 문제가 해결되었습니다.

플레이스홀더처럼 이미지가 박스 가장자리까지 차오르게 하는 방법을 알려 주실 수 있을까요? 그렇게 하면 훨씬 더 깔끔해 보일 것 같고, 제 이미지를 업로드했을 때 플레이스홀더와 같은 모양이 나올 거라고 기대했거든요.

사용해야 하는 CSS가 있다면 어디에 넣어야 하나요? 이전에 추가해 본 CSS는 작동하지 않았는데, 테마에서 변경이 허용되지 않아서 그런 건지, 아니면 discourse를 처음 사용해 보는 제가 방법을 몰라서 그런 건지 확신이 서지 않습니다.

감사합니다
Bec

조던님,

상황 업데이트를 드리고자 연락드립니다.

3번째 카테고리 상자를 편집하던 중 기이한 일이 발생했는데, 갑자기 모든 이미지가 알아서 제자리에 배치되었습니다. 이제 모든 것이 정상적으로 보입니다.

도움 주셔서 다시 한번 감사합니다.

다시 한번 안녕하세요, Jordan.

사실 한 줄에 3개 미만의 카테고리가 있으면 문제가 됩니다. 한 줄에 3번째 이미지가 추가되면 이전 메시지에서 설명드린 대로 모든 것이 깔끔하게 정렬됩니다. 하지만 한 줄에 이미지가 2개뿐이면 이미지가 박스 안에 깔끔하게 배치되지 않고 정사각형으로 표시됩니다. 그래서 지금은 일부 이미지는 보기 좋게 보이고, 일부는 정사각형으로 보이는 상태입니다.