đŸ”„ Roast my Theme Component: Advanced Topic Cards

Development

AI-generated summary

jrgong introduced Advanced Topic Cards, a heavily rewritten theme component originally forked from the standard Topic Cards. The release adds granular display control, two layout options (list and grid) configurable per category and device, and a featured topics carousel on discovery routes. Additional features include subcategory layout inheritance, horizontal subcategory carousels, visual customization options (thumbnails, borders, fonts), richer card components (bylines, action buttons, inline tags), and compatibility with plugins like Calendar and User Portfolio.

jrgong acknowledged known issues, including redundant settings for thumbnails and card heights, lack of horizontal scrolling support on desktop, and unpolished action buttons. The community responded positively, with denvergeeks and RGJ praising the work.

RGJ provided critical feedback, noting that the component does not function on non-category discovery routes like /latest or tag pages, and that image alignment is inconsistent. RGJ also suggested splitting the carousel into a separate component and adding an option to exclude topics without images from the carousel.

jrgong responded to the feedback, agreeing that image alignment and text cutoffs need improvement and considering adding padding to the list layout. jrgong defended keeping the carousel within the same component to share CSS styles but agreed to implement the image exclusion feature.

In a later update, gilles pointed out that the code requires updates. jrgong admitted that the rapid pace of AI-assisted coding has made the project somewhat outdated. jrgong proposed potentially rebuilding the component from scratch to leverage newer Discourse slider components and ensure compatibility with the Horizon theme, rather than just patching the existing code.

1

Hey guys

Disclaimer: No AI was hurt in building this theme component :smiley:

Yes guys, I am guilty of shamelessly vibe-coding a rip off of the Topic Cards theme component. Hence a huge shoutout to the original authors and contributors for the great work!

While at first this was a fork, over 80% of the code and structure was completely rewritten. We added a ton of new features and on first glance all the various settings can be quite overwhelming.

Advanced Topic Cards - Preliminary Release

With our rewrite you get:

  • more granular control where topic cards are displayed
  • Two different topic card layouts
  • Featured Cards Carousel at top of Latest page

For a full list detailed scroll down below :down_arrow:

Feel free to test it, run it, copy it and roast it here in the thread! I am really excited about getting feedback on the result:

https://github.com/jrgong420/advanced-topic-cards

Known Issues:

  • Redundant TC settings: Some of the features regarding thumbnail and card height are redundant/not of value anymore
  • Desktop view lacks horizontal scrolling via touchpad/mousewheel (Embla provides a plugin for that, we haven’t had
  • Action Buttons are not as “polished”, need better visual rework

Summary of the improvements and features:

  • Per‑category, per‑device layouts
    Configure cards separately for desktop and mobile as list (image left, content right) or grid (image above, content below). You can choose exactly which categories use which layout on each platform.

  • Subcategory layout inheritance
    Optionally inherit card layouts from a parent category so you don’t have to configure every subcategory by hand.

  • Home page featured topics carousel (Embla)
    A featured topics carousel you can place on discovery routes (home/latest/top/categories), powered by Embla Carousel, with settings for slides per view, looping, alignment, drag behavior, and more.

  • Subcategory carousel on category pages
    Turn the subcategory list on a category page into a horizontal carousel, with controls for which parent categories and how many children are required before it shows.

  • Visual customization options

    • Thumbnail placeholders (Font Awesome icon) when a topic has no image

    • Card border radius presets

    • Card title font size choices (using Discourse’s font tokens)

    • Optional fixed card/grid heights and thumbnail size controls

  • Richer card components
    New card structure with:

    • Byline (OP avatar + username + optional publish date)

    • Action buttons (Details + Featured Link CTA)

    • Inline tags (category badge + tags inside the card body)

  • Compatible with other Theme Components/Plugins:

    • Calendar + Event Plugin: Display Event Date after Title
    • User Portfolio Theme Component: Display

  • Features planned:

    • More fine grained control for Featured Carousel: Additional plugin outlets, page routes, etc
    • Expand/Collapse Featured Topic Card Carousel (+ auto-expand based on new/unread topics)
2

Thank you so much for sharing - this is terrific!

3

Very nice!! Great work :+1:

Remarks:

  • Does not work on non-category discovery routes like /latest or tag selections without category.

  • The images don’t always align well

image
image916×1037 296 KB

even when there are no images

image
image1116×555 36.6 KB

  • The carousel is VERY nice but shouldn’t it be a separate component?

  • Would be nice to be able to exempt topics without a picture from the carousel.

4

Thx for the feedback!

Images look indeed whacky, same goes for the topic excerpt text being cut off

Would it be better from UX UI perspective to add padding around images in list layout?

That’s a fair point. Albeit my intention was to basically share same CSS styles for the carousel and regular topic cards.

:+1:

5

Hi, your code needs a little update :wink:

image

6

Hey @gilles, better late than never.

AI coding has accelerated too fast; it might even be better and cheaper to re-create it from scratch, especially since Discourse now comes with its own slider components that you can take advantage of.

But I will tackle that one soon and see how to make it a bit more future proof and re"prompt" the whole thing from scratch and make it Horizon theme compatible as well