Summary Block Blog Filter

Description

• adding Filter category to Summary Block Blog
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you added Summary Block – Grid design

#1.2. Make sure you enabled Metadata Category or Tag

#1.3. Hover on top right of section > Click EDIT SECTION

at Design > Anchor Link > enter word: summary-filter

#1.4. Hover on Page where you use Summary Block > Click Gear icon

Click Advanced > Paste this code

• If you use Personal Plan/Basic Plan and your plan doesn’t support Injection, you can see #3.1.

<!-- 05.26c28v6 Summary Block Blog Filter -->
<script>
window.SummaryFilterConfig = {
  showCategories: true,
  showTags: false,
  allLabel: 'All',
  categoriesLabel: '',
  tagsLabel: 'Tags',
  filterBarSelector: 'section[id*="summary-filter"]',
  excludeTags: [],
  divider: '/',
  activeColor: 'transparent',
  activeTextColor: '#000',
  inactiveColor: 'transparent',
  inactiveTextColor: '#000',
  borderColor: '#000000',
  borderRadius: '4px',
  fontSize: '13px',
  gap: '8px',
  marginBottom: '24px',
  filterMode: 'AND',
  hideMetadata: true,
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0526c28v6summaryblockblogfilter.js"></script>

#2. Customize

#2.1. To rename text “All”, you can change Line 06

allLabel: 'All',

#2.2. To change divider “/” to another symbol, change Line 11

divider: '/',

#2.3. To change Filter Active Link color (when selected), change Line 13

activeTextColor: '#000',

#2.4. To change gap between Filter Links, change Line 19

gap: '8px',

#3. Other

#3.1. If you use Personal Plan/Basic Plan and your plan doesn’t support Injection, you can add a block under Summary Block

Choose Markdown

Add this code into Markdown

<script>
window.SummaryFilterConfig = {
  showCategories: true,
  showTags: false,
  allLabel: 'All',
  categoriesLabel: '',
  tagsLabel: 'Tags',
  filterBarSelector: 'section[id*="summary-filter"]',
  excludeTags: [],
  divider: '/',
  activeColor: 'transparent',
  activeTextColor: '#000',
  inactiveColor: 'transparent',
  inactiveTextColor: '#000',
  borderColor: '#000000',
  borderRadius: '4px',
  fontSize: '13px',
  gap: '8px',
  marginBottom: '24px',
  filterMode: 'AND',
  hideMetadata: true,
};
</script>
<script src="https://code.beaverhero.com/summaryblock/0526c28v6summaryblockblogfilter.js"></script>