Filtered Topic Lists

Theme component
1
:information_source: Summary Allows creating custom topic list using filters. The lists then can be displayed in selected plugin outlet for selected pages.
:hammer_and_wrench: Repository https://github.com/gormus/discourse-filtered-topic-lists
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Allows creating custom topic lists using the topic filters. The lists then can be displayed on selected pages, in selected plugin-outlets.

You can create as many lists as you need, define their headings, how many topics should be listed, what filters should be used for the query, and above all what pages they should be displayed on, and where on those pages.

Edit preset settings
Edit preset settings1410×940 95.5 KB

Make sure to review the experimental topic list filter feature, and supported filters:

Settings

  • Title: An optional heading text; when provided it is displayed above the topic list.

  • Length: The number of topics to display.

  • Query: The query to filter the list

  • Plugin Outlet: The curated topic lists can be placed in following plugin outlets/regions:

    • below-site-header
    • above-main-container
    • before-topic-list
    • after-topic-list
    • topic-list-bottom
    • main-outlet-bottom
    • before-main-outlet

  • Show on: The page to display the list on.

    • everywhere: Display on every page, except the /admin pages.
    • homepage
    • top_menu: Check your top menu settings, for enabled pages.
    • categories: The /categories page.
    • latest: The /latest page.
    • top
    • new
    • unread
    • read
    • posted
    • bookmarks
    • hot
    • selected_categories:
    • selected_tags

  • Selected categories: When show on setting is set to selected_categories, the categories selected in this field are used. The topic list will be shown on these category pages only.

  • Selected tags: When show on setting is set to selected_tags, the tags selected in this field are used. The topic list will be shown on these tag pages only.

Plugin Outlets

All available plugin outlets are rendered with red dashed rule around them.

All available plugin outlets
All available plugin outlets1920×2623 227 KB

Inspiration

I was inspired by the Featured Lists theme-component. But at the end, I needed a less-opinionated, and more flexible solution for my project.

Make sure to check it out:

19 Likes
2

This is pretty cool

Does it use the same targetable classes so you can style your component?

Could you add a couple of samples of custom lists in a couple of outlets?

Thanks

1 Like
3

Yes, the filtered topic list tables use the same CSS classes as the main topic-list table. Additionally, there are wrapping DIV elements with classes which would help you customize the topic-list tables in any plugin-outlet.

Below you can see the hierarchy, and note that the .topic-list is the default identifier for the TABLE element. You can also target specific plugin-outlet to apply different styles if you need; see the second code block;

.filtered-topics-list {
    &__wrapper {
    }

    &__header {
        h2 {
        }
    }

    &__content.topic-list {
    }
}

.filtered-topics-list {
    &.below-site-header,
    &.above-main-container,
    &.before-topic-list,
    &.after-topic-list,
    &.topic-list-bottom,
    &.main-outlet-bottom,
    &.before-main-outlet {

        &__wrapper {
        }

        &__header {
            h2 {
            }
        }

        &__content.topic-list {
        }
    }
}

I don’t have a demo site to show you that, but I shared a screenshot displaying all available plugin-outlets with various filtered topic lists.

Please ignore the red dashed rules around them, I only added them to highlight tables, and the regions they are in.

2 Likes
4

I’m using /latest as the homepage. I added latest topics from specific categories to my homepage with this component, but I want to remove the standard and infinite scrolling Discourse’s latest topic component. I did this with CSS, but it’s affecting other pages as well. Is it possible to target latest topics component with CSS selectors only the homepage?

3 Likes
5

I believe you need to query the route and add a custom class using javascript. Here’s an example you could follow:

3 Likes
6

Found a bug (or expectded behaviour?):

setting Default List Filter: no subcategories in a category prevents any filtered topic lists to be displayed in any of the outlets.

Tested on latest stable 3.3.1.

3 Likes
7

Hi @jrgong could you share a screenshot of your preset?

2 Likes
8

Sent you a PM with my preset

9

One more question: What would be the best way to hide the core topic list when displaying the filtered list in a specific category?

The only way that I found via CSS, is to target the span tag, but it might trigger on different occasions:

span + table.topic-list.topic-thumbnails-grid {
  display: none;
}
10

Hi @jrgong I can confirm your findings.

Steps to reproduce:

  1. Create a category and subcategory. i.e Top Level Category and Top Level Category > Sub Category
  2. Edit Top Level Category settings (/c/top-level-category/edit/settings)
  3. Under Appearance, find the Default List Filter setting.
  4. Change the value from all topics to no subcategories
  5. Configure a new preset in Filtered Topics Lists component to list its content on those both top level and sub categories;
    1. Set Show on = selected_categories
    2. Set Selected categories = Top Level Category, Sub Category
    3. Set Plugin Outlet = (any)
  6. View each category pages

What is expected?

Both category pages to show the configured preset results on selected plugin outlet.

What is found?

  1. Any category with Default List Filter = no subcategories setting, doesn’t show the Filtered Topics Lists; whether it has any subcategories or not.
  2. However, if Show on = everywhere is set, the Filtered Topics List is displayed in selected outlet.

Similar issues:

2 Likes