Portfolio Search Box

Description

adding search box to Portfolio Page
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Portfolio Page

#1.2. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
Note: code will search on both Portfolio title text + Image ALT + Image file name

<!-- 07.26c28v1 Portfolio Search Box -->
<script>
window.PortfolioSearchConfig = {
  placeholder: 'Search projects...',
  color: '#333333',
  border: '1px solid #d0d0d0',
  borderRadius: '50px',
  background: '#ffffff',
  width: '400px',
  padding: '12px 16px',
  iconSize: '20px',
  position: 'left',
  sidePaddingDesktop: 'var(--pagePadding)',
  sidePaddingMobile: '6vw',
  gridPaddingTop: '1vw',
  marginTop: '16px',
  marginBottom: '16px',
  noResultsText: 'No projects found'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c28v1portfoliosearchbox.js"></script>

#2. Customize

#2.1. To change Search box placeholder text, change this line 04

placeholder: 'Search projects...',

#2.2. To change style of search box, change line 05 to line 10

color: '#333333',
  border: '1px solid #d0d0d0',
  borderRadius: '50px',
  background: '#ffffff',
  width: '400px',
  padding: '12px 16px',

#2.3. To change search icon size, change line 11

iconSize: '20px',

#2.4. To change result text when there is no project/portfolio items, change line 18

noResultsText: 'No projects found'

#3. Other

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

Add a Markdown Block

Add this code into Markdown

<script>
window.PortfolioSearchConfig = {
  placeholder: 'Search projects...',
  color: '#333333',
  border: '1px solid #d0d0d0',
  borderRadius: '50px',
  background: '#ffffff',
  width: '400px',
  padding: '12px 16px',
  iconSize: '20px',
  position: 'left',
  sidePaddingDesktop: 'var(--pagePadding)',
  sidePaddingMobile: '6vw',
  gridPaddingTop: '1vw',
  marginTop: '16px',
  marginBottom: '16px',
  noResultsText: 'No projects found'
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c28v1portfoliosearchbox.js"></script>