Flarum Discussion Cards

License Latest Stable Version Total Downloads Donate here

A Flarum extension (Fork of @Dem13n's discussion-cards). Allows you to display discussions in the form of cards, the first image of the first post is used as a preview, if there are no images, a stub is displayed.

This fork adds new features where you can now set custom cards settings per tag page (different default image along with number and width of primary cards).
On the index page (all discussions), if a discussion has multiple tags with their own custom image set, the displayed image will be chosen according to these priority rules:

1. The image of the the highest positioned child primary tag of the highest positioned parent primary tag
2. The image of the highest positioned parent primary tag
3. The image of the secondary tag with the lowest id
4. The general default image

Also it changes how the setting to distinguish between read & unread discussion cards work: now the read discussions are filtred with a grayscale instead of the unread ones.

As of version 1.1.0 added support for v17development/flarum-blog extension. If activated, you can set to use the blog's extension images for blog posts' cards and/or their article summary as preview text on the cards.

Discussion Cards

Notes

  • Developed and tested on Flarum 1.8.7 then tested on 1.8.8.
  • Thanks to whomever suggested on Discord to use the tags selection component (sorry, we can no longer access the messages on Discord to mention them properly).
  • New settings page inspired by Friends of Flarum's Best Answer Extension.
  • Additional tags settings based on @askvortsov's Discussion Templates Extension.
  • Developped this with the help of AI (mainly ChatGPT, Cody & Gemini).

Installation

Install with composer:

composer require walsgit/flarum-discussion-cards

Updating

composer update walsgit/flarum-discussion-cards
php flarum migrate
php flarum cache:clear

Links

Thank you for taking the time to update this extension .
Is there a chance to make some code adjustments for the v17development/flarum-blog extension? I mean supporting the header image of the flarum-blog extension to appear in the discussion list.
Additionally, I did a quick installation test, and the site's response became very slow, so I turned it off for now and will look into the issue later.

    Subarist thank you for your feedback!

    Subarist Is there a chance to make some code adjustments for the v17development/flarum-blog extension? I mean supporting the header image of the flarum-blog extension to appear in the discussion list.

    I'm not familiar with this extension. I'll look into it as soon as I can, but no promises.

    Subarist Additionally, I did a quick installation test, and the site's response became very slow, so I turned it off for now and will look into the issue later.

    Thanks for looking into this when you can, I'm a noob to this and still learning, so any help I can get improving the code and/or performances is much appreciated.

          6 days later
          6 days later

          Hey! Great extension, thanks for picking it up. It really adds nice look and feel to Flarum's main page. I tried it on my test installation and here's a couple of suggestions if I may.

          First one, it's not always a great idea to make unread topic the only one with color image. A whole page full of b/w images could look not so nice. But it's still very important to see what topic has some unread posts. So it would be nice to add just a bit of default Flarum behavior here:

          I.e. make read topics with a thinner title and add number of answers at a more familiar place. Also it's very useful to see who and when answered in the topic. So it would be great to return the string "username replied X time ago" to the cards.

          If these are implemented I would be happy to use the extension on production site!

            Hello ;D I was a little confused at first because I couldn't make sense of the name. But the extension can be good for event applications.

            Thanks for your work ;D

            Very helpful extension to beautify my community

            How do I set the pictures?
            Does it come from user image?

              Arnold thank you for your feedback and suggestions! Yes I don't like the black and white much either, but I still kept it because it wasn't my priority (I just switched the B&W to the read discussions). I'll try to improve it as soon as I can.

              baolinh_vn Hi, it not work with repost extension 😃

              Thank you for your feedback! I'm not familiar with that extension. I'll have to test it and see if something could be done.

              khavjhav How do I set the pictures?
              Does it come from user image?

              Thank you! The extension will automatically take the first image of a discussion (first post of discussion) as the card image and if it doesn't find an image it will use the image set by the admin in the settings of the extension (for a global default image) or in the settings of the tags (via tags extension, for a tag specific image).

                      I would like to translate it to my language. I didnt find the location.

                        YerliOyuncu919 The preferred way to do that is to contribute to the language pack (extension) of your language. You can find more info on the flarum translation project in this discussion: https://discuss.flarum.org/d/27519-the-flarum-language-project
                        They're using this site : https://weblate.rob006.net
                        and if I'm not mistaken, you can contribute for the extension's translation here : https://weblate.rob006.net/projects/flarum/walsgit-discussion-cards/

                          Please help how can I solve the look of many tags below or right side at image to see all tags with line breaking in such a way when the tag name is containing space should be displayed in one piece, there should be no line break due to the space between the words.
                          It need to somehow convert the space characters to non breaking spaces in the name of the given tag name.
                          I tried to modify in the file "vendor/walsgit/flarum-discussion-cards/less/forum.less" at .cardTags to:
                          white-space: normal;
                          overflow: visible;
                          but it still breaks the tag names that contain space characters.

                          Feature request:
                          Support for pagination, show the pagination blocks instead of the default Load More button, if Pagination extension (e.g. https://flarum.org/extension/foskym/flarum-pagination) is enabled and the pagination mode is enabled globally or in user profile.

                          Anyway big thanks for this extension. I've been looking for this kind of theme modding for a long time, the discussion list looks much better with pictures.

                            10 days later

                            1.2.0

                            Added

                            • NEW option to show the number of replies on the right side of a card's title (like the default Flarum design) instead of on the image. (Arnold)
                            • NEW option to show the last post informations on the cards (like the default Flarum design): username & date of last post. (Arnold)
                            • NEW FEATURE: support for shebaoting/repost extension. (baolinh_vn)
                            • New migration file for the aforementioned new options & features.
                            • Post image search function now detects images in posts set via inline styles property background: url(...) or background-image: url(), like for the thumbnails in YouTube video embeds.

                            Changed

                            • The way read cards are marked (removed B&W filter): now read cards' title and text have a lighter font weight (like the default Flarum discussion list behavior). (Arnold)
                            • When there are too many tags, not all of them where visible: now they will scroll horizontally when you hover on the cards' tag list on desktop and you can manually scroll them on mobile. (FavoredTunes)

                            Notes

                            • Cards where the title is too long (on two lines) and that show everything (full preview text, last post info...) will look a bit higher with white space under the image like in the capture of this post https://discuss.flarum.org/d/36343-flarum-discussion-cards/18. I hope to find a fix to this that wouldn't make me change a lot of stuff 😉.

                            FavoredTunes for the tags, as you can see, I opted for scrolling tags in stead of line breaks because it would break the cards (and it would take me too long to figure out how to adapt the whole card in that case). As for the Pagination extension support, I'm looking into it and trying to figure out how...

                                          Walid wow! Nice, thanks for the update! I'm going to try the new version right now 🙂

                                            Most of the options and modes are tested and I can say the extension is really gorgeous now! A lot of options for every taste in the admin area and very-very nice look at the forum's index. Great work, @Walid , thanks again!

                                            Just one little bug I'd like to note: when last post info and preview text are activated and there's a long title for the topic (more than one line), the card looks like this:

                                            It can be solved by increasing wrapImg height but I'm sure you'll find more elegant solution in the next update 🙂

                                              Arnold Thank You! and yes I noticed and forgot to mention it in my post.