Welcome to CM Avatar’s documentation!¶
Contents:
Overview¶
CM Avatar is a simple Joomla! plugin to give Joomla! users ability to upload avatar (profile picture) by adding a custom field into Joomla! user profile.
The plugin doesn’t display user’s avatar, but it provides a simple helper to help you do this (basic web development skills are required).
Install & update¶
Install¶
Installation is very easy, you just need to upload the package via Extension Manager.
Update¶
You receive update notification in your Joomla! website when there is a new version of the plugin available, you just need to follow the instructions from Joomla! to update the plugin.
You can also go to Github, download the new version and upload it via Extension Manager, just like the way you install.
Configuration¶
Create avatar folder¶
You need to create a folder where your users’s avatar files are stored.
In your Joomla! back-end, you navigate to Content -> Media Manager, browse to the folder where you want to create the avatar folder.
Click “Create New Folder” button in the toolbar to create a new folder. Enter the folder name, click “Create Folder” to create.
Configure the plugin¶
In your Joomla! back-end, you navigate to Extensions -> Plugin Manager, search for “avatar” to find the plugin quickly.
Click the plugin’s name to configure.
On the right side, you set the “Status” option to “Enabled” to enable the plugin.
On the left side, you configure the following options:
- Avatar folder: The path to the folder where user avatars are stored, you create it in the step above. This path is relative to the root of your webspace. Example: images/avatars. Note: Do not start the path with a slash!
- Allowed image extensions: Extensions (file types) which are allowed to upload, the extensions are separated by comma, for example: bmp,gif,jpg,png.
- Maximum size (in MB): The maximum size of image which is allowed to upload. Note: your server also has its own maximum limit.
- Avatar’s maximum width (in pixel): The maximum width of avatar. Avatar file will be resized to this width. The height will be calculated and resized to keep the image’s ratio.
- Avatar’s maximum height (in pixel): The maximum height of avatar. After avatar is resized based on maximum width, if the avatar’s height is bigger than this value, avatar file will be resized to this height, the width will be calculated and resized to keep the image’s ratio.
- Display avatar in profile: Display the current avatar in profile view. By default this option is disabled because it is not possible to display an image in profile view. Please view Display avatar section for solution.
After you save the plugin, you can see the options for uploading avatar when you edit your profile.
After you upload an avatar, the avatar section in profile edit form looks similar to the below screenshot.
If you enable “Display avatar in profile” option in the plugin configuration, when you view your profile you don’t see the avatar image, but you see the HTML code of it.
We have this problem because Joomla! doesn’t support printing HTML for profile value, it is in “value” function in components/com_users/helpers/html/users.php) file:
public static function value($value)
{
if (is_string($value))
{
$value = trim($value);
}
if (empty($value))
{
return JText::_('COM_USERS_PROFILE_VALUE_NOT_FOUND');
}
elseif (!is_array($value))
{
return htmlspecialchars($value);
}
}
Please view Display avatar section for solution.
Display avatar¶
In profile¶
To display avatar in Joomla!’s profile view, you will need to override the layout of Users component.
Copy the file components/com_users/views/profile/tmpl/default_custom.php to this location: templates/YOUR_CURRENT_TEMPLATE/html/com_users/profile/default_custom.php.
Above these 2 lines:
<?php else : ?>
<?php echo JHtml::_('users.value', $field->value); ?>
You add:
<?php elseif ($field->type == 'CMAvatar') : ?>
<?php echo $field->value; ?>
This is the whole file:
<?php
/**
* @package Joomla.Site
* @subpackage com_users
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JLoader::register('JHtmlUsers', JPATH_COMPONENT . '/helpers/html/users.php');
JHtml::register('users.spacer', array('JHtmlUsers', 'spacer'));
$fieldsets = $this->form->getFieldsets();
if (isset($fieldsets['core'])) unset($fieldsets['core']);
if (isset($fieldsets['params'])) unset($fieldsets['params']);
foreach ($fieldsets as $group => $fieldset): // Iterate through the form fieldsets
$fields = $this->form->getFieldset($group);
if (count($fields)):
?>
<?php //if ($this->params->get('show_tags')) : ?>
<?php //$this->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php //echo $this->tagLayout->render($this->tags); ?>
<?php // endif; ?>
<fieldset id="users-profile-custom" class="users-profile-custom-<?php echo $group; ?>">
<?php if (isset($fieldset->label)): // If the fieldset has a label set, display it as the legend. ?>
<legend><?php echo JText::_($fieldset->label); ?></legend>
<?php endif; ?>
<dl class="dl-horizontal">
<?php foreach ($fields as $field) :
if (!$field->hidden && $field->type != 'Spacer') : ?>
<dt><?php echo $field->title; ?></dt>
<dd>
<?php if (JHtml::isRegistered('users.' . $field->id)) : ?>
<?php echo JHtml::_('users.' . $field->id, $field->value); ?>
<?php elseif (JHtml::isRegistered('users.' . $field->fieldname)) : ?>
<?php echo JHtml::_('users.' . $field->fieldname, $field->value); ?>
<?php elseif (JHtml::isRegistered('users.' . $field->type)) : ?>
<?php echo JHtml::_('users.' . $field->type, $field->value); ?>
<?php elseif ($field->type == 'CMAvatar') : ?>
<?php echo $field->value; ?>
<?php else : ?>
<?php echo JHtml::_('users.value', $field->value); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php endforeach; ?>
</dl>
</fieldset>
<?php endif; ?>
<?php endforeach; ?>
Now you can see the avatar in your profile view.
In another extension¶
To display avatar in another extension, eg. your community component, your blog component, etc... you need to get the avatar file name from the database and display it by using PHP.
We have a small helper for that. You can use it like this:
require_once JPATH_PLUGINS . '/user/cmavatar/helper.php';
$avatar = PlgUserCMAvatarHelper::getAvatar($userId);
$userId is the variable which holds the ID of the user of you want to get his/her avatar.
The result in $avatar is the path to the avatar of the user, for example “images/avatars/4d99b38d96ed65caf39fde008528f185.jpg”, you can do whatever you want with it like put it into <img> HTML element. If user doesn’t have avatar, the result is empty.
Support¶
You can contact us directly by mailing to cmext.vn@gmail.com, or post in our forum at cmext.vn.
If you are a developer, please post bug reports or ideas, suggestions to the plugin’s Github repository.
Any contribution is always appreciated!