Filtered Topic Lists

[gormus (Osman Gormus)]

	Summary	Allows creating custom topic list using filters. The lists then can be displayed in selected plugin outlet for selected pages.
	Repository	https://github.com/gormus/discourse-filtered-topic-lists
	Install Guide	How to install a theme or theme component
	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.

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

Experimental topics list filter feature

We have recently introduced an innovative /filter route, enabling more sophisticated filtering of the topics list. Significantly, this marks the initial step towards a unified topic filtering language for both search and filtering. Additionally, the dedicated route for topic list filtering enhances the customizability of the sidebar, as users can now incorporate links as custom section links within the sidebar. How to turn it on Enable the experimental_topics_filter site settings in the admin i…

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.

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:

Featured Lists

Summary Create and feature custom topic lists Preview Theme Creator Repository GitHub - nolosb/discourse-featured-lists: A Discourse theme component to feature custom topic lists. Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component The component lets you filter custom topic lists and showcase the…

[Heliosurge (Dan DeMontmorency)]

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

[gormus (Osman Gormus)]

@Heliosurge

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

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 {
        }
    }
}

@Heliosurge

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

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.

[bekircem]

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?

[nolo (Manuel)]

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

manuelkostka/discourse/helpers/css-classes/-/blob/main/javascripts/discourse/api-initializers/css-classes.js?ref_type=heads

[jrgong]

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.

[gormus (Osman Gormus)]

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

[jrgong]

Sent you a PM with my preset

[jrgong]

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;
}

[gormus (Osman Gormus)]

@jrgong

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

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:

Routing issue when adjusting topic list filters

There is currently a routing bug reproducible under fairly specific conditions: Prerequisites Category with a subcategory Default List Filter category setting should be “no subcategories” for the parent category Solved plugin installed show_filter_by_solved_status site setting enabled enable solved globally or at least for the involved categories Repro steps Change the solved/unsolved filter from the default of “all” to “solved” Change the subcategory filter from the default of “none”…

Events: If subcategories hidden, so is the events calendar

If you have an events_calendar_categories set in that category’s settings set Default List Filter to be no subcategories then the events calendar is not displayed. I discovered this when making a subcategory to house expired events (as an alternative to deleting them).