Badge after an user's name

[JackyBorderCollie]

Hi, I'd like a plugin to be made, that will display a custom badge after an user's name. I need it for my forum, as I made a group called Verified, and I'd like to display a checkmark next to their names. I also need it to be toggleable in different places (e.g. mini profile, post profile, etc.)
I have tried using www.proboards.com/library/plugins/item/58 but that is buggy, and it displays the badge before an user's name.

[Chris]

Apr 23, 2023 7:45:11 GMT -8 JackyBorderCollie said:

Hi, I'd like a plugin to be made, that will display a custom badge after an user's name. I need it for my forum, as I made a group called Verified, and I'd like to display a checkmark next to their names. I also need it to be toggleable in different places (e.g. mini profile, post profile, etc.)
I have tried using www.proboards.com/library/plugins/item/58 but that is buggy, and it displays the badge before an user's name.

Perhaps you should further describe any "buggy" behavior you've encountered with the referenced plugin so such bugs are not inadvertently recreated in a possibly new plugin.

[JackyBorderCollie]

Apr 24, 2023 3:51:15 GMT -8 Chris said:

Apr 23, 2023 7:45:11 GMT -8 JackyBorderCollie said:

Hi, I'd like a plugin to be made, that will display a custom badge after an user's name. I need it for my forum, as I made a group called Verified, and I'd like to display a checkmark next to their names. I also need it to be toggleable in different places (e.g. mini profile, post profile, etc.)
I have tried using www.proboards.com/library/plugins/item/58 but that is buggy, and it displays the badge before an user's name.

Perhaps you should further describe any "buggy" behavior you've encountered with the referenced plugin so such bugs are not inadvertently recreated in a possibly new plugin.

I encountered a bug, where when you have a thread with multiple pages, when you go to a different page than you are currently on, the badges in the shoutbox duplicate.

[Chris]

Apr 25, 2023 3:48:09 GMT -8 JackyBorderCollie said:

I encountered a bug, where when you have a thread with multiple pages, when you go to a different page than you are currently on, the badges in the shoutbox duplicate.

That would be a bug relatively trivial to fix it^[1] in the plugin if that plugin is open-source. The much preferable solution would be to patch the wheel rather than waste the blood, sweat, and tears already spent building that wheel. If the plugin was just horribly coded, then that would be a different calculation.

I suspect the overarching issue behind that bug is that the ProBoards API offers no event hooks for the shoutbox, so plugin authors are relegated to rolling up their own custom hooks such as listening to AJAX requests or attaching mutation observers, etc. This means conflicts between the custom hook and the official hooks will undoubtedly lead to bugs such as that, and a new plugin would not be immune to such bugs if it intends to include support for the shoutbox. The path of least resistance would be to modify the existing plugin and not reinvent the wheel.

Your primary request regarding having the icon to the right of the user name can be accomplished without the plugin by employing pure CSS to add the icons for select user links and, as a bonus, should not suffer from the bug you described. For example

/* BEGIN: Define custom variables for each icon */
a.user-link{
   /* Verified Icon */
   --verified-image: url(https://storage.proboards.com/1/images/oxXTrXQCO_VQNXbmUIiS.png);
   --verified-image-width: 1.5em;
   --verified-image-height: 1.5em;
   --verified: no-repeat 0/var(--verified-image-width) var(--verified-image-width) var(--verified-image);

   /* Cat Icon */
   --cat-image: url(https://storage.proboards.com/1/avatar/BNdpFCbkSalECqFRtHtJ.png);
   --cat-image-width: 1.5em;
   --cat-image-height: 1.5em;
   --cat: no-repeat 0/var(--cat-image-width) var(--cat-image-width) var(--cat-image);
 
   /* Collie Icon */
   --collie-image: url(https://storage.proboards.com/1/avatar/gPEYBvJUmcLYTWkhaOup.png);
   --collie-image-width: 1.5em;
   --collie-image-height: 1.5em;
   --collie: no-repeat 0/var(--collie-image-width) var(--collie-image-width) var(--collie-image);
   
}
/* END: Define custom variables for each icon */

/* BEGIN: Select which user or group gets which icon */

/* Icon for KackyBorderCollie */
a.user-link[title="@jackybordercollie"]::after {
 
 
   background: var(--verified);
   display: inline-block;
   content: '';
   min-width:  var(--verified-image-width);
   min-height:  var(--verified-image-height);
   margin-left: .3em;
}

/* Icon for group 34 */
.user-link.group-34::after {
 
 
   background: var(--cat);
   display: inline-block;
   content: '';
   min-width:  var(--cat-image-width);
   min-height:  var(--cat-image-height);
   margin-left: .3em;
}

/* END: Select which user or group gets which icon */




The "toggleable in different places" is a bit vague. Still, if that means only on certain theme layout pages, then you could omit the custom variable definitions part from the theme stylesheet and instead define them only in layout templates where you want them to occur. A similar path using headers/footers (if wanting to affect all themes) with sub-headers/sub-footers such as boards, categories, etc. should also be possible depending on what "toggleable in different places" entails.

If the pages where you do not want it to occur are vastly outnumbered by those where you want it to occur, then you could instead redefine the variables to nonsensical values on the pages you do not want it. For example,

<style>a.user-link.o-user-link{
--verified-image-width: 0;
--cat-image-width: 0;
--collie-image-width: 0;
}</style>

placed in a layout template would override (with greater specificity) the width property to 0 for the icons on that layout page.