카테고리 목록 이미지 설정 방법 도움 요청

안녕하세요!

카테고리 목록에 카테고리 이미지를 최근 뷰에서 사용자 프로필 사진이 표시되는 방식과 유사하게 표시하고 싶습니다. Catégories - Discourse Meta.

크롬 인스펙트 모드에서 이것저것 시도해 보니 원하는 결과를 어느 정도 얻을 수 있었습니다.

이것이 CSS로 구현 가능한지, 아니면 HTML 템플릿을 수정해야 하는지 의견 주실 수 있을까요?

실제 웹사이트를 보고 싶으시다면 APF - Auberge du Pixel Fringant (apfcommu.ga)에서 확인하실 수 있습니다.

시간 내어 답변 주셔서 감사합니다 :slight_smile:

안녕하세요!

가능할 가능성이 매우 높다고 생각합니다. 크롬에서 실험을 해보면서 이미 방법을 찾으셨으니, 질문이 "수정을 어디에 적용해야 하나요?"라면 아래 링크에서 예시를 찾을 수 있습니다:

그리고 여기에도 더 많은 예시가 있습니다: Search results for 'category-list' - Discourse Meta

정말 그렇진 않아, HTML 요소를 이리저리 옮기는 방식으로 좀 편법을 썼거든.

예제에서는 카테고리 설명을 제거하고 설명을 이미지 자체에 직접 추가해서 동작하게 만들었어. 나는 그렇게 하고 싶진 않아.

아, 그렇군요. 실수했습니다 :sweat_smile:
CSS에는 정말 능숙하지 않아서 position : relative 방향으로 가는 것이 좋은지 확신이 서지 않습니다. 만약 HTML 구조를 변경하는 쪽으로 진행하신다면, 아래 내용이 더 유용할 것입니다:

그리고 https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs 파일이 있지만, discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub 파일에 몇 가지 변경 사항을 가하려면 플러그인이 필요할 가능성이 큽니다.

저도 사실 CSS를 잘 못합니다.

리소스 공유해 주셔서 감사합니다. 시간이 좀 더 나면 자세히 살펴볼게요.

아마 플러그인을 사용하는 방향으로 가야 할 것 같습니다..

이 새 컴포넌트를 사용하겠습니다:

CSS로 스타일링하기 위한 더 깔끔한 마크업을 제공합니다. 또한 데스크톱과 모바일에서 거의 동일한 클래스 선택자를 사용하여 동일한 외관을 유지할 수 있습니다.