Skip to content
FiNAN Logo FiNAN Docs

Committee management

This guide shows content editors how to update committee members independently. You will learn how to prepare photos, follow the required naming/import pattern, and avoid common build errors.

What you will update

Section titled “What you will update”
  • Committee member photos and image imports
  • Names, roles, affiliations, bios, and contact links
  • Country-specific committee data files

Editor checklist

Section titled “Editor checklist”
  • Use the correct photo format and size
  • Follow the kebab-case filename rule
  • Use camelCase image import variables
  • Update the committee data array carefully
  • Verify your work against the Finland example
  • Confirm imageAlt describes the person (example: Portrait of Maria Santos)

Committee photo guidelines

Section titled “Committee photo guidelines”

Required photo specs

Section titled “Required photo specs”
  • Format: .jpg preferred, .png or .webp accepted
  • Size: minimum 400x500px, recommended 800x1000px
  • Aspect ratio: portrait (4:5 works best)
  • File size: under 500KB
  • Quality: well-lit, professional headshot

File naming convention

Section titled “File naming convention”

Use kebab-case (lowercase, hyphens):

first-last.jpg
anna-maria-santos.jpg

Image import pattern (required)

Section titled “Image import pattern (required)”

Use camelCase with an Image suffix:

import mariaSantosImage from '../../../assets/images/committee/finland/maria-santos.jpg';

Pattern:

  • Filename: first-last.jpg (kebab-case)
  • Variable: firstLastImage (camelCase + Image)

Step-by-step: add or update a committee member

Section titled “Step-by-step: add or update a committee member”

  1. Prepare the photo

    • Crop to portrait orientation (4:5)
    • Save as .jpg
    • Name the file using kebab-case

  2. Upload the photo

    Upload to the country folder in the main website repo:

    src/assets/images/committee/[country]/

    Example for Finland:

    src/assets/images/committee/finland/maria-santos.jpg

  3. Open the committee data file

    Each country has its own file:

    • src/data/representation/committee/finlandCommittee.ts
    • src/data/representation/committee/swedenCommittee.ts
    • src/data/representation/committee/norwayCommittee.ts

  4. Add the image import

    Add the image import near the top with the other imports:

    import mariaSantosImage from '../../../assets/images/committee/finland/maria-santos.jpg';

  5. Add or update the member entry

    const finlandCommittee: CommitteeConfig = {
      members: [
        {
          name: 'Maria Santos',
          affiliations: 'Sh',
          role: 'Board Member',
          bio: 'Clinical leadership and community health.',
          imageAlt: 'Portrait of Maria Santos',
          imageSrc: mariaSantosImage,
          linkedinUrl: '',
        },
      ],
    } as const;

  6. Commit your changes

    Use a clear message like:

    Add Maria Santos to Finland committee

  7. Verify the build (developers only)

    Run pnpm build to confirm the image import is valid.

Finland committee example (reference)

Section titled “Finland committee example (reference)”

Use the Finland committee file as the gold standard example:

  • src/data/representation/committee/finlandCommittee.ts

It shows the required imports, member properties, and the correct CommitteeConfig structure. It is also referenced in the Committee image rules file:

  • .claude/rules/committee-images.md

Common mistakes

Section titled “Common mistakes”
  • Wrong filename format: Maria_Santos.jpg instead of maria-santos.jpg
  • Missing import: using imageSrc without adding the import first
  • Variable mismatch: mariaSantosImage imported but imageSrc uses mariaSantos
  • String paths: imageSrc: '/images/...' instead of using the imported variable
  • Missing commas: forgetting the comma between members or object fields

Troubleshooting build errors

Section titled “Troubleshooting build errors”

Build error: cannot find module

Section titled “Build error: cannot find module”
Cannot find module '../../../assets/images/committee/finland/maria-santos.jpg'
  • Confirm the file exists in the correct folder
  • Check the filename spelling and extension
  • Ensure the import path matches the actual country folder

Type error: image is a string

Section titled “Type error: image is a string”
Type 'string' is not assignable to type 'ImageMetadata'
  • Replace string paths with imported image variables

Syntax error after editing

Section titled “Syntax error after editing”
  • Check for missing commas or quotes
  • Make sure every { has a matching }
  • Compare with the Finland example to spot differences

Visual guide placeholders

Section titled “Visual guide placeholders”

Add these screenshots when available:

  1. GitHub upload flow for committee photos
  2. Committee data file with imports highlighted
  3. Example commit message screen

Next steps

Section titled “Next steps”

Representation pages

Update country pages and structure.

View guide →