I got it working. If anyone wants all groups to be shown infront of the user's name then:

Hook

Add { "hook": "filter:posts.modifyUserInfo", "method": "modifyUserInfo" } to plugin.json.

Method

Add the following to your library .js file:

library.modifyUserInfo = function(userData, callback)
{
	var groupsData;
	async.waterfall([
		function (next) {
			groups.getUserGroups([userData.uid], next);
		},
		function (_groupsData, next) {
			groupsData = _groupsData[0];
			var groupNames = groupsData.filter(Boolean).map(function(group) {
				return group.name;
			});

			groups.getMemberUsers(groupNames, 0, 3, next);
		},
		function (members, next) {
			groupsData.forEach(function(group, index) {
				group.members = members[index];
			});
			
			next();
		}
	], function(err) {
		if (err) {
			return callback(err);
		}

		userData.groups = groupsData;
		
		callback(null, userData);
	});
}

Template

Template example code:

<!-- BEGIN posts.user.groups -->
	<a href="{config.relative_path}/groups/{posts.user.groups.slug}">
		<small class="label group-label inline-block" style="background-color: {posts.user.groups.labelColor};">
			<!-- IF posts.user.groups.icon -->
				<i class="fa {posts.user.groups.icon}"></i>
			<!-- ENDIF posts.user.groups.icon -->
			
			{posts.user.groups.userTitle}
		</small>
	</a>
<!-- END posts.user.groups -->

Thanks @baris for the tip!

Hi, I'm writing a custom theme and am struggling to display all user's groups next to their username in the partials/topic/badge.tpl template using this code:

<!-- IF posts.user.groups.length -->
	<div class="text-center">
	<!-- BEGIN groups -->
		<span class="label group-label inline-block" style="background-color: {posts.user.groups.labelColor};"><!-- IF posts.user.groups.icon --><i class="fa {posts.user.groups.icon}"></i> <!-- ENDIF posts.user.groups.icon -->{posts.user.groups.userTitle}</span><br/>
	<!-- END groups -->
	</div>
<!-- ENDIF posts.user.groups.length -->

but nothing actually works. How do I access the posted user's groups in templates?