Skip to main content

Limit amount of subteasers that show on home page teasers

1st addition that only targets if in the right order (teaser 2) 

Will need to change the selector to what nth child. It is currently set to the second teaser, and to limit to 4 list items. 

Add to advanced before </body>.

 

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select the specified element
    const element = document.querySelector('#page-content > div > section.poc-instances.poc-instances-main-content > div > div > article:nth-child(2) > div > aside > ul');

    // Check if the element exists
    if (element) {
        // Select all list items within the element
        const listItems = element.querySelectorAll('li');

        // Check if there are more than four list items
        if (listItems.length > 4) {
            // Loop through the list items and hide the excess
            for (let i = 4; i < listItems.length; i++) {
                listItems[i].style.display = 'none';
            }
        }
    }
});
</script>

Affect all teasers with image 

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select the specified element
    const element = document.querySelector('#page-content > div > section.poc-instances.poc-instances-main-content > div > div > article.poc-instance.clearfix.poc-type-page.has-no-date.has-image > div > aside > ul');

    // Check if the element exists
    if (element) {
        // Select all list items within the element
        const listItems = element.querySelectorAll('li');

        // Check if there are more than four list items
        if (listItems.length > 4) {
            // Loop through the list items and hide the excess
            for (let i = 4; i < listItems.length; i++) {
                listItems[i].style.display = 'none';
            }
        }
    }
});
</script>
 

Board meetings teaser limiter (add to HTML block ON THAT PAGE) 

<script>
document.addEventListener("DOMContentLoaded", function() {
    const subteaserThumbnails = document.querySelectorAll("aside.subteasers.subteaser-thumbnails");    subteaserThumbnails.forEach(list => {
        const listItems = list.querySelectorAll("div.subteaser");        if (listItems.length > 6) {
            for (let i = 6; i < listItems.length; i++) {
                listItems[i].style.display = "none";
            }
        }
    });
});
</script>

Limit subteasers on homescreen by teaser name (easy to update thanks to Tom) 

<script>
document.addEventListener("DOMContentLoaded", function() {
    function limitTeaserItems() {
        const articles = document.querySelectorAll(".items article");
        articles.forEach(article => {
            const header = article.querySelector("header h3 span");
            if (header && header.textContent.trim() === "News") { //PUT THE NAME OF THE TEASER HERE
                const subteasers = article.querySelectorAll(".subteasers .subteaser");
                if (subteasers.length > 4) { // IF SUBTEASERS EQUAL THIS NUMBER LONG
                    for (let i = 4; i < subteasers.length; i++) { // LIMIT TO THIS NUMBER LONG
                        subteasers[i].style.display = "none";
                    }
                }
            }
        });
    }    limitTeaserItems();
});
</script>

All on home screen (purgatory edition, put in advanced theme editor scripts section) 

//Limit homepage subteaser count
$(function() {
  function limitTeaserItems() {
    $(".items article").each(function() {
      var subteasers = $(this).find(".subteasers .subteaser");
      console.log("Number of subteasers:", subteasers.length);
      if (subteasers.length > 7) {
        subteasers.slice(7).hide();
      }
    });
  }
  limitTeaserItems();
});