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.

categories
categories.PNG1334×1043 54.9 KB

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

Revolut
Revolut.PNG1353×947 65.6 KB

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

any ideas?

Best Regards

Kyle

(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>

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

</script>

Next, you override: categories-only

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

   The contents of the file...

</script>

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

https://meta.discourse.org/c/howto

4 Likes
(Evgeny) #4

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

2 Likes
(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:

1 Like
(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.

2 Likes
(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 = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // Hide homepage
          $('html').removeClass('show-custom-homepage');
          component.set('displayCustomHomepage', false);
        }
      });
    }
  });
</script>


<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}}" />               
            </div>              
            {{/if}}
            <h2>{{#if c.read_restricted}}<i class="fa fa-lock">&nbsp;</i>{{/if}}{{c.name}}</h2>
            <p>{{c.description}}</p>
          </div>
        </a>
        {{/each}}
      </div>
      
    </div>
    
  </div> 
  {{/if}}

</script>
5 Likes
#9

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