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' },
],
};
Kathy
·Community Manager Chat
·1 hour ago
