User Info

'User Info' - concrete5 marketplace

With this add-on for concrete5 version 5.7.4.2 and above, you can display all kinds of information about users on your website.

You can enter content like you would in any other normal content block, with a lot more functionality. Just embed the special {ui_tags} within your text.

You can show information about the visitor (you) or about the page-author (me on this site). Also you can count and show the current number of visitors on your site or on the current page.

This was done with a 'User Info' block by:

Welcome {ui_name}


Currently there are {ui_visitors} visitors on this site.

Content

Every block contains four different bits of content, each with their own purpose.

  1. guests content - this will be shown to guest users (not logged in)
  2. guests avatar content - used with {ui_avatar}, this popover content will be shown when a guest user hovers over the avatar-picture
  3. logged-in content - this will be shown to users who are logged in. A lot more info will be available, like their avatar picture, their registration date, or custom user attributes
  4. logged-in avatar content - used with {ui_avatar}, when hovering over the avatar picture, it will show the content that was saved here.

Examples

Show info about the visitor (you):

Guest content:

{ui_avatar}
{ui_name}

Guest avatar:

Your IP: {ui_ip}
{ui_login}

 

Logged-in content:

{ui_avatar}
{ui_name}

Logged-in avatar:

{ui_name}
Member since: {ui_regdate}
{ui_login}{ui_profile}
You won {ui_points} points
These are your badges:
{ui_badges}

The same block, but now showing info about the page author:

Guest content:

{ui_avatar}
{ui_name}

Guest avatar:

{ui_name}
Member since: {ui_regdate}

{ui_name} won {ui_points} points and gained the following badges:
{ui_badges}


user page: {ui_attr_user_page}

Logged-in content:

{ui_avatar}
{ui_name}

Logged-in avatar:

{ui_name}
Member since: {ui_regdate}

{ui_name} won {ui_points} points and gained the following badges:
{ui_badges}

CSS

All {ui_tags} have their own class, so they can be styled anyway you prefer.

In the theme for this site (based on the free elemental theme), the following css was added to main.less:

.user_info {
.ui_login a.btn.btn-sm,
.ui_profile a.btn.btn-sm {
background-color: @footer-top-background-color;
}
.ui_avatar {
.ui_login a.btn.btn-sm, .ui_profile a.btn.btn-sm { background-color: darkgray; }
}
}

Badges & Points

With 'User Info', you can show the badges or achievements a user has. Just use the {ui_badges} tag and they will show up. For the points a user gained, you can use the {ui_points} tags...it doesn't come any easier than that.

Remember to 'Enable Public Profile' in /dashboard/system/registration/profiles.

Now Badges can be created as special groups. Add users as a member of those groups to give them certain badges (and points).