Show less than 6 articles on Category.hbs template

165 Comments

  • Wes Drury
    Comment actions Permalink

    @Paul - Are you trying to do the same thing as David and just remove the underlined or would you just like for yours to just say ..More   Trying to see if I'm troubleshooting the exact same issue here or not.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Wes

    Just wanted to confirm that I am also using the Swift Elk theme.

    0
  • Wes Drury
    Comment actions Permalink

    You could do something similar to Janet and change the wording to match like:

    //Change wording of link "See all # of articles" to "click to see more"

    $('a.see-all-articles').text('Click to see more...');

    or you could hide some of it by applying:

    $('a.see-all-articles').hide();

    0
  • Paul Fennell
    Comment actions Permalink

    Thanks @Wes

    Great question- I'd like a single link, but I'm unsure on whether to use either "more" or "see all (X) articles", both have their merits.

    If I could customize it to say "More (X) that would be the best, if not I'd likely go with just "More".

    0
  • David Kavalsky
    Comment actions Permalink

    Thanks @Wes

    If possible, I would really like to keep the current wording but as one cohesive link. If I rename it, is there a way for me to dynamically call on the number of articles in the section?

    0
  • Janet Del Aguila
    Comment actions Permalink

    @David, I see exactly what you're describing. I too came across this issue and could not figure out how to turn the two links into one cohesive link. Plus, did you notice that the font size is different on the "More..." and "See all # articles". Again, I couldn't figure out how to make this all one single link. I decided to skip using this code snippet altogether - and just went with changing the default text using this sample provided to me by Wes:

     

    //Change wording of link "See all # of articles" to "click to see more"

    $('a.see-all-articles').text('Click to see more...');

    @Wes, I included a screenshot of the link issue that David described in his original comment. I had to zoom in so you could see that there is effectively two links.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Janet

    I did notice that but I was able to make an adjustment to the JS that Wes provided to keep them the same size. More specifically, the snippet Wes provided declares the link class as a "MoreTopics" class whereas the normal links use the "see-all-articles" class. By changing "moretopics" to "see-all-articles," the link styling becomes consistent.

    I'm also leaning toward just changing the text altogether but I really want to find a way to let users know how many articles are in that section.

    0
  • David Kavalsky
    Comment actions Permalink

    Hi @Wes and @Janet

    Just wanted to post a quick note that I found the culprit of this issue but fixing it seems to have caused another issue. Toward the end of the JS, there is this line of code...

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

    This line of code seems to mostly only apply if you have more than 6 articles in a given section. The problem is that it closes the link for the word "More..." and then the .insertAfter($(categories[j])); code adds the "See all # articles" text. So basically, the closing </a> causes "More..." and "See all # articles" to be treated as two separate links because one link closes and the other then opens.

    So removing that closing </a> solves the problem while still showing only 3 articles per section but if you have 4-6 articles in the section, it actually no longer shows a link of any kind below the first three articles and I can't figure out why. I'm going to keep digging into this and will keep you guys posted but I feel like I'm getting closer.

    0
  • Wes Drury
    Comment actions Permalink

    @David - Thanks for the update and please keep digging as I've been too busy to even take a look.  If you can't solve it I promise I'll get to it and recommend some changes.

    0
  • David Kavalsky
    Comment actions Permalink

    Thanks!
    I actually may have jumped the gun a bit though. Looking at this further, "More..." is no longer rendering either so I might be back to square one but I know that the closing </a> is causing this behavior somehow. If the <a> tag were left open from "More..." through to the "See all" links, we should be good.

    0
  • Paul Fennell
    Comment actions Permalink

    Just checking in to see if someone has come up with a solution to this.

    I can't seem to hide the "See All" using  =>  $('a.see-all-articles').hide();

     

    0
  • Wes Drury
    Comment actions Permalink

    Give this a try:

    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";

    }

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

    }

    }

    }

    0
  • Wes Drury
    Comment actions Permalink

    Make sure your CSS looks like this:

    .see-all-articles { display: inline-block; font-size: 10px; margin-top: 10px; text-decoration: underline; }

    0
  • Paul Fennell
    Comment actions Permalink

    Wes- I will be naming my next kitten/puppy/baby in your honor. Thank you!

    0
  • Jennifer Rowe
    Comment actions Permalink

    Haha! Paul, I think a lot of people feel the same way about Wes. 

    "Wes" might become the #1 kitten/puppy/baby name of 2014!

    0
  • Wes Drury
    Comment actions Permalink

    @Paul - Glad we got you working and sorry for the delay in response as I was off helping other users.  Wes does sound like a good name but I'm just bias :-)  Enjoy and you know where to find me if you need anything else.

    0
  • Barbara Brady
    Comment actions Permalink

    I am trying to follow the instructions on this page, but in the Theme Editor, when I select the template for Category page, then select JS, the template selection reverts to "Select Template." Then, when I switch back to the Category page,  it reverts back to CSS. What is happening? Thanks.

     

    0
  • Wes Drury
    Comment actions Permalink

    @Barbara - All the code that I'm providing only goes into the JS tab.  To get this to work you do not have to do anything in the HTML-Category Page.  You should be able to copy and paste the code into the JS tab as instructed and hit "Preview".

    0
  • Frank Perazelli
    Comment actions Permalink

    @Wes - Several months ago we used a modification of your code to display the article count in parens following the Section name. In our code we used a split function which suddenly ceased working on 11/18/14. It was necessary to find a work around since Support could not locate the difficulty. I am listing both versions or our code for reference.

    //  Limit Article List to display only 3 entries - ORIGINAL 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 != "")     {

    /* THIS IS WHAT FAILED */
          var splitText = moreArticles.split(" ");
          articleCount = splitText[2];

    /* ------------------------------- */
          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);
        } }

     

    //  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);
    }}

    Support suggested we post this for others reference.

    Frank

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks for sharing, Frank!

    0
  • Erik Metzler
    Comment actions Permalink

    I'm trying to do something a bit more extreme then others, and can't see where. I want to completely hide the section tree and See more link. I ONLY want the section title so they can click on that to get to the article list.

     

    I found a way with the code above to hide the article list (but it's ugly to me) but I don't know how to hide the More link completely.

    0
  • Erik Metzler
    Comment actions Permalink

    Nevermind. I figure it out once I found another article that set off the lightbulb

       if( document.location.href.indexOf('section') == -1 ) {
          var categories = $('ul.article-list');
          $(categories).hide();
          var more = $('.see-all-articles');
          $(more).hide();

    }

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - Glad you were able to figure it out and thanks for posting your code as it will benefit others.

    0
  • Erik Metzler
    Comment actions Permalink

    Anytime. And I changed .hide() to .remove() for tidiness. But now I can't get the H3 header to center vertically. Any thoughts? I know it's more CSS than JS.

    Am I missing something on the backend of these sections aside from good ol' Vertical-Align:middle?

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - Can you provide a link to your Help Center so that I can see the code via the developer browser.

    0
  • Erik Metzler
    Comment actions Permalink

    http://support.nonprofiteasy.com/hc/en-us/ Though I haven't published my work yet, waiting to get things right.

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - It looks like the title are aligned so I don't see any issues at this point.

    0
  • Erik Metzler
    Comment actions Permalink

    Horizontally yes, but not vertically. See below.


    This is for the Section titles, not the Category titles (which ware what I'm trying to duplicate)

    0
  • Wes Drury
    Comment actions Permalink

    @Erik - I got ya but I don't currently see that since you haven't published it as of yet.  When you get ready to publish it just let me know and I'll have a look.

    0
  • Erik Metzler
    Comment actions Permalink

    Try now.

    0

Please sign in to leave a comment.

Powered by Zendesk