README

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. Title every badge, or only the first one, which is a member's main badge.
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. On that line they can follow the post's time or sit in front of it, next to the username.
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. It can follow the badges or take the other placement, so the count sits under the avatar while the badges stay beside the username.
Discussion badges. Optionally give the same pills to a discussion's own badges, such as sticky and locked. In the discussion list they move to the line under the title, where there is room for their names.
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

Setting	Default	What it does
Remove the avatar column	Off	Off, the first post of a discussion only, or every post. See below
Badge placement	Below the avatar	Below the avatar, or beside the username
Badge position on the header line	After the time	Which side of the post's time the badges sit on
Badge arrangement	One per row	How the badges under the avatar are laid out: one per row, centered, or centered with icons sharing rows
Show full badge titles	On every badge	Every badge, the first badge only, or icons only
Show the author's post count	On	The number of posts the author has written
Post count placement	With the badges	With the badges, below the avatar, or beside the username
Label discussion badges too	Off	The same pills for sticky, locked, and any other discussion badge
Author column width	150px	How much room the column below the avatar gets (85 to 400)
Gap below the avatar	4px	The space between the avatar and the first badge under it (0 to 60)
Apply on phones too	Off	Show titles and the post count on phones as well

Removing the avatar column

Flarum reserves a column down the left of every post for the avatar, and on a wide screen that is a lot of empty space beside a short reply. Turning this on takes the column away. The avatar keeps its normal size and overhangs into the space that frees up, and the text closes up around it, so the post reads the way it already does on a phone.

You can apply it to every post, or only to the opening post of a discussion, which gives a thread a header without turning every reply into one.

Two things worth knowing before you turn it on:

It is desktop only. A phone has no author column to remove in the first place, so phones are left exactly as Flarum draws them. Both modes change nothing there.
It moves badges beside the username. "Below the avatar" needs a column to sit in, so when the column goes, anything that lived in it comes up to the header line. That also makes Author column width and Gap below the avatar do nothing while it is on.

The idea comes from a CSS tweak by Tutrix on the Flarum community forum: https://discuss.flarum.org/d/39663-remove-the-avatar-column-just-like-in-the-mobile-view

Compatibility

This is the Flarum 2.x release line. Flarum 1.8 forums install the 1.x line of the same package, which has the same features and the same settings; Composer picks the right one for your forum on its own.

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.

Installation

composer require linkrobins/badge-labels

Then enable the extension in the admin panel.

Updating

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

Credit

Thanks to mihzor, Subarist, and sergtsar for the feedback that shaped the settings above.

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.

linkrobins / badge-labels

Maintainers

Package info

Statistics

Security