Badges in Mini Profile

Preview

This code allows you to add image badges to the mini profile on a user-basis.

Admin CP → Themes → Board Templates → Below the board

<script>
document.addEventListener('DOMContentLoaded', () => {
    const BADGE_SIZE = 25;

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };

    const layouts = [{
            post: '.b2-post',
            name: '.post-author-name',
            target: '.b2-post__rail',
            mode: 'append'
        },
        {
            post: '.post-card-layout',
            name: '.post-author-name',
            target: '.post-card-layout__byline',
            mode: 'append'
        },
        {
            post: '.reply__details',
            name: '.reply__details__username',
            target: '.reply__details__username',
            mode: 'append'
        },
    ];

    const buildBadges = badges => {
        const box = document.createElement('div');
        box.className = 'user-badges';
        box.style.cssText = 'display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;margin-top:.3rem';

        for (const {
                src,
                title
            }
            of badges) {
            const img = document.createElement('img');
            img.src = src;
            img.width = BADGE_SIZE;
            img.height = BADGE_SIZE;
            img.alt = title;
            img.title = title;
            img.loading = 'lazy';
            box.append(img);
        }

        return box;
    };

    for (const layout of layouts) {
        document.querySelectorAll(layout.post).forEach(post => {
            if (post.querySelector('.user-badges')) return;

            const author = post.querySelector(`${layout.name} .user-tooltip[data-username]`);
            const badges = author && userBadges[author.dataset.username];
            const target = post.querySelector(layout.target);
            if (!badges || !badges.length || !target) return;

            target.append(buildBadges(badges));
        });
    }
});
</script>

This is the only part you need to edit:

    const BADGE_SIZE = 25;

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };

The 25 can be changed to the width and height you want the badges to be.

You can add more images, like so:

        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],

You can repeat that whole block to add badges for more users:

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };