Staff and Team Profiles

Present the people behind an organization on an About us page or homepage. One source row becomes one staff card, with optional photos, job titles, mottos, biographies, availability and contact links. The output is static HTML and works without JavaScript.

Accessibility implementation and verification

1. Install and start

1. Import rs_staff.zip through Tabulizer's ruleset archive import.
2. Select Corporate, Education, Retail and Services, or NGO and Community. Each preset contains an embedded CSV example; matching data sources are included.
3. Replace the example names and details with your own team. Upload the actual portraits or use your own image URLs.
4. Publish using the normal Tabulizer workflow.

Keep zero table header rows and the role^presentation host-table attribute. Disable generic table responsiveness, table sorting, search and pagination after the modification: the result is one HTML cell containing a structured set of cards. Copy a preset before customizing it so an archive update will not overwrite your choices.

Manual installation follows the other premium archives: Joomla modification files belong in templates/tabulizer/modify/; WordPress uses wp-content/plugins/tabulizer/templates/tabulizer/modify/. CSS, images, rules, languages, data, data sources and docs go in the corresponding template folders. Prefer ZIP import to install the complete set.

2. Four contextual variations

Every variation supports the same fields. Education/service photo angles are chosen from a repeatable CSS pattern; they do not change at random on each visit. Only the photo tilts: names, biographies and links remain upright. playful=0 removes the portrait tilt while retaining frames. Reduced-motion settings and printing also remove photo tilt. There are no hover-triggered flips or hidden contact overlays.

3. Input: one row per member

The first row names columns in any order. Names are case-insensitive and trimmed. Only the name column and a nonempty name are required. Other columns can be omitted or left blank.

name,job_title,photo
Avery Bennett,Managing Director,/images/team/avery.jpg
Jordan Rivera,Operations Lead,/images/team/jordan.jpg
Sam Chen,Design Lead,

Sam receives a decorative initials panel because no photo was supplied. You can omit all photo panels with photos=0. Repeated names are permitted; source row order determines display order.

All content is escaped as plain text; HTML entered into a field appears literally. CSV cells containing commas, double quotes or newlines must be quoted using standard CSV rules. PHP array sources use consecutive indexes starting at 1 in both dimensions.

4. Portraits and cropping

Supported source forms:

• https://example.org/team/avery.jpg
• /images/team/avery.jpg, relative to the site root
• staff_demo_avery.jpg, resolved through Tabulizer's images URL helper

Plain template image filenames may contain letters, digits, underscores and hyphens, with png, jpg/jpeg, webp, gif or svg extensions. Full/site-root URLs are validated as HTTP(S) or single-leading-slash paths. Protocol-relative URLs, backslashes, credentials, internal raw whitespace and unsupported schemes are rejected. Percent-encode spaces in URLs. The function does not download images or verify their existence.

Upload real portraits using your CMS media workflow. For reliable results, use reasonably sized square source images, with space around the head. The included demo portraits are 640 × 640 JPEGs. The corporate/education/service designs show square portraits; NGO shows a wide crop. Choose photo_position=top to preserve the upper part of a photo, or photo_fit=contain to show the complete source image with unused space instead of cropping.

The four bundled portraits are AI-generated fictional people, reused in the examples to demonstrate the styles. Names, roles, biographies and contact details are fictional example content. Replace them with your actual team before publishing. The supplied 512 × 512 thumbnail is a catalog illustration; it is not a screenshot of the exact HTML output.

5. About us and homepage examples

Compact homepage team

name,job_title,photo,motto
Avery Bennett,Founder,/images/team/avery.jpg,Good work begins with listening.
Jordan Rivera,Customer Adviser,/images/team/jordan.jpg,Here to help you find the right fit.

Rule: staff$type=services;columns=3;title=Meet the people behind our work. Cards do not need biographies or contact details to look complete.

Education with longer introductions

name,job_title,photo,bio,email
Sam Chen,Workshop Lead,/images/team/sam.jpg,Sam leads practical workshops in creative problem-solving.,sam@example.com

Rule: staff$type=education;bio=details. The About Sam Chen disclosure is a native keyboard-operable details element; no JavaScript is required.

Department groups

name,job_title,department
Avery Bennett,Director,Leadership
Sam Chen,Design Lead,Creative
Taylor Morgan,Client Care,Support

Rule: staff$type=corporate;group=department;photos=0. Departments appear in first-seen order, and members retain source order within each department. Blank departments use a translated Other team members heading. Without grouping, department text appears within each card.

6. Options

The modification rule begins with staff$. Use semicolon-separated key=value pairs. Equals signs in titles are allowed; semicolons are reserved delimiters.

staff$type=corporate;heading_level=3;columns=4
staff$type=education;bio=details;playful=0
staff$type=services;photo_fit=contain
staff$type=ngo;group=department;lang=en-GB

7. English and German

Generated titles, contact labels, availability labels, disclosure summaries and empty states use staff.en.ini and staff.de.ini. Tabulizer loads English first, then the site's language, e.g. de-DE uses de. English fallback text is also built into the function.

To add a language, copy the English file to staff.xx.ini, translate values and preserve the keys. BIO takes a person's name as its %s placeholder. Names, roles, department names, mottos, biographies, locations, hours and custom titles are author content and must be supplied in the intended language. The additional staff_education_de.csv demonstrates translated author content.

lang=de-DE marks the output region for browsers/assistive technology; it does not change Tabulizer's translation selection. Keep the UI translation and source content consistent with that language.

8. Accessibility and printing

The component is designed to support WCAG 2.2 AA with semantic lists and named profile articles, configurable headings/language, visible keyboard focus, labelled links, text-based contact information and native disclosures. Photos are not the sole way to identify people: names and roles remain text. Portrait decoration never rotates the card's text or controls.

photo_alt is empty by default because adjacent text already identifies the person. Supply a concise alternative if the photograph communicates relevant information not available in that text. Do not put important role/contact information only in the photograph. Read the accessibility guide for author responsibilities and verification details.

The print stylesheet uses single-column cards, removes photo tilt, and shows biography content on browsers supporting ::details-content. On older browsers, open any biography disclosures before printing. Check actual pagination with the intended printer or browser PDF settings.

9. Appearance and customization

Styles use a tsf- prefix and per-variation CSS variables. For optional branding, override variables after the supplied CSS, then recheck contrast:

.tsf-team.tsf-corporate {
    --tsf-accent: #214971;
    --tsf-text: #172b43;
    --tsf-muted: #4b5d70;
    --tsf-bg: #f8fafc;
    --tsf-soft: #eaf1f8;
    --tsf-focus: #174ea6;
}

Names and long text wrap without fixed-height clipping. Narrow layouts become one column. Bio disclosures expand in place, changing card height without obscuring other content. Repeated decorative angles follow the position within each group.

10. Validation and troubleshooting

Invalid input/options leave the whole source table unchanged. Check recognized unique headers, rectangular 1-based rows, nonempty names, valid URLs/emails/phones, documented option codes and a maximum of 500 nonempty records. Blank rows are ignored. Header-only sources stay unchanged. All-hidden data renders a translated empty-state message; hidden rows are still validated.

If photos are missing, verify their actual URL and file permissions. A filename points to the Tabulizer template images folder, not the general CMS media folder. Use a root-relative path or full URL for CMS uploads. If the raw table remains, verify the function is installed and the modification rule runs.

These are team presentation cards, not an employee database or searchable directory. They do not create member accounts, profile pages, appointment systems or contact forms. Optional links point to pages and contact addresses you already maintain.