user list

This article explains how to build a member site with Joomla core and DPFields only. For a NGO site I maintain, the board wants to display their members on the front with a simple list. We used Community Builder for quite some time, but it slowed down our site. It loads tons of javascript and CSS files and bloats the content. Additionally it had some features we will never use and the management was quite difficult for the none tech users. Finally the point where we decided to move to a more lightweight solution was, as we wanted to open registration for all visitors. It just didn't work, it always redirected to the login module after registration, but the user didn't get created. So I told myself, either way you are going to fix something you want to get rid of it anyway or look for a different solution. We decided to go with Joomla core. Users will be the user management, Contacts the front end list and DPFields will be the custom fields replacement of Community Builder.

User management

As user management we are using Joomla's user manager. We organize the users in the groups we needed with different access levels and so on.

user list backend

Custom fields

To have custom fields for the users, we installed DPFields. Like that we can create as many custom fields we need for our users. More documentation about DPFields can be found here. These custom fields can then be edited by the user itself on the front when editing his/her profile information. Through the permission levels we can also control who can edit the values of the custom fields. This was not possible with Community Builder as they don't use the Joomla's ACL features.

user list custom fields

Contacts management

As we have only a menu item type to show a list of contacts and not users, we need to create for every user a contact. There is a Joomla core plugin Contactcreator which creates for every new user a contact automatically in specific category, we could use that one for sync. By commenting out that line the plugin created a new contact for the updates also. As we had to manually update every user by hand to move the custom fields data from community builder to DPFields, contacts were created for the existing users.

user list ccplugin

Member list

To create the member list for the front, we created a contacts category menu item. To have the list with the fields we need from the user including the custom fields, a template override was needed. Template overrides let the admin to adapt the views to their needs, more information can be found in the official Joomla documentation. In our case we had to copy the file components/com_contact/views/category/tmpl/default_items.php to templates/{template}/html/com_contact/category/default_items.php.

To put the custom fields into the list, we used the following code snippet:

JDispatcher::getInstance()->trigger('onContentPrepare', array ('com_users.user', &$user, &$item->params, 0));
foreach ($user->dpfields as $field)
{
	if ($field->note != 'front')
	{
		continue;
	}
	echo '<br/>' . $field->value;
}

The if condition allows us to display only the fields which have as not value "front" on the member list site. With some more code changes we got a stripped list and nice avatars. How we implemented avatars will be explained later.

user list front

Member detail page

For the contact details page, we used again a template override and some configuration options from the contacts manager. Like that you can control if the contact form should be displayed or not, to let the visitors get in touch with the members.

To adjust the details page, we had to create a template override for that file components/com_contact/views/contact/tmpl/default_address.php by copying it to templates/{template}/html/com_contact/contact/default_address.php. On the top of the file after the first doc block, we put the following code to display the custom fields:

$user = JFactory::getUser($this->item->user_id);
$user->text = '';
$dispatcher = JDispatcher::getInstance();
$dispatcher->trigger('onContentPrepare', array ('com_users.user', &$user, &$this->item->params, 0));
$output = $dispatcher->trigger('onContentBeforeDisplay', array('com_users.user', &$user, &$this->item->params, 0));
foreach ($output as $content)
{
	echo $content;
}

 

user list front detail

Avatar field

The avatar field is somehow special as we had to do some quirks to get it properly working. We created a Media field and set the Home parameter to yes. With that parameter the media manager is loading to a folder with the user name of the current logged in user. When a member is editing his avatar on the front, then he/she sees only his/her folder and not the rest.

With the following CSS code snippet, the folder selection is hidden for the member:

#imageForm .span12.control-group
{
    display:none
}

 It is not the securest way, but it is enough for our members as we need to prevent them from changing the folders because of inexperience and not abuse.

As most of the members upload images with different sizes as their avatars with used again some CSS magic to make them look equal and nice. The object-fit CSS command helps in that case. If you give the avatar field the avatar image class then you can use the following CSS piece of code that the avatars will look like in our screenshots on this page:

.contact-category .avatar {
	height:100px;
	width:100px;
	vertical-align: top;
	object-fit: cover;
	border-radius:50%
}

 To get the avatar as image in our template, you can use the following code:

if (!isset($user->dpfields))
{
	$user->text = '';
	JDispatcher::getInstance()->trigger('onContentPrepare', array('com_users.user', &$user, &$user->params, 0));
}

if (isset($user->dpfields))
{
	foreach ($user->dpfields as $field)
	{
		if ($field->alias != 'avatar')
		{
			continue;
		}
		echo '<a href="' . JRoute::_('index.php?option=com_users&view=profile') . '">';
		echo '<img src="' . $field->rawvalue . '" width="32" alt="' . htmlentities($user->name) . '"/></a>';
	}
}

 

user list avatar field

Conclusion

I'm sure there are different ways to accomplish a member list site, but this was our way to get it done. Together with DPCalendar, you can spice up your events site with a complete event system where people can book workshos or other events from the different members. If you want to have a look on the live site of this article, head over to cwtach.ch/de/mitglieder/vorstand.

We wish you a nice day with your member site.