How to make separate author panes Per user group

   (0 reviews)

For this guide I'm not going to go super in depth into the how-to to get like our special gears per user group however we will explain the minimum of how to add in a group ID so that you can start to make custom items in your author pane. This won't be super in depth on how to do extra things but they are possible. This does require theme edits to accomplish:

So first things first go to edit your theme, I always recommend to edit a test theme to be sure you don't break anything while users are using it. To do this go to Themes > Themes > Click the < / > icon to the right of the theme in question.

You'll need to find the postContainer template. It's in forums > front > topics > postContainer

In this template you need to find this line:

<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}} {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}}'>

And replace it with this:

<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox group_{$comment->author()->member_group_id} {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}}{{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}}'>

Note, that the only thing I actually added was this:

group_{$comment->author()->member_group_id} 

What this provides to you is a styling class that identifies the group in question. You can find group IDs in the Members > Groups page by either hovering over the group, editing the group and copying the URL into a text editor or by using your handy dandy inspect element tool.

From here make changes to elements to your hearts content.

As a quick and added bonus. The way that the Initiative accomplishes it's borders is by adding a class to it's our bit for the avatar. Find this:

<li class='cAuthorPane_photo'>

Change to this:

<li class='cAuthorPane_photo group_{$comment->author()->member_group_id}'>

And using CSS like this:

.cAuthorPane {
  width: 300px;
}

.cAuthorPane_photo {
  width: 265px;
  height: 265px;
  display: flex;
  align-items: center;
  justify-content:center;
  background-size: cover;
}

.cAuthorPane_photo.group_4 {
  background: url({resource="new_av_bg.png" app="core" location="front"}) center center no-repeat;
  background-size: cover;
}

Please note that the authorPane changes do require other moderate changes to make them both responsive and to not overlap your post.