Portfolio Filter v2

Description

• adding filter category to Portfolio page
• view demo – password: abc
• buy me a coffee

#1. Install Code

Note: We will use SEO Description text as Category.

#1.1. Click Gear icon on Portfolio Page

Click Advanced > Paste this code

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

<!-- Portfolio Page Category Filter (Portfolio Filter) -->
<script>
window.GalleryFilterConfig = {
  showAll: true,
  allText: 'All',
  initialFilter: '',
  stickyBar: true,
  activeColor: '#000',
  filterOrder: [],
  filterSize: '16px',
  filterAlign: 'center'
}
</script>
<script src="https://code.beaverhero.com/portfolio/0526c31v1portfoliofilter.js"></script>

#1.2. Next, edit each Portfolio item > Click Settings

#1.3. Click SEO > Enter your filter category here

Or something like this.

#2. Customize

#2.1. To rename text “All”

you can change Line 05

allText: 'All',

#2.2. To align filter bar to left or right, change Line 11

filterAlign: 'center'

#2.3. To make Filter Bar sticky on scroll, make sure Line 07 use true value

stickyBar: true,

If it still doesn’t work, add this extra code under

<style>
  #filterBar {
    top: 100px;
    background-color: #fff;
}
</style>

#2.4. To turn specific filter to active on default.

For example, we will make: Video active, like this.

You can change Line 06 to something like this

initialFilter: 'Video',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Portfolio Page > Add a Section > Add a Block

Choose Markdown

Paste this code

<script>
window.GalleryFilterConfig = {
  showAll: true,
  allText: 'All',
  initialFilter: '',
  stickyBar: true,
  activeColor: '#000',
  filterOrder: [],
  filterSize: '16px',
  filterAlign: 'center'
}
</script>
<script src="https://code.beaverhero.com/portfolio/0526c31v1portfoliofilter.js"></script>