Featured Cards component

This theme component displays featured topics in a row of cards.

There’s various layout options for card dimensions and content in the component settings:

So you could easily achieve a different look depending on use case:

On mobile cards will show in one column:

There’s further options to adjust which topics should be featured and where the component should show.

:+1: Credits: The functional design is based on the Featured Tiles component. @Ahmed_Gagan extended functionality to allow more than one tag for featuring topics.

16 Likes

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

2 Likes

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

2 Likes

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? :thinking:

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?

2 Likes

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:

Screenshot from 2022-02-08 22-02-03

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.

1 Like

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… :sweat_smile:

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

2 Likes

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.

1 Like

Okay, that’s fair enough. :+1:

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.

1 Like

Okay I see… you just made me change my wording :wink: 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.

1 Like

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.

2 Likes

Hmmm, not really showing a thumbnail :frowning:

1 Like

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

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.

1 Like

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.

3 Likes