Show less than 6 articles on Category.hbs template

Hello everyone and thank you Wes for this post!

Im looking to edit the number of shown articles listed in the category page as well, but i want to make it so it shows 10 articles.

I found this post but that just ends with "leave feedback here"

Is there a way for me to configure the default number of articles listed to be more than 6?
To clearify; I'd like everything to be the way it is exept I'd want the list to show 10 articles by default instead of 6, any tips would be greatly appreciated!

Best regards, Filiph

@Filiph, you can use {{category_tree_with_article}} to achieve something like this. You can look for it in this comment trail.

Let me know if you need further assistance.

Team Diziana

Hi @Trapta and thank you so much for getting back to me! 

I know some basic coding but unfortunately im not a developer si I cant seem to find out how to use "{{category_tree_with_article}}". I know its a lot to ask - but is there any chance you'd be able to give me some sample code on how to achieve this and where i'd put that code? Any help at all on this would be very much appreciated!

Best regards, Filiph

@Filiph Petzäll, you need to edit the code and then put it in the home_page.hbs template.

Let me know if you need further assistance.

Team Diziana

@Wes, Hello Wes!

I am using Copenhagen theme and I am trying to get your code to work but I am running into an issue.

This is what I've done-
1. Added this to my section_page HTML-
<section class="section cat-page">

2. Added this to my CSS-
.cat-page .article-list li:nth-child(n+4) {
display: none;
}

The outcome is-
Original number of articles is listed (6) plus the link to see "all articles", and on the section page, I only see three articles.

If I use the following-

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

and remove the section class from section_page HTML (<section class="section cat-page">), I see only three articles listed, and the same on section page.

Any idea why this is not working for me?

Thanks for your help.

@wes, Never mind! :) 

@Liliana - Glad you got it all sorted out.

@Wes, 

You helped me some time ago and by using your code I got only 3 articles to show up on the category page as I wanted but I noticed that if a section does not have more than 6 articles in it then the show more articles link will not show on the category page. 

This section has a total of 5 articles and no link to show the rest. If I add 2 more test articles the show all link will appear. 

This section has 12 articles and the link is showing.

Any advice?

Hey Mike, 

Can you post a sample of the code you're using? It would help troubleshoot what might be going wrong.

Thanks!

Hi @Mike Tamosaitis,

Try putting the below code at the bottom of your category_page.hbs template:

<script>
  var seeAllTemplate = '<a href="URL" class="see-all-articles">COUNT</a>';

  $('.section-tree > section').each(function(idx, itm){
    var seeAllArticles = $(itm).find('.see-all-articles');
    var articlesList = $(itm).find('.article-list').children();

    if ( articlesList.length <= 6 && articlesList.length != 1 && seeAllArticles.length == 0) {
      $(itm).append(seeAllTemplate.replace('COUNT', 'See all '+ articlesList.length + ' articles'));
    }
  });
</script>

Let me know if you face any issue.

Team Diziana

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!

Thanks!

@Trapta 

While your option did work I did not like some of the results I got. So I tried to make some adjustments to it because categories with 1,2, or 3  articles had a link below them saying to "see all (number of articles) articles" and for some sections, the link appeared to be spaced too far away from the last article. Also when I pasted the code into where you said at the bottom the closing script line was showing as red which to my understanding meant it was missing something. Now maybe all of this was because of where I put it or because of the changes I made below. But I wasn't sure so I ended up using the code Socorro Fernandez provided.

I changed:

articlesList.length != 1

to

articlesList.length >=4

Thank you both for the help.

My see all articles isn't showing, and when I try to add the recommended code, I get an error message. Error message says else is not permitted in this context.

@Shay - there's a lot of code referenced in this article and in all the comments.  Which code are you exactly using and what are you trying to accomplish?