Portfolio Filter

To add Portfolio filter to top of Portfolio, like this.

#1. First, add this code to Portfolio Page Header Injection

If your Plan is Personal/basic Plan and it doesn’t support Injection, see step #4.13

<! Portfolio Filter -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1758705469515portfoliofilter.css"/>
<script src="https://code.beaverhero.com/file?filename=1758706111775portfoliofilter.js"></script>

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

#3. Click SEO > Enter your filter category here

Or like this.

#4. Customize

#4.1. To remove “All” option, use this to Custom CSS box

[data-filter="All"] {
    display: none !important;
}

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

For example, we will make: Slow Motion active, like this.

we will use this code under plugin code

<script>
 const defaultFilter = 'Slow Motion';

document.addEventListener('filterBarReady', function() {
  const filterElement = document.querySelector(`[data-filter="${defaultFilter}"]`);
  if (filterElement) {
    document.querySelectorAll('.filter-link').forEach(link => {
      link.classList.remove('active');
    });
    filterElement.classList.add('active');
    filterItems(defaultFilter);
  }
});
</script>

#4.3. To make Filter bar sticky on scroll, you can use this code to Custom CSS

div#filterBar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}

#4.4. To fix problem filter links overlow of screen on mobile, use this to Custom CSS

@media screen and (max-width:767px) {
  div#filterBar {
    flex-wrap: wrap;
    row-gap: 0px;
}}

#4.5. To add a bit effect when filter items instead of jumping, use this code to Page Header Injection

<script>
const style = document.createElement('style');
style.textContent = `
  #gridThumbs .grid-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  #gridThumbs .grid-item.hiding {
    opacity: 0;
    transform: scale(0.95);
  }
`;
document.head.appendChild(style);

const originalFilterItems = window.filterItems;
window.filterItems = function(filterValue) {
  const gridItems = document.querySelectorAll('#gridThumbs .grid-item');
  
  gridItems.forEach(item => {
    const href = item.getAttribute('href');
    const shouldShow = filterValue === 'All' || 
                      (itemCategoriesFromSEO[href] && itemCategoriesFromSEO[href].includes(filterValue));
    
    if (!shouldShow) {
      item.classList.add('hiding');
      setTimeout(() => {
        item.style.display = 'none';
        item.classList.remove('hiding');
      }, 400);
    } else {
      item.style.display = '';
      setTimeout(() => {
        item.classList.remove('hiding');
      }, 10);
    }
  });
};
</script>

#4.6. To change color of Filter Active item, use this to Custom CSS

a.filter-link.active {
    color: #f1f;
}

#4.7. To rename All, use this to Custom CSS

a.filter-link[data-filter="All"] {
    font-size: 0;
}
a.filter-link[data-filter="All"]:before {
    content: "Featured";
    font-size: 16px;
}

#4.8. To change order of Filter items, from this.

To this

You can use CSS code like this to Custom CSS

/* item 1 */
div#filterBar>a:nth-child(1) {
    order: 1;
}
/* item 2 */
div#filterBar>a:nth-child(2) {
    order: 3;
}
/* item 3 */
div#filterBar>a:nth-child(3) {
    order: 2
}
/* item 4 */
div#filterBar>a:nth-child(4) {
    order: 4;
}
/* item 5 */
div#filterBar>a:nth-child(5) {
    order: 5;
}
/* item 6 */
div#filterBar>a:nth-child(6) {
    order: 6;
}

#4.9. To change size of Filter item, use this to Custom CSS

a.filter-link {
    font-size: 14px;
}

#4.10. To align left Filter items, use this to Custom CSS

div#filterBar {
    justify-content: flex-start;
    padding-left: 4vw;
}
@media screen and (max-width:767px) {
  div#filterBar {
    padding-left: 6vw;
}  
}
div#filterBar>a:first-child {
    padding-left: 0px !important;
}

#4.11. To reduce spacing of filter items on mobile, use this to Custom CSS

@media screen and (max-width:767px) {
a.filter-link {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
}
}

#4.12. when users enter url like this

https://www.magicbox-co.com/work#Education

It will filter items belong Education category, you can use this code under plugin code

<script>
document.addEventListener("filterBarReady",(function(){const e=window.location.hash.substring(1);if(e){const t=document.querySelector(`[data-filter="${e}"]`);t&&(document.querySelectorAll(".filter-link").forEach((e=>{e.classList.remove("active")})),t.classList.add("active"),filterItems(e))}})),window.addEventListener("hashchange",(function(){const e=window.location.hash.substring(1);if(e){const t=document.querySelector(`[data-filter="${e}"]`);t&&(document.querySelectorAll(".filter-link").forEach((e=>{e.classList.remove("active")})),t.classList.add("active"),filterItems(e))}else document.querySelector('[data-filter="All"]').click()}));
</script>

#4.13. If your plan is Personal/Basic and your plan doesn’t support Injection, you can do these

First, add a Section under Portfolio

Add a Block > Choose Markdown

Add this code into Markdown

<! Portfolio Filter -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1758705469515portfoliofilter.css"/>
<script src="https://code.beaverhero.com/file?filename=1758706111775portfoliofilter.js"></script>

then repeat step 2 and step 3

If you need to hide new section space, let me know.