IceCommunityManager

Jennifer Rowe no problem I'd be happy to, if nothing else just to make my CS colleagues jealous when I come into work rocking a Zendesk t-shirt lol :p

Unfortunately, I'll not get the chance to do it until early next week though, but yeah if it helps somebody else then it's worthwhile.

Wes's code was great but I don't think it was ever intended for the home page and especially not on a home page with accordions. Wes has also been giving me some help on his Slack channel. That guy deserves a promotion ;)

Have a great weekend

ô¿ô

Hi Everybody, I wanted to post this here because I've been having lots of problems getting the "Show less than 6 articles in a section in Help Center" to work on my Help Center's Home Page with accordions and hopefully it'll stop anybody else having the same issues as me.

Issues experienced -

"See all # articles" not displayed

"See all # articles" URL undefined leading to 404 error page

"More...See all # articles" shown

"More..." and "See all # articles" shown as two separate URLs

"See all 6 articles" shown when there are more than 6 articles

For Home Page with Accordions.

JavaScript

// 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'),
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 <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("" + linkText + "").insertAfter($(categories[j]));
}
}
}

Home Page HTML (only the section html not all home page html)

{{name}}

{{#each articles}}

• 
  
  {{#if promoted}}
  
  {{/if}}
  {{title}}
  
  

{{/each}}

{{#if more_articles}}

{{t 'show_all_articles' count=article_count}}

{{/if}}

The difference in the above HTML is in line 2-3 where it has this by default:

{{name}}

Having the above (default) caused the "See all # articles" URL to become undefined. The problem was that the above JavaScript was targeting the tag held within the

tag, unfortunately it was the other way around with the

tag being held within the tag. So changing it to this stopped the URL being undefined.

{{name}}

Displaying "See all 6 articles" when there are more than 6 articles

To fix this issue you need to ensure that the bold section of the below Home Page Section HTML is present, if it's not then it will only display "See all 6 articles" regardless of how many articles above 6 you have.

{{name}}

{{#each articles}}

• 
  
  {{#if promoted}}
  
  {{/if}}
  {{title}}
  
  

{{/each}}

{{#if more_articles}}

{{t 'show_all_articles' count=article_count}}

{{/if}}

If you want "See all # articles" to also be a button then use this version:

{{#if more_articles}}

{{t 'show_all_articles' count=article_count}}

{{/if}}

Remove the "more..." and stop it being a separate URL than "See all # articles"

The JavaScript just need a little tweaking here as the original JS has this line added:

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

Simply change that line to this:

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

This removes the "More..." completely which, unsurprisingly, also stops there being two separate URLs.

Hopefully this'll stop others pulling there hair out in frustration, like I've been recently.

Enjoy ô¿ô

You need to add the code to the CSS tab not on each page. This will automatically add the background to all the pages on your site rather than you having to add the code to each page yourself.

Basically the code tells the site to place this image on each page between the opening < body > tag and closing tag. As every page has to have opening and closing body tags it's automatically applied to all pages for you.

Hope it helps

I tried setting a background image on our knowledge base but kept having an issue where the bottom of the background image was being cut off when there was very little content in the main body area of the category, section and article pages.

I spent a ages trying to find a fix for this and eventually I found the only thing that worked was adding min-height: 900px; to the body { style within the CSS (see images for examples)

Before

After

Hopefully this will stop others having to spend hours looking for the answer and experimenting.