Skip to content

Render team member avatars from GitHub profile images - #51

Open
SashankBhamidi with Copilot wants to merge 2 commits into
mainfrom
copilot/add-avatars-to-team-page
Open

Render team member avatars from GitHub profile images#51
SashankBhamidi with Copilot wants to merge 2 commits into
mainfrom
copilot/add-avatars-to-team-page

Conversation

Copilot AI commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

This updates the Team page to display each member’s real profile image via GitHub’s stable avatar endpoint (https://github.com/<username>.png) instead of placeholder initials/Gravatar dependence. The goal is consistent, recognizable identities without requiring additional external account setup.

  • Team page rendering

    • Replaced text avatar placeholders with an <img> sourced from each member’s existing github field in site.data.team.
    • Added semantic/accessibility and perf attributes (alt, loading="lazy", fixed dimensions).
  • Avatar presentation styles

    • Updated .member-avatar to behave as an image container (circular crop via overflow: hidden).
    • Added image-specific rules to ensure clean fit/crop (object-fit: cover, full-size block rendering) while preserving existing card layout.
<div class="member-avatar">
  <img
    src="https://github.com/{{ member.github }}.png"
    alt="{{ member.name }} avatar"
    loading="lazy"
    width="48"
    height="48"
  >
</div>

Co-authored-by: SashankBhamidi <66299104+SashankBhamidi@users.noreply.github.com>
@SashankBhamidi
SashankBhamidi marked this pull request as ready for review August 19, 2026 10:21
Copilot AI changed the title [WIP] Add avatars to the team page using GitHub API Render team member avatars from GitHub profile images Aug 19, 2026
Copilot AI requested a review from SashankBhamidi August 19, 2026 10:22

@niccokunzmann niccokunzmann left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relevant for the privacy policy. That issue should be linked.

Comment thread team/index.html
<div class="member-card">
<div class="member-avatar">{{ member.avatar }}</div>
<div class="member-avatar">
<img src="https://github.com/{{ member.github }}.png" alt="{{ member.name }} avatar" loading="lazy" width="48" height="48">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

width and height should go into CSS.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, they are in there. They can be deleted.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The URL redirects. That's not a good idea.

Comment thread assets/css/style.css
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--stone-100);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That can stay in case we get a 404 for the image.

Comment thread team/index.html
<div class="member-card">
<div class="member-avatar">{{ member.avatar }}</div>
<div class="member-avatar">
<img src="https://github.com/{{ member.github }}.png" alt="{{ member.name }} avatar" loading="lazy" width="48" height="48">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The URL redirects. That's not a good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add avatars to the team page

5 participants