'Older Posts' for Summary Block on 7.1 FE

Is it possible to add an 'Older Posts' button for the summary block? I think the max posts for a summary block is 30 but that's way too long. I'd prefer it to be 6 posts.

I think you need to use 3rd party plugin to achieve this.

On 9/7/2022 at 5:35 AM, MJohn said:

Is it possible to add an 'Older Posts' button for the summary block? I think the max posts for a summary block is 30 but that's way too long. I'd prefer it to be 6 posts.

I am trying to figure out how it works only in list summary block, I tried this with the grid one, but I really need specific thigs show, as date and author, not the excerpt or read more, maybe you can help me with this:

header

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<style>
.load-more-summary + .sqs-block-summary-v2 .summary-item:not(.active){
display: none;
}
.load-more-summary + .sqs-block-summary-v2 .summary-item img{
position:absolute;
top:0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
object-fit: cover;
}
.load-more-summary + .sqs-block-summary-v2 .sqs-block-button {
width: 100% !important;

}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var blogMetaTags = document.querySelector(".blog-meta-item--tags");
    var blogMetaWrapper = document.querySelector(".blog-item-meta-wrapper");
    blogMetaWrapper.appendChild(blogMetaTags);
});
</script>

FOOTER

<script>
  $(document).ready(function(){
    $('.sqs-block-code [data-resource]').each(function(){
      $(this).closest('.sqs-block-code').addClass('load-more-summary');
    })
    if($('[data-resource]').length > 0) {
      var resource = $('[data-resource]').attr('data-resource');
      var visiblePosts;
      var itemLength;
      var blogPosts = [];
      var jsonUrlOrigin = window.location.origin+'/'+resource+'?format=json-pretty';
      var jsonUrl = window.location.origin+'/'+resource+'?format=json-pretty';
      function ajaxRequests(url) {
        var promise = $.getJSON(url);
        promise.done(function(data){
          var items = data.items;
          if(items) {
            for (var i = 0; i < items.length; i++) {
              var blogPost = {};
              blogPost.title = items[i].title;
              blogPost.tags = items[i].tags;
              blogPost.categories = items[i].categories;
              blogPost.link = items[i].fullUrl;
              blogPost.metadata = items[i].metadata;
              blogPost.image = items[i].assetUrl;
              blogPosts.push(blogPost);
            }
            var lastItem = items[items.length - 1];
            var offset = lastItem.publishOn;
            jsonUrl = jsonUrlOrigin + '&offset=' + offset;
            theLoop()
          } else {
            var list = $('.sqs-block-code.load-more-summary + .sqs-block-summary-v2 .summary-item-list');
            var summaryStyle = list.find('.summary-item:first-child').attr('style')
            var summaryImgStyle = list.find('.summary-item:first-child .img-wrapper').attr('style')
            list.html('');
            for (var i = 0; i < blogPosts.length; i++) {
              if(i<=5) {
                var active = 'active';
              } else {
                var active = '';
              }
              $('<div data-type="image" style="'+summaryStyle+'" class="summary-item summary-item-record-type-text sqs-gallery-design-autogrid-slide summary-item-has-thumbnail summary-item-has-metadata summary-item-has-categories summary-item-has-tags summary-item-has-author '+active+'"><div class="summary-thumbnail-outer-container"> <a href="'+blogPosts[i].link+'" class="summary-thumbnail-container sqs-gallery-image-container"> <div class="summary-thumbnail img-wrapper" style="height:0;'+summaryImgStyle+'"><img class="summary-thumbnail-image" data-load="false" src="'+blogPosts[i].image+'"></div></a></div> <div class="summary-content sqs-gallery-meta-container"> <div class="summary-title"> <a href="'+blogPosts[i].link+'" class="summary-title-link">'+blogPosts[i].title+'</a> </div><div class="summary-metadata"> '+blogPosts[i].metadata+' </div></div>').appendTo(list);
            }
          }
          $('.sqs-block-code.load-more-summary + .sqs-block-summary-v2 .summary-item-list').each(function(){
            if ($(this).children().length > 6) {
              $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary"><a href="#load-more" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">Load More</a></div></div></div>').appendTo($(this));
            }
          })
          Squarespace.initializeSummaryV2Block(Y)
          Y.all('[data-load]').each(function(img) {
            img.removeAttribute('data-load');
            ImageLoader.load(img);
            img.addClass('loaded');
          });

        })
      }
      function theLoop(){
        ajaxRequests(jsonUrl);
      }
      ajaxRequests(jsonUrl);
      $(document).on('click','.summary-item-list .sqs-block-button-element', function(){
        var visiblePosts = $(this).closest('.summary-item-list').find('.summary-item.active').length;
        var itemLength = $(this).closest('.summary-item-list').find('.summary-item').length;
        if(visiblePosts != itemLength || visiblePosts < itemLength) {
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).fadeIn().addClass('active');
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().fadeIn().addClass('active');
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().fadeIn().addClass('active');
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().fadeIn().addClass('active');
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().next().fadeIn().addClass('active');
          $(this).closest('.summary-item-list').find('.summary-item').eq(visiblePosts).next().next().next().next().next().fadeIn().addClass('active');
          visiblePosts=visiblePosts+6;
          if(visiblePosts == itemLength || visiblePosts > itemLength) {
            $(this).hide();
          }
        } else {
          $(this).hide();
        }
      })
    }
  })
</script>

CODE INJECTION BEFOR THE SUMMARY BLOCK

<div data-resource="blog"></div>

ORIGINAL https://squase.net/how-to-add-load-more-button-to-squarespace-summary/

MY PAGE rudagt.squarespace.com