Ideally, I would like to have a custom setting enum field to select which categories are featured here. Is it possibly to have a custom setting field which allows you to search for categories?
I would also like to have a custom background image for these cards, in addition to the category background image. Is it possible to add another file input to the Images tab of the category settings modal? eg:
Consider using the TLP plugin as a start. There is already a Featured Images feature that points to Topics. You might be able to reuse some of the code.
Ideally, I would like for it to be like a fancy version of the ‘Category Box with Topics’ that also pulls in the category logo & background image, along with the latest topics in that category.
However, if this isn’t straightforward using the standard theme/plugin extension mechanisms, the juice may well not be worth the squeeze, in which case I will either do it statically, or use the category boxes homepage layout and style them as needed.
I think two key tests are:
Is there a standard way of surfacing a Select Category config item?
Is there a standard way of adding metadata fields to the category settings modal?
Alternatively, if I can just use category IDs in the config, but still be able to pull the data programatically, then that would probably be ok.
If, however, it’s not really feasible to get at the category data in that way, then I’ll use one of the other approaches.
You can do anything you want in a plugin (though it’s obviously best to employ strategies that minimise the risk of your plugin breaking after a core update). Sketch out your ideas, copy from existing plugins and discourse core and then start with a simple version and iterate.
I looked over this previous post by Kris and directly adapted it to something you may be able to use as a base. Much of what is covered here has been laid out by him in his original topic.
All of the code will be added to the </head>(head_tag.html) section of your theme.
This first section will check to see if the page you are on is the “home page”.
We will then get the sites categories using the Category.list() method on the category class.
We will then compare those to the categories you will want featured. These will be located in the definedFeaturedCategories array defined in the code below. The ones you allow will be set to the component to be passed along to a template for rendering.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// we will use the Category model to retrieve site categories
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container is the plugin outlet,
// featured-topics is your custom component name
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// on page change, check if url matches
// if your homepage isn't /latest change this to /categories
$('html').addClass('custom-featured-categories');
// add a class to the HTML tag for easy CSS targetting
let definedFeaturedCategories = ["uncategorized","blog","two"]
// array of categories you want to feature
// be sure to put the category titles in lowercase
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// only pushes categories you want to feature into the array to be rendered
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// If the page doesn't match the urls above, do this:
$('html').removeClass('custom-featured-categories');
// Remove our custom class
component.set('categories',[])
// set the categories to an empty array to disable rendering
}
});
}
});
</script>
This next section injects the template for the component created above into the plugin outlet above-main-container. It will call the custom categories-wrapper created in the third step and define categories to be featuredCategories created above.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- use the categories-wrapper template created below -->
<!-- define categories to be featuredCategories created in the script above -->
</div>
</script>
The third section creates the custom categories-wrapper handlebars template to render the featured categories. It is directly adapted from the Discourse categories-only.hbsused on Discourse’s categories page.
This should help you begin to do what you requested in your OP.
For styling the color of each category box according to its custom defined colors, in the third section, you can hard-code styles using # + c.color to access the categories color code.
Other than that, styling can be done in the common.scss file.
