How to bring in Latest topics when using category boxes

(Kyle Risi) #1

Hi Guys,

Our HR team have decided to go with category boxes instead of a category list as below.

However, they also would like the latest topics to appear at the bottom of the categories as seen in revoluts community page

I am struggling to work out how this can be done, either as an existing setting or with CSS,

any ideas?

Best Regards


(Evgeny) #2

Try to work with components

You can use: categories-and-latest-topics

In this mode, there is a connection and categories and recent topics.

<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>

<div class='column categories'>
  {{categories-only categories=categories}}

<div class='column'>
  {{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}


Next, you override: categories-only

<script type='text/x-handlebars' data-template-name='components/categories-only'>

   The contents of the file...


Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.

Options think very many.

Useful material

(Jeff Atwood) #3

Another option is to simply structure your category directly

(Evgeny) #4

Then just change the css, which is even easier. )

(Kyle Risi) #5

Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. :frowning_face:

(Jeff Atwood) #6

I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.

(Kris) #7

I’ve built this or something similar for a few sites at this point. If you put this in the </head> section of your theme it will put all the categories on top of your home page (and /latest assuming that it’s the same as your homepage)

Then all you’ll need is add the CSS to structure this layout however you want. This is a good introduction to using the API and Handlebars templates in general.

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;

  api.registerConnectorClass('below-site-header', 'custom-homepage', {
    setupComponent(args, component) {
      component.set('hostname', window.location.hostname);
      api.onPageChange((url, title) => {
        if (url == "/" || url == "/latest"){ 
          $('html').addClass('show-custom-homepage'); // Show homepage
          component.set('displayCustomHomepage', true);
            ajax("/site.json").then (function(result){ // Get list of categories
              categoryName = [];
            component.set('categoryName', categoryName);
        else { // Hide homepage
          component.set('displayCustomHomepage', false);

<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
  {{#if displayCustomHomepage}}
  <div class="custom-homepage-wrapper"> 

    <div class="wrap wrap-category-boxes">
      <div class="homepage-category-boxes">
        {{#each categoryName as |c|}}
        <a href="/c/{{c.slug}}" class="box">
          <div class="homepage-category-box">
            {{#if c.uploaded_logo}}
            <div class="category-image-wrapper">  
              <img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />               
            <h2>{{#if c.read_restricted}}<i class="fa fa-lock">&nbsp;</i>{{/if}}{{}}</h2>



It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!