EvoFit Help Center

Uploading Your Profile Photo

Upload a circular avatar that shows in the header, on every client's app, and on every list where you appear.

trainer guide/profile/edit
What this is for: Replace the auto-generated initials circle with your real photo so clients recognize you everywhere.

The profile photo widget at /profile/edit lets you upload a circular avatar. The same widget powers the client side, so what you see is what your clients see when they upload theirs. Once saved, your photo appears in your header, on every list where you show up, and on every client's app whose roster you are on.

Step-by-step

  1. Open Profile Settings (click your avatar in the top right) or go to /profile/edit.
  2. Find the Profile Photo section near the top.
  3. Click the avatar circle, OR drag an image onto it, OR press Cmd+V / Ctrl+V to paste from clipboard.
  4. The widget validates the file, resizes it to 256×256 pixels client-side, and saves to your profile.
  5. The header avatar updates immediately — no page reload needed.

What you'll see

  • While the file uploads, the circle dims and shows the current phase: Reading…, Resizing…, or Saving….
  • On success, the circle shows your new photo and the button label switches to Change Photo.
  • A status line below the widget reads "Photo updated".

File requirements

  • Accepted types: JPEG, PNG, WebP.
  • Max raw size: 5 MB.
  • Final stored size: 200 KB (the widget resizes for you — you don't need to pre-shrink).
  • Aspect: any. The avatar is circular, so square photos crop best.
  • EXIF rotation: handled automatically. Sideways iPhone photos render upright.

Removing your photo

  1. On /profile/edit, click Remove Photo under the avatar.
  2. A dialog asks you to confirm.
  3. Confirm. Your circle reverts to your initials with a deterministic background color (same color across the app).

Where it shows up

Once saved, your photo renders on:

  • The header user menu (top right).
  • The trainer dashboard banner.
  • Every page in your client's app that shows your name (Today's Workout, profile, the floating WhatsApp button, etc.).
  • The Schedule roster filter (when picking clients to view their training schedules).
  • Admin user lists (if applicable).

Common pitfalls

Where to find this

  • Page: /profile/edit → Profile Photo section.
  • Component: AvatarUpload.
  • Backend: PUT /api/profiles/me (validates and stores profilePhotoUrl).
  • Underlying util: lib/avatar.ts (resize, EXIF, validation).

Related

Was this article helpful?