Portfolio Filter Category (Code Block)

Description

• adding filter category to portfolio, use Code Block, you can set custom order, filter links style, item count number
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, use this code to Portfolio Page Header Injection

<!-- 10.26c21v12 Portfolio Filter Category (Code Block) -->
<script>
window.PortfolioFilterConfig={
  showAll:true,
  allText:'All',
  order:[], // ['Weddings','Concerts','Corporate','Private']
  align:'left', // left, center or right
  spaceTop:'',
  spaceBottom:'40px',
  gap:'8px',
  textSize:'',
  numberSize:'',
  numberColor:'#C2412B',
  radius:'999px',
  background:'transparent',
  color:'',
  border:'',
  activeBackground:'',
  activeColor:'',
  activeBorder:'',
  hoverBackground:'',
  hoverColor:'',
  hoverBorder:''
};
</script>
<script src="https://code.beaverhero.com/portfolio/1026c21v12portfoliofiltercategory.js"></script>

#1.2. Next, edit each Portfolio item > Add a Code Block

#1.3. Add code with format like this into Code Block

<div data-category="WEDDINGS"></div>

#2. Customize

#2.1. To change filter category link text style, change these

background:'transparent',
  color:'',
  border:'',
  activeBackground:'',
  activeColor:'',
  activeBorder:'',
  hoverBackground:'',
  hoverColor:'',
  hoverBorder:''

#2.2. To change count number style, change these

numberSize:'',
  numberColor:'#C2412B',

#2.3. To change space above/under filter category bar, change these

spaceTop:'',
  spaceBottom:'40px',

#2.4. To align filter category to right/center, change this

align:'left', // left, center or right

#2.5. To change order of categories, change this line

order:[], // ['Weddings','Concerts','Corporate','Private']