Summary Block Filter

Squarepaste Summary Block Filter ©

View Demonstration

Go to Extras

1. Copy and paste the following text into Page Header Code Injection

Per-page Code Injection

<style type="text/css">

/* Squarepaste Summary Block Filter © */

.filters-button-group {display:inline-block;}

.filters-button-group button {background: none;outline: none;border: none;padding: 0;color: initial;}

.filters-button-group button.is-checked {opacity: 0.5;}

.summary-block-wrapper[class*="cats"] .summary-item, .summary-block-wrapper[class*="tags"] .summary-item {margin-right: 0 !important;margin-left: 0 !important;}

</style>

2. Add a Code Block onto the page, then copy and paste the text below into it

Edit the text in bold to match your categories/tags.
You may change ‘Select:’, ‘All’, and separators (|, •, -, etc.) to your liking.

Using the Code Block


<div class="filters">

 <div class="ui-group">

 Select:

 <div class="button-group filters-button-group" data-filter-group="group1">

 <button class="button is-checked" data-filter="">All</button> |

 <button class="button" data-filter=".CategoryOrTag1">Category/Tag 1</button> |

 <button class="button" data-filter=".CategoryOrTag2">Category/Tag 2</button>

 </div>

 </div>

</div>

3. Add a Summary Block onto the page, after the Code Block

Using the Grid Summary Block


• Layout: Grid (Required)
• Default Aspect Ratio: 1:1 Square (Do not select ‘Auto’)
• Default Gutter Width: 60
• Primary/Secondary Metadata: Category/Tag (Select desired metadata or both if you’d like to filter by category & tag)

4. Add a Code Block to the bottom of the page

Make sure this Code Block remains as the last block on the page.

Using the Code Block


<!-- Squarepaste Summary Block Filter © -->

<script src="https://squarepaste.net/s/base-jquery.js"></script>

<script src="https://squarepaste.net/s/base-filter.js"></script>

<script src="https://squarepaste.net/s/summary-block-filter.js"></script>


Summary Block Filter Extras


How to add/remove a filter:


You will need to add/remove a “button” element. Copy the text in bold to add another filter. You may also remove a button to have fewer filters.

<div class="filters">

 <div class="ui-group">

 Select:

 <div class="button-group filters-button-group" data-filter-group="group1">

 <button class="button is-checked" data-filter="">All</button> |

 <button class="button" data-filter=".CategoryOrTag1">Category/Tag 1</button> |

 <button class="button" data-filter=".CategoryOrTag2">Category/Tag 2</button> |

 <button class="button" data-filter=".CategoryOrTag3">Category/Tag 3</button>

 </div>

 </div>

</div>

How to add/remove a filter level:


You will need to add/remove a “ui-group” div element. Copy the text in bold to add another filter level. You may also remove a “ui-group” to have fewer filter levels.

<div class="filters">

 <div class="ui-group">

 Select:

 <div class="button-group filters-button-group" data-filter-group="group1">

 <button class="button is-checked" data-filter="">All</button> |

 <button class="button" data-filter=".CategoryOrTag1">Category/Tag 1</button> |

 <button class="button" data-filter=".CategoryOrTag2">Category/Tag 2</button>

 </div>

 </div>

 <div class="ui-group">

 Select:

 <div class="button-group filters-button-group" data-filter-group="group2">

 <button class="button is-checked" data-filter="">All</button> |

 <button class="button" data-filter=".CategoryOrTag3">Category/Tag 3</button> |

 <button class="button" data-filter=".CategoryOrTag4">Category/Tag 4</button>

 </div>

 </div>

<div class="ui-group">

 Select:

 <div class="button-group filters-button-group" data-filter-group="group3">

 <button class="button is-checked" data-filter="">All</button> |

 <button class="button" data-filter=".CategoryOrTag5">Category/Tag 5</button> |

 <button class="button" data-filter=".CategoryOrTag6">Category/Tag 6</button>

 </div>

 </div>

</div>

How to change the gutter width:


For example purposes, we’ll show how to change the gutter width to 10. Replace the number 10 with your desired number.
• In the Summary Block, go to the Layout tab and change the Gutter Width to “10”.
• Copy and paste the following code directly after the code in Step #4.

<script type="text/javascript">

$(window).ready(function(){

var $grid = $('.summary-block-setting-primary-metadata-tags, .summary-block-setting-primary-metadata-cats, .summary-block-setting-secondary-metadata-tags, .summary-block-setting-secondary-metadata-cats').isotope({fitRows: {gutter: 10}});

});

</script>

How to hide the categories/tags:


• Copy and paste the following code into the Page Header Code Injection:

<style type="text/css">

.summary-block-wrapper[class*="cats"] .summary-item .summary-metadata-item[class*="cats"], .summary-block-wrapper[class*="tags"] .summary-item .summary-metadata-item[class*="tags"] {display: none !important;}

</style>

• If using the Summary Block Filter sitewide, copy and paste the following code into Custom CSS.

.summary-block-wrapper[class*="cats"] .summary-item .summary-metadata-item[class*="cats"], .summary-block-wrapper[class*="tags"] .summary-item .summary-metadata-item[class*="tags"] {display: none !important;}

How to type filters for categories and tags with special characters:


When using a special character, you must place a \ before the symbol. We’ve provided examples below:

Blue & Red = Blue\&Red
1 – 5 = 1-5
$80 = \$80

How to apply the Summary Block Filter sitewide:


• Skip Step #1, then copy and paste the code below into Custom CSS.

/* Squarepaste Summary Block Filter © */

.filters-button-group {display:inline-block;}

.filters-button-group button {background: none;outline: none;border: none;padding: 0;color: initial;}

.filters-button-group button.is-checked {opacity: 0.5;}

.summary-block-wrapper[class*="cats"] .summary-item, .summary-block-wrapper[class*="tags"] .summary-item {margin-right: 0 !important;margin-left: 0 !important;}

• Skip Step #4, then copy and paste the code below into Footer Code Injection.

<!-- Squarepaste Summary Block Filter © -->

<script src="https://squarepaste.net/s/base-jquery.js"></script>

<script src="https://squarepaste.net/s/base-filter.js"></script>

<script src="https://squarepaste.net/s/summary-block-filter.js"></script>

© Squarepaste