3分钟阅读时间 (622字)

属于您的Joomla：在Atum后端模板中创建用户头像

星期三，20十二月2023

1607次点击

2条评论

不仅仅是您用Joomla制作的网站——还有您和您的客户开发和维护网站的后端也可以、应该属于您。通过一些小技巧，您甚至可以使其更加属于您。

您下载Joomla，运行安装并看到我们的后端。哇！——一个精心设计的后端，是一个井然有序、完整、稳定的工具集。你喜欢这些DIY商店吗？我喜欢——但我敢打赌你的工具集会与我的大不相同。那么，为什么我们都要在Joomla后端使用相同的工具集呢？

在2023年萨尔茨堡的Joomladay上，我介绍了几个小而有用的后端定制技巧。

头像

您可能已经在GitHub或我们的社区平台Mattermost等系统中见过它：用户头像。我喜欢它，为什么不把它放在Joomla中呢？如果您可以编辑您的个人资料，它就很有用。作为开发者，我在制作网站时扮演不同的角色。当然，我可以打开用户菜单来查看“我是谁”

但 wouldn't it be nice to see that directly with the avatar? 它也是对您的管理员的一次友好欢迎，一旦网站上线。

那么，我们开始吧：将您用户的头像上传到媒体文件夹中的一个文件夹中。

向用户添加一个简单的自定义字段，类型为“媒体”。现在您可以为用户的个人资料添加头像

下一步是覆盖小管理员模块“mod_user”。为此文件创建一个覆盖，并对其进行编辑。我猜这里字段-id为8的头像字段

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>

保存文件并享受一个友好头像，供您和管理员使用！

另一个可能对您感兴趣的覆盖，不仅在这里的用户个人资料中，而且在后端组件的所有编辑视图中。您可以将字段集成到默认情况下显示在额外选项卡中的主区域中。

选项卡

在这种情况下，我不想为头像字段创建一个额外的选项卡，而是想将其直接集成到账户详细信息表单中。

覆盖com_user视图user edit。
这里有一个用户账户的选项卡。在这里添加头像字段，并将其从表单中删除。

        <?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'); ?>

这里的代码只是一个示例，仅适用于此情况，不适用于其他用例。

这是定制Joomla后端无数可能性之一。享受乐趣并发挥创造力！Joomla属于你！

《Joomla社区杂志》上发布的一些文章代表了作者对特定主题的个人观点或经验，可能并不与Joomla项目的官方立场一致。