Avatars For Groups In 50

Avatars For Groups In 50 — release and upgrade information for APG vNext 50.

Upgrading APG vNext

• Back up your SQL Server database before starting any upgrade.
• Save your web.config, custom skins, and upfiles folder contents.
• Run the upgrade SQL scripts in sequential order — never skip versions.
• Test all key features after upgrading: login, posting, email notifications, file uploads.

Download & Support

• Download APG vNext
• Upgrade Guide
• Support Forum

Group Avatars in APG vNext 5.0 — Configuration and Display

APG vNext 5.0 introduced group avatars — a shared avatar image displayed for all members of a specific group, shown alongside (or instead of) the member's individual avatar. This is useful for distinguishing staff, moderators, sponsors, or premium members visually in post lists and member directories.

Setting a Group Avatar

1. Admin Panel → Users → Groups → Edit [Group Name]
2. In the Group Avatar section, upload an image (recommended: 64×64px PNG with transparent background)
3. Choose display mode:
   • Replace — shows group avatar instead of member's personal avatar
   • Overlay — shows group avatar as a badge overlaid on the member's personal avatar
   • Both — shows both avatars side by side (takes more horizontal space)
4. Save — the group avatar appears immediately for all group members

Group Avatar Priority When a Member Belongs to Multiple Groups

Members often belong to multiple groups (e.g., "Registered Users" + "Moderators" + "Sponsors"). APG vNext resolves group avatar priority by the group's Display Priority setting:

-- Set display priority (lower number = higher priority):
UPDATE apg_Groups
SET    DisplayPriority = CASE GroupID
    WHEN 3 THEN 1   -- Moderators: highest priority
    WHEN 4 THEN 2   -- Sponsors
    WHEN 2 THEN 10  -- Registered Users: lowest priority
    ELSE 5
END;

The group with the lowest DisplayPriority number wins and its avatar is shown. This ensures a moderator who is also a registered user shows the Moderator group avatar.

CSS Customisation for Group Avatar Badges

/* APG vNext 5.0 — group avatar overlay badge styling */
.apg-member-avatar-wrapper {
  position: relative;
  display:  inline-block;
}
.apg-group-avatar-badge {
  position:      absolute;
  bottom:        -4px;
  right:         -4px;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  border:        2px solid #fff;
  object-fit:    cover;
}
@media (max-width: 640px) {
  .apg-group-avatar-badge { width: 16px; height: 16px; }
}

Use Cases for Group Avatars

Group avatars serve distinct purposes depending on the community type:

Staff and Moderator Identification

A small badge overlay (typically a shield or star icon) on a moderator's avatar makes them instantly recognisable in thread views without requiring members to read username badges. This is particularly valuable in busy communities where members need to identify moderator responses quickly.

Sponsor and Premium Member Recognition

Display a "Premium" or "Gold" badge overlay on avatars of paying community members. This serves as social proof and provides visual recognition that encourages other members to upgrade. Configure separately from staff badges using a different group avatar image.

Event or Campaign Badges

Temporary group avatars can mark members participating in a community event, charity campaign, or anniversary celebration. Create a time-limited group, assign the event badge, and remove the group after the event ends — members' personal avatars return automatically.

Configuring Group Avatar Dimensions and Format

Group avatar images should be prepared with the correct specifications for sharp display at all sizes:

/* Recommended group badge specifications */
Format:         PNG with transparent background
Dimensions:     64 × 64 pixels (minimum for Retina clarity)
File size:      Under 20KB
Content:        Icon or badge, not a photo — must be legible at 22px

/* In APG vNext, group avatars are displayed at multiple sizes:
   - 22px: thread post lists
   - 32px: member profile header
   - 48px: member search results
   - 64px: user card overlay (on hover) */

API Access to Group Avatar Data

APG vNext 5.1+ exposes group membership and avatar data through the REST API, enabling external tools to display the correct group badge when rendering member data:

// Fetch member info including group avatar URL:
const res = await fetch('/api/v1/members/123',
  { headers: { 'X-APG-ApiKey': 'your-key' } }
);
const member = await res.json();
// member.primaryGroup.avatarUrl → URL of group badge
// member.avatarUrl              → member's personal avatar

// Display with group badge overlay:
document.querySelector('.member-avatar-wrap').innerHTML = `
  <img src="${member.avatarUrl}" class="member-avatar" />
  ${member.primaryGroup.avatarUrl ?
    `<img src="${member.primaryGroup.avatarUrl}" class="group-badge" />` : ''}
`;

Performance Considerations

Group avatars are rendered on every post in a thread. On long threads (100+ replies) with multiple moderators who have group badge overlays, the additional <img> elements add to DOM size and network requests. Mitigate by serving group badge images with long-term cache headers and a content hash in the filename:

<!-- IIS web.config: long-term cache for group avatar images -->
<location path="assets/images/groups">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge"
                   cacheControlMaxAge="365.00:00:00" />
    </staticContent>
  </system.webServer>
</location>

Related Resources

• Avatar Upload Restrictions
• Social Account Avatar Issues
• APG vNext 5.0 Release Notes
• Knowledge Base

Looking for more help? Browse the support forum or check the Knowledge Base.