Text Overlay in Profile Photos

Question

Is it possible to overlay text wherever the profile photo renders in Telligent? We're thinking a number (stored in a profile attribute) to highlight the member's level of expertise.

Michael Monteleone · Accepted Answer

While there is no out-of-the-box way to do this, there are a number of options to get there using widget customizations in Widget Studio. 
 
 Customize widgets that show the user avatar in Widget Studio. This would be the most straightforward approach, though they are shown in many places, so it would require not only finding/replacing, but adding calls to whichever APIs from which you are sourcing data. 
 Another option, and maybe the best way to prove out the behavior, could be to simply not do this, but instead only update the user hover widget. The benefit of this would be that it's a single place to adjust. It would of course only show when hovering over the avatar. For a potentially no-code approach, the user hover widget also already supports configuring it to show any of the user's profile fields in the hover. And with a little customization of the widget in Widget Studio, it can show much more. 
 It may be possible to achieve this from a purely client side perspective, using JavaScript to select all avatars on a page, regardless of the widget presenting them, and decorating them with overlays. The JavaScript, itself, could be self contained in a single widget rendered sitewide (locked in the footer, for example). But the challenge for this is with efficiently loading details and decorating the avatars. Even with REST batching, it may still introduce too much lag.

Text Overlay in Profile Photos

Top Replies