Featured Topics

	Summary	Feature topics based on tags.
	Repository Link	Manuel Kostka / Discourse / Components / Featured Topics · GitLab
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

The image shows a grid of four prompts for image captioning, each with a different topic, such as fruits, art, microwave ovens, and children's interests. (Captioned by AI)1217×496 134 KB

Settings

Among other options, you can select multiple tags to feature topics and choose between two layout options: Cards or List.

Screenshot From 2025-02-19 13-08-09799×824 34.9 KB

Template

.featured-topics {
  &__wrapper {
  }
  &__container {
  }
  &__heading {
  }
  &__topic-wrapper {
  }
  &__topic-container {
  }
  &__topic-tag {
  }
  &__topic-thumbnail {
  }
  &__topic-details {
    .topic-author {
    }
    .topic-title {
    }
    .topic-excerpt {
    }
  }
}

I really like it! Maybe a dumb question, but where do the images have to be stored for it to pull them?

Thanks! The image is pulled from the first post of the topic.

Honestly, I would love a Theme component like this, but for trending topics (that kind of functionality would probably require a Plugin though).

Maybe it could be implemented much more easily once Discourse works on the “hot” category topic sorting option in version 2.9?

As for the option to show a tag in a featured card, how does it handle a topic with multiple tags? Do tags even show up on featured cards in the mobile view?

Card content is the same on mobile and desktop, just on mobile the cards wrap the content and don’t have a set height. If you have multiple featured tags on the same topic, cards will show the tag that is shown first on the default tag list. I believe this is by alphabetical order.

Regards trending topics, you can pick the list algorithm just as on the Featured Tiles component. Right now these algorithms include latest and various top selections:

How would trending be different from top-daily or top-weekly? In any case, when there’s a new sorting and filter algorithm in Discourse core, as the “hot” one mentioned, it should work on the component as well.

Well, it wouldn’t have to be limited to a certain time period. Trending topics could be from an hour ago, a day ago, a week ago, etc…

I wish I could articulate myself…

Also, is it possible to have multiple rows of featured cards?

This component is just showing one row of cards on desktop. And as many cards as you like in one column on mobile (there’s a maximum topic count setting).

Showing more rows on desktop is easily possible if you write custom CSS for the component. But that’s not a use case I will support with the component as such, as I believe it will need a custom layout anyways.

Okay, that’s fair enough.

I was looking to tie this Theme component in with a concept that’s being worked on.

Also, the “hot” category topic sorting option I mentioned earlier already (sort of) exists in the form of a #plugin:broken-plugin.

Okay I see… you just made me change my wording I’ve written feed twice, but I changed it to column. The goal of this component is to feature specific selected topics. I don’t doubt you could also make it work more like a dynamic feed. But if that’s your goal, I’d rather just style the existing list views to get there. You know, just use a component like Topic List Previews or Topic List Thumbnails and style the list items more like cards. Working directly on the lists is all integrated with navigational elements and filters on Discourse. You won’t get that with this component.

Yeah, true. I’m just trying to look at all the options I have at my disposal. This topic was posted just as I was browsing Discourse Meta, so it ended up catching my attention.

Screenshot Capture - 2022-02-08 - 20-19-101121×581 18.1 KB

Hmmm, not really showing a thumbnail

Hmm, I only get his look when I de-select all contents

Did you try different browsers? If it’s not a browser issue (and if it is, please let me know your setup) I could inspect the CSS on your site. But you’d need to share your url, here on on a pm.

Is this component still working?

Why shouldn’t it working anymore? It’s not marked as broken or something and it’s only 3 months old.

Loving this component, thank you so much!

What’d be great is, if you could have a “pinned” featured topic (i.e. the “Welcome to this Forum” topic), that is always shown, even if topics are randomly chosen from #featured. I think that would be really awesome, not just for my use case but also many others. Could that be implemented?

Help @manuel ?
I love this component! But I have a small problem.

On my admin account, I can see the cards great.

Untitled design (3)1188×490 142 KB

On my “regular” user account, I have dead space and the cards don’t show.

image1544×572 9.19 KB

Any assistance or suggestions would be helpful before I have to figure something else out

Looks like you use a tag that’s not visible to regular users?

You can hide tags from showing on the cards through the component settings. But the tag itself has to be visible to the group that should see the tagged topic as a featured card.

That fixed it.
I just edited my tag groups and thought I would hide that one so no one knew it was there but admin. Thank you!!

Thanks for the suggestion @diabolicvincent! Though I guess I won’t implement this as a feature. One reason is that (as mentioned on the credits), I didn’t program the logic of this component. It’s quite complex already for my taste and I don’t want to mess with it myself.

More generally, philosophically, conceptually… I actually believe it’s better ui design when official content is easily distinguishable from user-generated one. In that regard I’m already not a fan of pinning topics within an otherwise dynamic list of user topics.

Is there any way to auto show latest posts without using a tag? I don’t want to use a tag to manually push the posts to the featured section.

No, not directly. You can choose categories, but only to restrict the selection of topics. I wouldn’t want to add more logic to enable this option.

A workaround could be to auto-tag all new topics, using a wildcard:

Screenshot from 2022-07-18 10-12-121123×498 31.1 KB

Or use a different component. If you can explain the look that you want to achieve a bit more, maybe I can recommend one.

Thanks for your response.

Adding a specific tag for the component will be an added bloat in the long term if I ever decide to remove this component.

So, the best logic for the component would be to auto-pick the latest posts if no tag is specified.

In case I ever remove the component, I will have to look for all the threads using the “featured” tag and untag them all.

You can remove tags from topics very quickly by filtering by tag and using the Bulk Action options:

Untitled965×546 30.4 KB

I think it only grabs the ones visible on the screen, so I often scroll down to load them all before applying the bulk action.

Well, you can also just delete that tag and it’s gone

On a general note: The component is forked from the official Featured Tiles Component. The whole idea and motivation for me was to have a cards-look with the functionality that component offers. I don’t think I’ll add any more functional features over the original component. The reason is that with regards to code maintenance I want to be able to just follow the compatibility fixes of the official component.

In case anyone’s interested: We modified the featured cards component to allow users to scroll horizontally through all featured topics (topic source used: latest).

This is the CSS used:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Hide the scrollbar for MS Edge */
    scrollbar-width: none; /* Hide the scrollbar for Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Hide the scrollbar on Webkit based browsers (Chrome, Safari, etc) */
    -webkit-overflow-scrolling: touch; /* On touch screens the content continues to scroll for a while after finishing the scroll gesture */
}

Feature Request.

Can we have an Option to have this displayed on A Specific category page?

ie if viewing Lounge featured cards are shown here

Screenshots_2023-01-22-05-54-201080×2340 99.8 KB

the image shown is Category Image. I am using Air Theme. Application to show featured topics related to that category from it’s subcategory Frontier news.

what is recommended image size for Card image?

Great, but he doesn’t support on the FKB theme

How can I set the max characters for the title? I’m showing excerpt on the card and it over extends outside the box with the title and excerpt text.

There is no setting to control the max title characters. However, you can increase the cards height setting to fit the content.

If you don’t want to adjust every time, you can try this CSS in your theme or a component.
It removes the card height limit, and you have the following options:

• whether you prefer stretching the card
• the image max height.
• the max title lines
• the max excerpt lines

.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

Hope that helps!

Thanks, I actually had your defined height of 350 before posting but I just tried your code and appears to adjust the card size appropriately for titles with excerpts.

Digging out this one, this is genious! Is there any way to also enable it for smartphone view?

For some reason, the horizontal scrolling isn’t working anymore. has anyone been able to make it work on desktop and mobile?

Try something like that:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* Makes scrollbar tangible but invisible */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* Or displays it but thin */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* Ensures the scrollbar is right below the container instead of below the max height. */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

I’m not sure it’s a good idea to hide the scrollbar on a desktop; it can be frustrating to access it.

Thin and visible (also making the background transparent) look fine to me. What do you think?

That works on desktop now! But not on mobile. I already hacked together some CSS for mobile horizontal scroll, but it’s not really sophisticated

Also added font adjustment as the title font size was too big for the small screen size

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}

Is there any way to make the whole element collapsible and replicate the same behaviour as the Homepage Feature component?

"Is ‘Show excerpt is blank’ happening only to me?

I’ve updated this component and moved its repository to GitLab: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

The new version takes a slightly different design approach by removing select style options from the theme settings. Instead, it provides two basic layout arrangements (Cards and List) and a cleaner template for adding custom style declarations via CSS.

If you want to keep using the previous component it is available at GitHub - nolosb/discourse-featured-cards.

It’s a bit off-topic, but I think it’s a great approach. I have a hard time not providing a million settings in a component for the sake of customization when you should make things simple for the user but still offer a way to customize for advanced usage/users.

I haven’t done that on this component yet, but another approach I like is offering custom properties as the standard way to customize styles. E.g. like this, on Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

The image displays a table listing three custom properties for a banner style: "--extra-banners-background" as var(--secondary), "--extra-banners-color" as var(--primary), and "--extra-banners-padding" as 1rem 1.5rem. (Captioned by AI)773×228 19.2 KB

On the component, you can declare the style with a placeholder for the custom property, and a default stand-in value:

background: var(--extra-banners-background, var(--secondary));

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?

Screenshot 2025-02-19 at 20.55.50681×499 48.8 KB

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.

CleanShot 2025-02-20 at 13.49.38959×482 15.2 KB

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 nolo

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?

The image is a promotional graphic for ElfSight's 13-digit birthday contest offering 33% off, a new accessibility widget, and a chance to win a free year, with three colorful sections outlining these offers. (Captioned by AI)1473×468 101 KB

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:

image556×496 70 KB

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.

I think this is a great component!

I admit I had spent two or three days attempting to learn to create a theme component to do exactly what this component does. I don’t feel that was wasted time because I learned a lot but I do wish I had followed ask.discourse’s advice sooner and checked out this component.

One thing I can’t figure out

I like the card layout but would like to show a thumbnail and an excerpt in the card layout. Any clues would be appreciated

Instead I’ve landed on the list layout but wanted to change a few things. I’ve added them to my common.css tab. Maybe this will help someone else

to remove the topic tag

.featured-topics__topic-tag {
    display: none;
}

to remove the author avatar

.featured-topics__wrapper .topic-author {
    display: none;
}

to remove the category link

.featured-topics__wrapper .category-link {
    display: none;
}

Edit to add:

I’ll leave the original post above intact but I wanted to add

how to make excerpt show in card view

.featured-topics__topic-container.thumbnail .topic-excerpt {
    display: contents;
}

Also, I’ve come to like the list view layout on desktop better then the card layout but it looks horrible on mobile. The thumbnail is on the left and the title and except is in a narrow column on the right. I haven’t figured out how to make the text wrap around the thumbnail or stack everything in a single column.

Since I figured out how to get the thumbnail and excerpt to show in card layout which looks decent on mobile, I’ve switched to that layout because I suspect most users are viewing the site on a phone

This is a great component and plugin, thanks for you work!
However, there seems to be an issue with the contents not refreshing, unless I do a full page refresh, by pressing F5.
As an example:
I create a topic with the featured tag.
I go to the homepage by clicking on the website banner.
The topic should be under ‘Featured Topics’, but it’s not showing.
It only shows up, if I do a page refresh via the F5 key. Even if I click the banner again, it won’t show up.
Same thing if I delete a featured post. It will only go away, if I refresh the page via F5 or if I close the tab and open the page again.
Any ideas why this happens?

This is by design. The content isn’t dynamically updated, it reflects the state at page load. Typically it’s not an issue as the content will be up-to-date for any new visitor to the site.

Just started looking at this component. Looks like it may address some of our needs nicely. Thank you. While testing, I note there may be a collision with the pavilion dropdown header component.

When testing your component, while using preview, the pavilion dropdown header disappears. Is this a known issue? Any way to resolve and preserve the dropdown menus along with the enhanced view the ‘Featured Topics’ provides?