Show less than 6 articles on Category.hbs template

@Erik - You can reduce the height of the Section blocks by adjusting the CSS for .section-tree h3

  line-height: 60px;

This will reduce the amount of scrolling to see all your sections...

@Erik - On line 880 on your CSS remove the .section-tree .section and add the following in its place.

.section-tree .section {
width: 296px;
height: 203px;
background: #525F6D;
/* display: block; */
margin-bottom: 25px;
margin-right: 25px;
overflow: hidden;
color: #00D287;
float: left;
font-weight: normal;
vertical-align:middle;
display: flex;
align-items: center;
justify-content: center;
}

Perfect. Thank you. Not sure what I did wrong, so I'll have to compare them later when I have time. But it looks good now.

@Erik - Glad everything is looking good and the last three lines is what I added especially the display: flex which allows the two item below it to work.  If you run into any other Help Center issues just let me know.  Best of luck.

If been using *Frank Perazelli's *javascript above (and now below) to suppress the "See all x articles" link text. In the last day or two it stopped working. Can anyone help troubleshoot what needs to be changed?

//  Limit Article List to display only 3 entries - NEW CODE

if (document.location.href.indexOf('section') == -1 ) {

  var categories = $('ul.article-list');

  for (var j = categories.length - 1; j >= 0; j--) {

    var articles = $(categories[j]).find('li');

    var articleCount = articles.length;

    var moreLink = $(categories[j]).siblings('.see-all-articles');

    var moreArticles = moreLink.text();

    if (moreArticles != "") {

      articleCount = moreArticles.replace("See all","");

      articleCount = +articleCount.replace("articles","");

      moreLink.hide(); }

     if ( articles.length > 3 ) {

      for (var k = 3; k < articles.length; k++ ) {

        $(articles[k]).hide(); } }

// change the heading title

      var articleCount = " (" + articleCount + ")";

      var catTitle = $(categories[j]).parent().find('h3 a').text();

       $(categories[j]).parent().find('h3 a').text(catTitle + articleCount);

}}

@Geoff - I've compared what is working on our site to the code above. The only difference is this:

// change the heading title

var catHeader = $(categories[j]).parent().find('h3 a');
var catTitle = $(catHeader).text();
var catHref = $(catHeader).attr('href');
$(catHeader).text(catTitle
//+ " (" + articleCount + ")"
);
if (articleCount > 3) {
var newSeeAllText = '<a class="see-all-articles" href="' + catHref + '">See all ' + articleCount + ' articles</a>';
var newSeeAll = $(categories[j]).append(newSeeAllText);
}
}}

See attached screen shot. If less than 3 articles, the "See all ..." does not appear.

Hope this helps.

@frank thanks! My site started working properly today without me changing anything, so something changed and reverted in Zendesk source I suppose.

@Wes thank for this tip! This works great for me on Category pages, but on the Home Page I am running into one problem. For the Categories with 6 or less articles this works as expected, but for categories with more than 6 articles the default See all... displays in addition to More...Sell all. Interestingly, the More...See all also displays incorrect number (basically does not go beyond 6). Hope the screenshot helps to see what I mean. Would be very grateful for any tips on fixing this. Thanks!

@Yahor,  There is alot of code on this thread so which code are you using.  

@Wes, the one in the article, not the comments.

Got the same as Yahor on our HC when setting length to 5 (if( articles.length <= 5). If I go for 6, then the nativeMore kicks in, leaving the customized one out but also section with exactly 6 articles. :( here is part of the code I have in the JS.

Thanks for any feedback as this is driving me mad.

if( document.location.href.indexOf('section') == -1 ) {

var categories = $('ul.article-list');

for (var j = categories.length - 1; j >= 0; j--) {

var articles = $(categories[j]).find('li'),

nativeMore = $(categories[j]).siblings('.see-all-articles');

if ( articles.length > 3 ) {

for (var k = 3; k < articles.length; k++ ) {

$(articles[k]).hide();

}

var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),

linkText = '';

if( articles.length <= 5 && nativeMore.length == 0 ) {

linkText += "See all sss" + articles.length + " articles";

}

$("<a class='moreTopics' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));

@Yahor & Nicolas - This tip wasn't really for the home page however can you just remove the below line.

$("<a class='moreTopics' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));

JS tab code:

if( document.location.href.indexOf('section') == -1 ) {

var categories = $('ul.article-list');

for (var j = categories.length - 1; j >= 0; j--) {

var articles = $(categories[j]).find('li'),

nativeMore = $(categories[j]).siblings('.see-all-articles');

//Change string for article list length

if ( articles.length > 5 ) {

for (var k = 5; k < articles.length; k++ ) {

$(articles[k]).hide();

}

var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),

linkText = '';

if( articles.length <= 6 && nativeMore.length == 0 ) {

linkText += "See all " + articles.length + " articles";

}

}

}

}

Hi Wes,

doing this solves the double "See all xx articles", but now I have a section that has 6 articles, shows 5 only and no link to access the left article.

My goal is overall to display 3 articles and a "See more" link, adjusting the article length to 3 max gives me the same result. An easy solution is to add another article so I go above the 6 articles native limit.

@Nicolas - Can you provide the link to your Help Center as I need to see the code.

https://support.elitesingles.com/hc/en-us 

FYI : I went with my back up plan : adding a 7th article to PREMIUM MEMBERSHIP section.

Hi folks,

I am too having problems with the See All x Articles link still showing on my home page too. It has been coming and going the last few weeks and now it is staying. 

Any chance someone can review my code to see what I can do? It is working fine on the Category page.

My JS:

$(document).ready(function() {

if (document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li');
var articleCount = articles.length;
var moreLink = $(categories[j]).siblings('.see-all-articles');
var moreArticles = moreLink.text();
if (moreArticles != "") {
articleCount = moreArticles.replace("See all","");
articleCount = +articleCount.replace("articles","");
moreLink.hide(); }
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();

}}

// change the heading title

var articleCount = " (" + articleCount + ")";
var catTitle = $(categories[j]).parent().find('h3 a').text();
$(categories[j]).parent().find('h3 a').text(catTitle + articleCount);

}}

I'm also having trouble with a double link after limiting our displayed articles to 3 and adding the More... link. Has anyone found a way to take out the default "See all...articles" link? The trouble I had with using that was it wouldn't show up for sections that had more than 3 articles but less than 6.

Here is my js:

$(document).ready(function() {

if( document.location.href.indexOf('section') == -1 ) {

var categories = $('ul.article-list');

for (var j = categories.length - 1; j >= 0; j--) {

var articles = $(categories[j]).find('li');

if ( articles.length > 3 ) {

for (var k = 3; k < articles.length; k++ ) {

$(articles[k]).hide();

}

var moreLink = $(categories[j]).parent().find('h3 a').attr('href');

$("<a href=" + moreLink + ">More...</a>").insertAfter($(categories[j]));

}

}

}

https://sureprep.zendesk.com/hc/en-us

This code works OK on my HC:

// Limit Article List to display only 3 entries
if (document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li');
var articleCount = articles.length;
var moreLink = $(categories[j]).siblings('.see-all-articles');
var moreArticles = moreLink.text();
if (moreArticles != "") {
articleCount = moreArticles.replace("See all","");
articleCount = +articleCount.replace("articles","");
moreLink.hide();
}
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
}

// change the heading title

var articleCount = " (" + articleCount + ")";
var catTitle = $(categories[j]).parent().find('h3 a').text();
$(categories[j]).parent().find('h3 a').text(catTitle + articleCount);
}}

Hope this solves your situation.

Thanks for the suggestion Frank, but nope. This is what I got when I tried:

For some reason the count caps out at 6, too.

@Everyone - I contacted Zendesk and they believe they have the issue fixed (something on the back-end).  I tested my original script and it seemed to work for me and didn't duplicate the links.  Could yall verify from your end.  Thanks!

I'm still getting duplicate links, but now they're side by side which is better.

@Greg - Since I can't get into your HelpCenter to look at the code please be sure you are using the default code from the top of this page.  Also please let me know what theme you are using and I will pass this to the Zendesk team to look at.  It seemed to fix it on my test site using the Wiry Merchant theme and using the original code.  To ensure no other code is interfering can you disable all other custom code.  Thanks in advance for your feedback

Thanks Wes. I switched back to the code at the top of this page and made sure our other js wasn't interfering, and that helped a little bit more (screenshot below). This might work in the meantime while they're looking into it. I'm using the Swiftest Elk theme and I've also started a ticket with Zendesk, #1173791 if they need reference. Really appreciate your help.

@Greg - that looks like its doing what is supposed to do.  What issues are you having as your screenshots looks correct.

Only that the ones with over 6 articles are still two separate links (although you almost can't tell now that they're side by side, both going to the correct url, and I've changed the Morelink's class to "see-all-articles" instead of the default "moreTopics" so they look the same). This basically works.

@Greg - Got ya and I recommend using the see-all-articles class.  I just updated my code above and added the class.  Most users prefer this class anyway.  I appreciate all your help and testing.  If you have any further issues just let me know.

I tried adding this as instructed, and am not seeing any change. Is it perhaps my custom theme getting in the way?

I am primarily trying to change the number of articles listed on the home page to 3. Sections can remain at 6, if possible. But in any event, they both look like 6 now.

https://explorelearning.zendesk.com

@Ed - I'm only seeing 3 articles listed on the Home Page so did you figure this out.  It looks correct from my end.

Wes, could we use the same code for sections per category if we swap out article-list for section-list, etc? We have a bunch of organization-specific sections that only admins can see that make certain categories exteeeennnnd on the home page. Would love to limit sections to 6 per category.

@Nancy - I've never tried to limit sections per category but I'm sure it can be done.  My code may need to be modified a little in order to do that but you can just plug my code in and test it out.