it doesn't appear to account for two primary tags being assigned, additionally kinda wish it showed up in themes - a bit like Colour Circles given it's a visual change.. not a big deal just like that Colour Circles did that.

2 months later

Could you please make a sample of how to make it show in mobile with css?

There are two entries in the forum.less file you need to delete where mobile is set to 'display: none.'

Then, you need to make the .cardContainer overflow-x: scroll, like so (keep in mind that I don't believe there is a .cardContainer entry, so you will have to create one):

.cardContainer{
    overflow-y:hidden;
      overflow-x:scroll;
    margin:0;
}
  
.cards-wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 1rem;
  padding: 2rem;
  margin: 0 auto;
  width: max-content;

 
}

.card {
  --bg-filter-opacity: 0.5;
  height: 7em;
  width: 18em;
  font-size: 1.5em;
  color: @primary-color;
  border-radius: 1em;
  padding: 3px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  transition: all,var(--transition-time);
  position: relative;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  text-decoration: none;
}

I have also amended the forum.js file to match the first img or iframe tag to display a gallery of the top posts (responsive to mobile):

8 days later

Something wierd happened.

It caused to reload and the page not come out untill refreshing. And it somehow effected the user directory. (I turned on the developer mode in chrome, it indicates to this extension. Then I turned it off and everthing returns to normal)

    Justoverclock
    Here!

    sw:57 Uncaught ReferenceError: fetchEvent is not defined
    at sw:57:18
    (anonymous) @ sw:57
    mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
    at AddCardsToHero.jss:55:47
    at Array.map (<anonymous>)
    at r.c.view (AddCardsToHero.jss:37:30)
    at Function.a (render.jss:30:16)
    at render.jss:482:45
    at p (render.jss:419:9)
    at f (render.jss:302:11)
    at render.jss:444:3
    at p (render.jss:415:16)
    at f (render.jss:302:11)
    a @ mount-redraw.jss:15
    (anonymous) @ mount-redraw.jss:25
    requestAnimationFrame (async)
    u @ mount-redraw.jss:23
    (anonymous) @ AddCardsToHero.jss:28
    Promise.then (async)
    c.oncreate @ AddCardsToHero.jss:25
    a @ render.jss:30
    (anonymous) @ render.jss:971
    a @ mount-redraw.jss:14
    m @ router.jss:114
    Promise.then (async)
    t @ router.jss:126
    E @ router.jss:95
    a @ render.jss:30
    (anonymous) @ render.jss:971
    mount @ mount-redraw.jss:45
    y @ router.jss:160
    e.mount @ Application.tsxx:300
    Mr.forEach.t.<computed> @ extend.tss:37
    n.mount @ ForumApplication.tss:108
    Mr.forEach.t.<computed> @ extend.tss:37
    e.boot @ Application.tsxx:271
    (anonymous) @ users:181
    mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
    at AddCardsToHero.jss:55:47
    at Array.map (<anonymous>)
    at r.c.view (AddCardsToHero.jss:37:30)
    at Function.a (render.jss:30:16)
    at render.jss:482:45
    at p (render.jss:419:9)
    at f (render.jss:302:11)
    at render.jss:444:3
    at p (render.jss:415:16)
    at f (render.jss:302:11)
    a @ mount-redraw.jss:15
    (anonymous) @ mount-redraw.jss:25
    requestAnimationFrame (async)
    u @ mount-redraw.jss:23
    (anonymous) @ User.tsxx:148
    load (async)
    n.calculateAvatarColor @ User.tsxx:134
    (anonymous) @ User.tsxx:93
    (anonymous) @ computed.tss:34
    n.color @ User.tsxx:98
    n.view @ UserCard.jss:30
    Mr.forEach.t.<computed> @ extend.tss:37
    Mr.forEach.t.<computed> @ extend.tss:37
    a @ render.jss:30
    (anonymous) @ render.jss:155
    (anonymous) @ render.jss:160
    c @ render.jss:66
    l @ render.jss:50
    (anonymous) @ render.jss:134
    c @ render.jss:63
    (anonymous) @ render.jss:162
    c @ render.jss:66
    l @ render.jss:50
    (anonymous) @ render.jss:134
    c @ render.jss:63
    l @ render.jss:50
    f @ render.jss:277
    (anonymous) @ render.jss:477
    p @ render.jss:416
    f @ render.jss:302
    (anonymous) @ render.jss:477
    p @ render.jss:416
    (anonymous) @ render.jss:488
    p @ render.jss:419
    f @ render.jss:302
    (anonymous) @ render.jss:477
    p @ render.jss:416
    f @ render.jss:302
    (anonymous) @ render.jss:477
    p @ render.jss:416
    f @ render.jss:302
    (anonymous) @ render.jss:477
    p @ render.jss:416
    f @ render.jss:302
    (anonymous) @ render.jss:477
    p @ render.jss:416
    (anonymous) @ render.jss:488
    p @ render.jss:419
    f @ render.jss:315
    (anonymous) @ render.jss:444
    p @ render.jss:415
    (anonymous) @ render.jss:488
    p @ render.jss:419
    f @ render.jss:302
    (anonymous) @ render.jss:964
    a @ mount-redraw.jss:14
    (anonymous) @ mount-redraw.jss:25
    requestAnimationFrame (async)
    u @ mount-redraw.jss:23
    e.clear @ UserDirectoryState.jss:49
    e.refresh @ UserDirectoryState.jss:73
    e.refreshParams @ UserDirectoryState.jss:66
    r.oninit @ UserDirectoryPage.jss:25
    a @ render.jss:30
    M @ render.jss:917
    (anonymous) @ render.jss:153
    (anonymous) @ render.jss:160
    c @ render.jss:66
    l @ render.jss:50
    (anonymous) @ render.jss:103
    c @ render.jss:62
    (anonymous) @ render.jss:487
    p @ render.jss:419
    f @ render.jss:302
    (anonymous) @ render.jss:964
    a @ mount-redraw.jss:14
    m @ router.jss:114
    Promise.then (async)
    t @ router.jss:126
    E @ router.jss:95
    a @ render.jss:30
    (anonymous) @ render.jss:971
    mount @ mount-redraw.jss:45
    y @ router.jss:160
    e.mount @ Application.tsxx:300
    Mr.forEach.t.<computed> @ extend.tss:37
    n.mount @ ForumApplication.tss:108
    Mr.forEach.t.<computed> @ extend.tss:37
    e.boot @ Application.tsxx:271
    (anonymous) @ users:181
    Show 25 more frames
    3sw:57 Uncaught ReferenceError: fetchEvent is not defined
    at sw:57:18
    (anonymous) @ sw:57!<

        Teddan This looks like an issue with Flarum PWA. Make sure you're using the latest version, I fixed this bug a few versions ago I think

          10 days later

          Hello, I changed the Tag of a Hot Card discussion, and the whole thing disappeared... I tried removing the extension and reinstalling, but after doing so the forum crashes and does not load any posts. Any idea why this is happening? I had to uninstall it completely to make the forum work again..

            girefko i need to see the error that u have...please describe well what u've done and the error that appear.

                Justoverclock

                First I installed https://discuss.flarum.org/d/24429-events-calendar-wip-help-wanted

                Then I changed the Tag of 2 posts that were in the "Popular Discussion Cards" area. I then deleted the entire Tag and then the whole thing disappeared and I stopped seeing any posts or popular cards

                The console:

                >!85sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                3sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                2mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                3sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                3sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                2sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                3sw:57 Uncaught ReferenceError: fetchEvent is not defined
                at sw:57:18
                2mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                4sw:57 Uncaught ReferenceError: fetchEvent is not defined
                >! at sw:57:18!<

                2 User messages

                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)
                a @ mount-redraw.jss:15
                (anonymous) @ mount-redraw.jss:25
                requestAnimationFrame (async)
                u @ mount-redraw.jss:23
                (anonymous) @ AddCardsToHero.jss:28
                Promise.then (async)
                c.oncreate @ AddCardsToHero.jss:25
                a @ render.jss:30
                (anonymous) @ render.jss:971
                a @ mount-redraw.jss:14
                m @ router.jss:114
                Promise.then (async)
                t @ router.jss:126
                E @ router.jss:95
                a @ render.jss:30
                (anonymous) @ render.jss:971
                mount @ mount-redraw.jss:45
                y @ router.jss:160
                e.mount @ Application.tsxx:300
                Mr.forEach.t.<computed> @ extend.tss:37
                n.mount @ ForumApplication.tss:108
                Mr.forEach.t.<computed> @ extend.tss:37
                e.boot @ Application.tsxx:271
                (anonymous) @ (index):243
                mount-redraw.jss:15 TypeError: t.firstPost(...).contentHtml is not a function
                at AddCardsToHero.jss:55:47
                at Array.map (<anonymous>)
                at r.c.view (AddCardsToHero.jss:37:30)
                at Function.a (render.jss:30:16)
                at render.jss:482:45
                at p (render.jss:419:9)
                at f (render.jss:302:11)
                at render.jss:444:3
                at p (render.jss:415:16)
                at f (render.jss:302:11)

                    10 days later

                    For deleted posts, shouldn't it pick the next popular discussion after reinstalling the extension?

                      a year later

                      Is this extension deprecated? Seems like the GitHub repo is gone. If so, is there an alternative to this?

                        MikeLundahl are you experiencing any error ?

                        The GitHub link in the first post seems to contain a typo. The Packagist project points to a valid GitHub repo.

                            So I tried it. Seems nice. Missing features I'm looking for include a thumbnail as well as only including the "hot/top" discussions from selected tags.

                            6 months later

                            Hello!

                            If anyone is interested in how the cards can be displayed on tablets and mobile phones so that they don't take up a lot of space, I wrote some very simple code.
                            I tried it on my phone and tablet and it works perfectly for me.
                            The point is that you can roll the cards sideways back there.

                            You just need to paste the code in the admin CSS section

                            .cards-wrapper {
    display: flex !important;
    margin-bottom: 0px !important;
}

.cardContainer {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
                            a year later

                            Justoverclock Thank you for providing the extension, it's very useful. Can you set the specified post separately