Image 1 of 5
Image 2 of 5
Image 3 of 5
Image 4 of 5
Image 5 of 5
Example
What does Lazy Summary plugin look like on a summary block? See for yourself.
A short video of the Lazy Summary plugin used on a summary block to extend the 30 item display limit.
While you're waiting for Squarespace raise Summaries limit, you may give a chance our Lazy Summaries plugin. Our Lazy Summaries plugin raises the limit on summary blocks from 30 to unlimited items. You will also get some additional features like showing alternative image on hover for Products, set different slides width for mobile etc.
So after purchasing you will get an instruction what you need to insert in Footer Injection or in Markup Block on page with targeted Summary.
Our PRO extension users may click Message Panel in extension window and find how to enable and use Lazy Summaries without any additional purchase.
After purchased Lazy Summaries plugin you should receive file named as Lazy Summaries - Footer Injections.txt. You need to paste its content to Footer injections, located at your-website.squarespace.com/config/settings/advanced/code-injection Footer region (or Settings -> Advanced -> Code Injection). Code in Advanced Collection settings or Code block/Markdown block will also work. After that you open any Summary block or creating new and seeing new options there - enable what you need in Summary Settings Dialog:
Lazy Summary Settings
Lazy Summary Additional Settings
Lazy Summary Sizes & Spacings
So settings titles talk themselves:
Enable Lazy Summaries - Activates lazy summaries;
Enable Session Storage cache - This will enable caching to sessionStorage and next time it will take items instantly from this cache. Session cache clearing on closing window or rerun browser only, so better use this for infrequently changing collections.
Load all or use Load more - if checked, it will request for all collection items (so it takes time for big collections) and append all items at once to Summary. If using Load more - it will add a button, clicking this button it will prepends items you've set in Number of items field.
Load more button text - if using Load more, here you may set the button text.
Enable Alternative image on hover - if enabled, it will look for galleries second image and prepend it to show on mouse over. Useful for products summaries when first image shows one color and hovering you're showing another one. Or if you have several renders (views) of your product, you may use this to change on hover.
Use separate settings for mobiles - if checked, shows additional range sliders where you may set columns width and gutter to use on screens less than 640px width. This way you may force to show 2 or 3 columns on devices (not 1 column as default does).
If using Load more button, notice it shows items count by default. We're using css pseudo element :after for this. And you may easy change the way it shows or even hide it. Here is the css snippet you may play with:
.sqs-block-summary-v2 .loadMoreButton:after { content: "("attr(data-items-left)")";/*attr data-items-left refreshing each time you click*/ }
Advance Settings
Can you customize Lazy Summaries?
Yes, Lazy Summaries plugin has a hooks system you can use for your own coding. This lets you seamlessly integrate your custom code to the Lazy Summaries code.
Here’s the list of the available hooks you can use:
<script>
window.customLazySummaries = {
general: { //runs for all summary blocks
startFunction: function(sum_block, jsonData) {
//runs just when summary started, you do not need return smth
},
startRenderFunction: function(sum_block, jsonData) {
//runs just when summary started/sorted and before request new items
},
startItemsFunction: function(item, jsonData) {
//runs for each existed(start) summary item
},
transformExternalDataFunction: function(data, jsonData) {
//collections json received and you may transform idata there
//need return transformed data json, jsonData is summary config object
},
jsonTransformFunction: function(items, jsonData) {
//collections json received and you may transform items json there
//need return transformed items json, jsonData is summary config object
},
renderItemDataFunction: function(item, jsonData) {
//you may do transformation on rendered summary-item node and return it,
// it also runs for existing summary items
},
afterRenderItemFunction: function(item, jsonData) {
//you may do transformation on rendered summary-item node and return it,
// it also runs for existing summary items
},
allItemsRenderedFunction: function(new_items, jsonData) {
//access all new loaded items there, you may transform and return them
},
portionItemsAddedFunction: function(sum_block, jsonData) {
//runs after portion of items appended to summary block
},
allItemsAddedFunction: function(sum_block, jsonData) {
//runs after all of loaded items appended to summary block
},
refreshFunction: function(sum_block, jsonData) {
//runs after refresh summary block (appending items, sorting..)
}
},
separate: [ //run for separate summaries, based on id attribute
{
id: 'block-yui_3_17_2_1_1579508745168_4942',
startFunction: function(sum_block, jsonData) {
console.log(sum_block);
},
//set summary ids there
afterRenderItemFunction: function(item, jsonData) {
console.log(item);
}
}
],
related: [{//used to build Related Summaries
container: '.collection-type-blog',
//remoteSummary: '/remote-summary',
placeTo: '.Main-content',
summarySettings: {
design: "autogrid",
imageAspectRatio: 1,
hideLoadMore: true,
textSize: "small",
metadataPosition: "above-title",
primaryMetadata: "cats",
secondaryMetadata: "none"
},
filter: {
tag: true,
category: false,
featured: false
}
}]
};
</script>
Frequently Asked Questions
-
Yes, you can use the Lazy Summary on multiple pages. It works simultaneously on multiple summary blocks in 1 page or across multiple pages.
-
No, Lazy Summary only works on summary blocks. It does not work on any other content block or pages.
-
No, the Lazy Summary does not work with the masonry layout, simple and basic grids only.
-
Copy the Lazy Summary installation code
Go to Code Injection > Footer Injection and paste the code.
Save.
After saving the code, lazy summary plugin will automatically setup.
You’ll know you successfully installed lazy summary when you find additional tabs in your Summary Block Settings.
What’s next?
Turn on Lazy Summary by toggling the button in the Lazy Settings tab.
Can’t see Lazy Summary settings?
Try re-opening the summary block settings to refresh the settings window.
If you still can’t see it, contact us and we’ll get it fixed.
-
The Lazy Summary plugin is not a subscription. You only need to pay once per website.
-
The installation code is emailed to you when you purchase Lazy Summary plugin. You’ll find it in the .txt file attached in the email.
If you haven’t received it or can’t find it, let us know and we’ll resend it to you.
-
Although we recommend pasting it in the Code Injection because content blocks are more susceptible to Squarespace changes, yes — Lazy Summary works on personal plan accounts.
Just paste the code on a Markdown block and it’ll work as good as pasting it in the Code Injection.
WARNINGS
Using Lazy Summary on Squarespace 7.0
DO NOT use the Auto option in the Aspect Ratio under Design settings if you’re using gallery page on Squarespace 7.0 for your video gallery and you want to display your videos on a summary block.
All Aspect Ratio options work except for Auto.
