Thx for the update! 
WIth some CSS hacks I moved the avatar as a layover over the thumbnail in card mode:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
How can I reduce the height of the (purple) topic author div to 0 and effectively remove the gap while still displaying the avatar?
If you’re writing custom CSS, then rather than adding code that overwrites one of the pre-set layouts, I’d actually recommend you pick None as layout option in the theme settings and declare your styles from scratch.
For example, you could copy the default Cards stylesheet and declare the featured-topics__topic-details container as a grid. Then you can position it’s elements exactly as you like, rather than moving them around with absolute declarations.
That’s a great idea!
For now, we are happy with the template and just a few little CSS tweaks to initially test it. Once we get to CTR optimization phase, we will probably follow your advice. 
Not sure if this is expected behavior or if it could be considered a bug:
When three topics are set in the settings, but only two are displayed, a gap appears where the third topic should be. It would be ideal if the cards were resized to fill the entire width in such cases.
If anyone is interested in using horizontal scroll on mobile, here some CSS that “I” came up with (with the help of AI). It also includes some scroll snap and size adjustments that I found more suitable for our use case.
PS: I also tried to make some navigation pills without adding HTML, but that definitely was a stretch.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* Side padding for neighboring card visibility */
gap: 1rem; /* Consistent spacing between cards */
overscroll-behavior-x: contain; /* Prevent overscroll interference */
scroll-behavior: smooth; /* Smooth scrolling */
scrollbar-width: none; /* Hide scrollbar */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* Hide scrollbar in WebKit browsers */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* Narrower cards for side visibility */
min-width: 280px; /* Minimum width for small screens */
scroll-snap-align: center; /* Center each card when scrolling */
height: unset !important; /* Consistent height */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
Hi, thanks a lot for this component, love it!
Can someone by chance help with adjusting the title size as it’s too big right now?
I got an error message saying this component needs updating for compatibility with upcoming Discourse core changes. Does anyone know if an update is planned?
I updated the component earlier this year. You need to re-install to use the new version, see: 
Featured Topics - #38 by manuel
Oh, thank you so much, it worked!
The only thing I cannot fix (I’ve been teasing Chat GPT for an hour I guess…) is the cards’ height — any tips how I can reduce/remove it?
Hi Manuel - is there a way to get your awesome Theme Component here to ignore images (so it just shows an excerpt instead)?
I’ve got quite a few featured topics without images (which I want to feature), but they look pretty bad next to the ones that contain images. Also, I’m more interested in the text than the images.
The component template renders a variety of content available on a topic. The final look is then adjusted with style rules. E.g. when you select “cards” as layout, topic excerpts are hidden when there is a featured image and shown whenever there is none:
If you always want to show the excerpt and never show an image, you can either select “none” for Layout and add your own stylesheet. Or overwrite the rules on the cards layout that show the image and hide the excerpt.
이것은 정말 훌륭한 컴포넌트인 것 같습니다!
솔직히 말하면, 이 컴포넌트가 하는 것과 똑같은 일을 하는 테마 컴포넌트를 만들려고 2~3일을 보냈습니다. 많은 것을 배울 수 있었기 때문에 그 시간이 낭비되었다고 느끼지는 않지만, ask.discourse의 조언을 더 일찍 듣고 이 컴포넌트를 확인해 보았더라면 좋았을 것 같다는 생각은 듭니다.
아직도 해결하지 못한 문제가 하나 있습니다.
카드 레이아웃을 좋아하지만, 카드 레이아웃에 썸네일과 발췌문(excerpt)을 함께 표시하고 싶습니다. 힌트가 있다면 감사하겠습니다.
대신 현재는 리스트 레이아웃을 사용하고 있지만, 몇 가지를 변경하고 싶었습니다. 저는 그것들을 common.css 탭에 추가했습니다. 다른 분들에게 도움이 될 수도 있을 것 같습니다.
토픽 태그를 제거하려면
.featured-topics__topic-tag {
display: none;
}
저자 아바타를 제거하려면
.featured-topics__wrapper .topic-author {
display: none;
}
카테고리 링크를 제거하려면
.featured-topics__wrapper .category-link {
display: none;
}
수정하여 추가할 내용:
위 원본 게시글은 그대로 두되, 추가하고 싶은 내용이 있습니다.
카드 뷰에서 발췌문이 표시되도록 만드는 방법
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
또한, 데스크톱에서는 카드 레이아웃보다 리스트 뷰 레이아웃이 더 마음에 들지만, 모바일에서는 보기 흉합니다. 썸네일이 왼쪽에 있고, 제목과 발췌문이 오른쪽의 좁은 열에 배치되어 있습니다. 텍스트가 썸네일 주위로 감기도록 하거나 모든 것을 단일 열로 쌓아 올리는 방법을 아직 찾지 못했습니다.
카드 레이아웃에서 썸네일과 발췌문이 표시되도록 하는 방법을 알아냈고, 이는 모바일에서도 꽤 괜찮게 보이므로, 대부분의 사용자가 휴대폰으로 사이트를 보고 있을 것으로 생각되어 해당 레이아웃으로 전환했습니다.
훌륭한 컴포넌트와 플러그인입니다. 수고해주셔서 감사합니다!
다만, F5 키를 눌러 전체 페이지를 새로고침하지 않는 한 콘텐츠가 갱신되지 않는 문제가 있는 것 같습니다.
예를 들어:
추천 태그가 있는 토픽을 생성한 후,
웹사이트 배너를 클릭하여 홈페이에 이동합니다.
해당 토픽은 ‘추천 토픽’ 섹션에 표시되어야 하지만, 실제로는 표시되지 않습니다.
F5 키로 페이지를 새로고침해야만 표시됩니다. 배너를 다시 클릭해도 여전히 표시되지 않습니다.
추천 게시물을 삭제할 때도 마찬가지입니다. F5 키로 페이지를 새로고침하거나 탭을 닫고 다시 열어야만 사라집니다.
이런 현상이 발생하는 이유가 무엇일지 혹시 아이디어가 있으신가요?
이는 의도된 동작입니다. 콘텐츠는 동적으로 업데이트되지 않으며, 페이지 로드 시점의 상태를 반영합니다. 일반적으로 이는 문제가 되지 않습니다. 왜냐하면 사이트를 새로 방문하는 사용자에게는 항상 최신 콘텐츠가 표시되므로요.
방금 이 컴포넌트를 살펴봤습니다. 우리의 몇 가지 요구 사항을 잘 충족시켜 줄 것 같습니다. 감사합니다. 테스트를 해보던 중, 파빌리온 드롭다운 헤더 컴포넌트와 충돌이 발생할 수 있음을 확인했습니다.
컴포넌트를 테스트하면서 미리보기(preview)를 사용했을 때 파빌리온 드롭다운 헤더가 사라지는 현상이 발생했습니다. 이는 알려진 문제인가요? 'Featured Topics’가 제공하는 강화된 뷰와 함께 드롭다운 메뉴를 유지하면서 이 문제를 해결할 방법이 있을까요?
안녕하세요 @manuel. 피드백을 남기는 곳이 아닌가요? 더 적절한 곳이 있다면 알려주세요.
안녕하세요 @TestingRico. 이 곳은 해당 컴포넌트에 대한 피드백을 남기는 올바른 장소입니다. 다만, 컴포넌트 자체에는 문제가 없는 것으로 보입니다. 구체적인 오류 메시지가 있으시면 확인해 드릴 수 있지만, 사용자의 사이트에서 실행 중인 다른 코드나 컴포넌트와의 호환성 문제는 디버깅해 드리기 어렵습니다.
Manuel, 안녕하세요 - 또 다른 훌륭한 컴포넌트네요!
각 이미지 우측 상단에 /tag/undefined로 연결되는 이상한 깨진 링크가 있는 것 같습니다. spokes.nz에서 이를 확인할 수 있습니다.
또한, 태그로 이동하는 “모든 추천 항목 보기” 링크를 추가하는 것에 대해 어떻게 생각하시는지 궁금합니다. (아니면 원래 의도가 그거였을까요?)
마지막으로, 커스텀 홈페이지 프레임워크의 유사 항목 블록 레이아웃을 정말 마음에 들어 합니다. 같은 줄에 더 컴팩트한 사용자 아이콘과 사용자 이름이 사용되는 방식이죠. 이 TC에도 이 방식이 잘 어울릴 것 같아 궁금합니다:
@nathank, 태그 버그를 수정하고 컴포넌트를 최신 패턴 및 도구로 전반적으로 업데이트했습니다.
이 컴포넌트는 여러 태그를 선택할 수 있기 때문에 “모두 보기” 링크를 추가하지 않았습니다.
