Portfolio Categories

This is paid code. You need to pay me to use code (& get priority support & free install)

Description: Add category filters to Portfolio Page

How to

#1. First, find Portfolio Item URL

Suppose item has url like this:

• https://tuanphan3.squarespace.com/project/netflix
• https://tuanphan3.squarespace.com/project/nokia
• https://tuanphan3.squarespace.com/project/amazon

We will use

• /project/netflix
• /project/nokia
• /project/amazon

#2. Use this code to Custom CSS.

#filterBar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px; /* space under Category Filter */
  gap: 20px;
}

.filter-link {
  color: #333; /* Category Filter Text Color */
  text-decoration: none;
  padding: 5px 10px;
  font-size: 16px; /* Category Filter Text Size */
  position: relative;
}

.filter-link:hover {
  color: #000; /* Category Text Color on Hover */
}

.filter-link.active {
  text-decoration: underline; /* Underline Category text on Active */
  font-weight: bold; /* Bold Category text on Active */
}

#3. Use this code to Code Injection > Footer (or Portfolio Page Header Injection)

<script>
// Data configuration for the items
const itemCategories = {
  '/project/netflix': ['Tech', 'Movie'],
  '/project/nokia': ['Tech'],
  '/project/open-ai': ['AI', 'Tech'],
  '/project/aizome-homestay': ['Hotel'],
  '/project/alphabet': ['Tech'],
  '/project/microsoft': ['Tech', 'AI']
};
// Function to initialize the filter system
function initializeFilter() {
  // Create filter bar container
  const filterBar = document.createElement('div');
  filterBar.id = 'filterBar';
  
  // Create filter options
  const filters = ['All', 'AI', 'Tech', 'Movie', 'Hotel'];
  
  filters.forEach(filter => {
    const filterLink = document.createElement('a');
    filterLink.href = '#';
    filterLink.textContent = filter;
    filterLink.classList.add('filter-link');
    filterLink.dataset.filter = filter;
    
    // Add click event listener
    filterLink.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Remove active class from all filters
      document.querySelectorAll('.filter-link').forEach(link => {
        link.classList.remove('active');
      });
      
      // Add active class to clicked filter
      this.classList.add('active');
      
      // Filter the items
      filterItems(filter);
    });
    
    filterBar.appendChild(filterLink);
  });
  
  // Insert filter bar before the grid
  const gridContainer = document.getElementById('gridThumbs');
  gridContainer.parentNode.insertBefore(filterBar, gridContainer);
  
  // Set 'All' as active by default
  document.querySelector('[data-filter="All"]').classList.add('active');
}
// Function to filter items
function filterItems(filterValue) {
  const gridItems = document.querySelectorAll('#gridThumbs .grid-item');
  
  gridItems.forEach(item => {
    const href = item.getAttribute('href');
    
    if (filterValue === 'All') {
      item.style.display = '';
    } else {
      // Check if item belongs to selected category
      if (itemCategories[href] && itemCategories[href].includes(filterValue)) {
        item.style.display = '';
      } else {
        item.style.display = 'none';
      }
    }
  });
}
// Initialize the filter when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeFilter);
</script>

#4.1. Change category text with this line.

// Create filter options
const filters = ['All', 'AI', 'Tech', 'Movie', 'Hotel'];

#4.2. Assign portfolio item – category with these lines

const itemCategories = {
  '/project/netflix': ['Tech', 'Movie'],
  '/project/nokia': ['Tech'],
  '/project/open-ai': ['AI', 'Tech'],
  '/project/aizome-homestay': ['Hotel'],
  '/project/alphabet': ['Tech'],
  '/project/microsoft': ['Tech', 'AI']
};