Not only the sites you produce with Joomla – but also the Backend where you and your customers develop and maintain the site can and should be yours. With a few hacks, you can make it even more yours.

You download Joomla, run an installation and see our Backend. So wow! – a carefully designed backend which is a well sorted, complete, stable tool set. Do you like these DIY-stores? I do – but I bet that your toolset would be very different from mine. Why then should we all use the same tool set in the Joomla Backend?  

On Joomladay 2023 in Salzburg, I presented different small but useful hacks for customising the backend.

The Avatar

You've probably seen it on other systems, like GitHub or our community platfom Mattermost: a user avatar. I like that and why not have it in Joomla? It is useful if you can edit your profile. As developer I am working in different roles when I make a website. Of course, I can open the user's menu to see "who I am"

But wouldn’t it be nice to see that directly with the avatar? It is also a friendly welcome for your administrators, once the site is online. 

Here we go: Upload Avatars of your users into a folder in your media folder.

Add a simple custom field of type “media” to users. Now you can add an avatars to user’s profiles

The next step is an override of the small administrator module “mod_user”.  Make an Override of this file, and open it for editing. I suppose here the field-id 8 for the avatar field

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Session\Session;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;

$hideLinks = $app->getInput()->getBool('hidemainmenu');

if ($hideLinks) {
    return;
}

$app        = Factory::getApplication();
$user       = $app->getIdentity();
$userfields = FieldsHelper::getFields('com_users.user', $user, false);

$fields = [];

foreach ($userfields as $field) {
    $fields[$field->id] = $field;
}

// The id of your avatar field
$fieldId = 8;

$url = !(empty($fields[$fieldId]->value)) ?  json_decode($fields[$fieldId]->value) : '';
$avatar = !empty($url->imagefile) ? HTMLHelper::_('cleanImageURL', $url->imagefile) : '';

// Load the Bootstrap Dropdown
HTMLHelper::_('bootstrap.dropdown', '.dropdown-toggle');
?>
<div class="header-item-content dropdown header-profile">
    <button class="dropdown-toggle d-flex align-items-center ps-0 py-0" data-bs-toggle="dropdown" type="button"
        title="<?php echo Text::_('MOD_USER_MENU'); ?>">
        <span class="header-item-icon">
            <?php if (!empty($avatar)) : ?>
                <?php echo HTMLHelper::_('image', $avatar->url, '', ['aria-hidden' => 'true']); ?>
            <?php else: ?>
                <span class="icon-user-circle" aria-hidden="true"></span>
            <?php endif; ?>
        </span>
        <span class="header-item-text">
            <?php echo Text::_('MOD_USER_MENU'); ?>
        </span>
        <span class="icon-angle-down" aria-hidden="true"></span>
    </button>

Save the  file and enjoy a friendly avatar for you and your administrators!

Another Override may be interesting for you, not only here in the user profile, but in all edit views in backend components. You can integrate fields into the main area which per default are displayed in an extra tab.

The Tabs

In this case I did not want an extra tab for the avatar field, but wanted to integrate the field directly in the Account Details Form.

Make an override of com_user view user edit.
There is a tab for the user account. Add the Avatar field here and remove it from the form.

        <?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'details', Text::_('COM_USERS_USER_ACCOUNT_DETAILS')); ?>

            <?php // Add the avatar field below the User Data ?>
            <fieldset class="options-form">
                <legend><?php echo Text::_('Avatar'); ?></legend>
                <div class="form-grid">
                    <?php echo $this->form->renderField('avatar', 'com_fields'); ?>
                </div>
            </fieldset>
            
            <?php // Remove fields from the form - they should not be diesplayed in a new tab ?>
            <?php $this->form->removeGroup('com_fields'); ?>

            <fieldset class="options-form">
                <legend><?php echo Text::_('COM_USERS_USER_ACCOUNT_DETAILS'); ?></legend>
                <div class="form-grid">
                    <?php echo $this->form->renderFieldset('user_details'); ?>
                </div>
            </fieldset>


        <?php echo HTMLHelper::_('uitab.endTab'); ?>

The code here is an example, just for this case, it will not fit for other use cases.

This was one of countless possibilities for customising also the Backend of Joomla.  Have fun and be creative! Joomla is Yours!