Badge Labels

A Flarum extension that gives the badges in a post their full titles, moves them out from behind the avatar, and can show how many posts the author has written.

Out of the box Flarum shows badges as small icons tucked over the corner of the avatar, and their names only appear when you hover over one. This extension writes each badge's name next to its icon, so a member's groups are readable at a glance.

What it does

• Full badge titles. Each badge becomes one pill: its icon at the rounded left end, its name at the right, in the badge's own colour with readable text on light and dark badges alike.
• Badge placement. Put the badges in a column below the avatar (the author column widens to make room), or on the post header line beside the username, where they follow the timestamp.
• Post count. Optionally show how many posts the author has written, as a pill of its own in the theme's neutral badge colour, so it is never mistaken for a group.
• Phones. Off by default there, since phones show a compact post header. One switch turns it on.

Every badge is covered, not just group badges: the title comes from whatever each badge already tells Flarum its name is, so badges added by other extensions get labelled too. Badges that have no name are left as plain icons.

Settings

Compatibility

Works on Flarum 1.8 and Flarum 2.x from the same release, with no configuration differences between the two.

Nothing is added to your database and nothing is added to what your forum sends to visitors: the post count is the one Flarum already publishes on member profiles, and the extension only decides whether to draw it.

Updating

composer update linkrobins/badge-labels
php flarum cache:clear

Credit

Thanks to Tutrix, who wrote the original CSS this is based on, in reply to mihzor's request for badges below the avatar with full titles and a post count, and who suggested turning it into an extension.

That CSS revealed each badge's name with content: attr(aria-label) on a pseudo-element, and had to reserve room for it with a fixed gap. This extension renders the name as a real element instead, which is what lets it work for every badge (including ones whose name Flarum only computes when the badge is drawn) and lets the column size itself to whatever badges a forum actually has, however many and however long their names are, rather than to one guessed width.