Staff Teaser Grouping & Header Inserter
New version of the profile teaser sort that looks for the title of the group they need sorting into in the customized teaser title (h3) and then hides it for easy update for the district later.
See it in action --> https://whatcomcd.specialdistrict.org/all-staff-teams
1. Overview
This script:
- Runs only on one specific page (e.g. /all-staff-teams).
- Looks at each staff card’s <h3>
- Strips the (Group Name) from the <h3> so only the person’s name remains.
- Inserts an <h2> before the first card of each new group, using “Group Name” as its text.
2. Prerequisites
Your staff listing must use this pattern for each card:
<article class="poc-instance …"> <header><h3>Brandy Reed (Administration & Finance)</h3></header> <!-- … teaser content … --> </article>
Which means that each teaser title needs to be customized to "Name (Group)" formatting.
3. Installation
Add to preferences>theme>advanced theme editor > scripts. It doesn't work when added to an HTML block on the page, for console error reasons beyond my understanding.
Be sure to customize the 2 lines to the correct URL PATHNAME.
//all staff and teams page
(function StaffGroupHeaders() {
// Only run on the exact All-Staff-Teams URL
if (window.location.pathname !== '/all-staff-teams') return;//EDIT THIS PART WITH THE RIGHT APPENDING URL
console.log('[StaffGroupHeaders] init on all-staff-teams…'); //EDIT THIS PART TOO
const MAX_TRIES = 20;
let tries = 0;
function insertGroupHeaders() {
const cards = Array.from(document.querySelectorAll('article.poc-instance'));
if (!cards.length) return false;
let lastTeam = null;
cards.forEach(card => {
const h3 = card.querySelector('h3');
if (!h3) return;
const text = h3.textContent.trim();
const match = text.match(/^(.*?)\s*\(([^)]+)\)$/);
const nameOnly = match ? match[1] : text;
const team = match ? match[2] : null;
// Strip the "(Team)" from the title
h3.textContent = nameOnly;
// On first occurrence of a new team, insert an <h2> above this card
if (team && team !== lastTeam) {
const h2 = document.createElement('h2');
h2.textContent = team;
h2.className = 'staff-heading';
h2.style.cssText = `
display: block;
width: 100%;
text-align: left;
margin: 40px 0 20px 15px;
padding: 0;
font-size: 28px;
line-height: 1.4;
font-weight: 600;
clear: both;
`;
card.parentNode.insertBefore(h2, card);
console.log(`[StaffGroupHeaders] Inserted header for “${team}”`);
lastTeam = team;
}
});
console.log('[StaffGroupHeaders] done.');
return true;
}
// Poll every 500ms up to ~10s until the cards exist
const interval = setInterval(() => {
tries++;
console.log(`[StaffGroupHeaders] try ${tries}…`);
if (insertGroupHeaders() || tries >= MAX_TRIES) {
clearInterval(interval);
if (tries >= MAX_TRIES) {
console.warn('[StaffGroupHeaders] giving up—no cards found.');
}
}
}, 500);
})();