Topic Cards

Theme component
,
1
:discourse2: Summary Topic Cards restyle the topic list to display as cards with a thumbnail
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository https://github.com/discourse/discourse-topic-cards
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:information_source: This theme component may cause conflicts with other customisations to the topic list

Features

This component takes inspiration from Topic Thumbnails, simplifies the use, adds excerpts & full-card clicking, and sprinkles some extra CSS magic.

  • Make full card clickable (except for the original poster avatar)
  • Show the excerpt
  • Show a topic thumbnail, if available
  • Show published date
  • Trim away some metadata and make likes more prominent

Desktop

image
image1920×1197 140 KB

Mobile

image
image848×1598 103 KB

Settings

Translation Default
published Published

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @chapoi 2024-06-18T00:42:14Z

Check documentPerform check on document:
32 Likes
2

The vertical blue line covers parts of the text

Screenshot_20240220_131259_Chrome
Screenshot_20240220_131259_Chrome1594×410 120 KB

(Seems not to depend on browser/device, I tried Edge/Windows, Chrome/Android and firefox/Android)

6 Likes
3

worked out of the box in chrome on windows and chrome at iphone 8

Unavngivet
Unavngivet1885×1081 289 KB

3 Likes
4

Right, forgot this. Will fix – thanks

4 Likes
5

how do I get rid of the “replies” and the “activity” tabs under the “+New Topic” button?
its making my topic exert really short and it looks bad haha

Screenshot_20-2-2024_163510_thepeople.nuuchahnulth.ca
Screenshot_20-2-2024_163510_thepeople.nuuchahnulth.ca861×116 10.2 KB

1 Like
7

Hi @jayme, it look like those tabs are not part of this component and are likely put there by another theme component or plugin. When I load a test forum with this component, those tabs don’t exist, nor do they show in the screenshots in the OP. You may have to disable other components to find which one, then if there is no setting for those tabs you may have to disable it.

5 Likes
8

Border/box-shadow doesn’t work well with cards, so had to improvise a bit to get a replacement indication

4 Likes
9

Somehow I don’t see any indicator now :thinking:
Theme_Creator_default
Theme_Creator_cards

2 Likes
10

Are you using the j/k commands to navigate?

11

No, I just used Tab. Well I actually used my tablet. After I used the back button, the post is usually highlighted. That didn’t happen here. I only tried this on the computer for the recording.

1 Like
12

4 posts were split to a new topic: Topic cards for specific categories

13

awesome theme component!

2 Likes
14

I tried to install this component on many themes, but it looks a little crooked everywhere. What am I doing wrong?

image
image950×547 137 KB

3 Likes
15

Hmmm… difficult to say. It looks like somehow the height of the cards is constrained, and the content bigger than usual.

Can you first verify it’s not due to a conflict with other components or theme? I see you also have the right sidebar enabled and that could affect some size calculations maybe.

So please check that and let me know?

4 Likes
16

I disabled all other components, but the problem did not solve.

image
image1441×779 110 KB

2 Likes
17

Odd! :confused: Can I have a look at the forum youve installed it on?

2 Likes
18

But you need to change the theme to dracula in your profile settings.

3 Likes
19

Thanks, Ill have a look!

1 Like
20

It seems to me that the problem can be solved by limiting the number of characters in the preview, but I don’t know how to do this

2 Likes
21

Okay so, the topic-cards need a max-height, otherwise you get issues like:

image
image1920×1556 105 KB

I can’t say why yours is not fitting well, because in the example on theme creator I can also uses multi-line titles and still fits:

image
image1946×694 143 KB

It might have something to do with the font-size, font-family, or line-height. Unfortunately that will require some individual tweaking, and not something I can apply a fix-for-all for.

A possible solution is, as you said, limiting the title to only take 1 line, which you could do by adding this css:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;
      
     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}
4 Likes