Show less than 6 articles on Category.hbs template

Zendesk level: Beginner

Knowledge: Copy and Paste

Time Required: 5 minutes

Zendesk will automatically display 6 articles under each section in your Help Center.  For some six is too many and would like to show less especailly if they have alot of sections under each category.  To make things a little neater we can add some code to only show 3 articles at a time. 

 **Credit goes to Socorro Fernandez

The CSS Code does not seem to work for me on the Copenhagen Theme but I instead accessed the category_page.hbs template and added the following code to the bottom of the page:

<style>
.article-list li:nth-child(n+4) {
 display: none;
}
</style>

This will hide all but the first 3 articles in the article list of the category page. I chose to put this directly on the category page because if I put the main CSS page, it would also hide articles on the section_page.hbs which I do not want to happen.

For the issue of the see all articles link not displaying, locate the following code on your category_page.hbs:

{{#if more_articles}}
 <a href="{{url}}" class="see-all-articles">
 {{t 'show_all_articles' count=article_count}}
 </a>
{{/if}}
{{else}}

I found that the more_articles is a true or false value. It will become true if there are more than 6 articles. This is why you will not see the link with sections that have less than 7 articles.

If you don't mind having the link show up for all sections regardless of amount of articles, remove the bolded {{#if more_articles}} and {{/if}} from above. Results should look like this:

If you do not want the links to show up for anything less than 4, we need to define that we want these to show up for sections that have 4, 5 and 6 articles. Add the following bolded code after the{{/if}} but before the {{else}} as shown in the code above on the category_page.hbs template . The code will end up looking like this:

 {{#if more_articles}}
 <a href="{{url}}" class="see-all-articles">
 {{t 'show_all_articles' count=article_count}}
 </a>
 {{/if}}
 {{#is article_count 4}}
 <a href="{{url}}" class="see-all-articles">
 {{t 'show_all_articles' count=article_count}}
 </a>
 {{/is}}
 {{#is article_count 5}}
 <a href="{{url}}" class="see-all-articles">
 {{t 'show_all_articles' count=article_count}}
 </a>
 {{/is}}
 {{#is article_count 6}}
 <a href="{{url}}" class="see-all-articles">
 {{t 'show_all_articles' count=article_count}}
 </a>
 {{/is}}
 {{else}}

This makes my category page look like this:

A few different solutions here but I hope this helps!

Good luck!