Page 1 of 1
Replace user icon at top right with user avatar (v2023)
Posted: Sat Mar 02, 2024 3:27 pm
by philmills
I currently have the user's name and photo displaying immediately before the user icon at the far right of the upper navigation.
My code for that is placed in global Page_Foot and is currently as follows:
<script type="text/html" class="ew-js-template" data-name="myOrg" data-method="prependTo" data-target="#ew-navbar-end" data-seq="10">
<?php if (IsLoggedIn()) { ?>
<div class="nav-item ew-navbar-item">
<?php if (GetClientVar("login", "currentUserName")) { ?>
<div style="float:left" id="">
<a class="nav-link"><?= getMyFullName() ?></a>
</div>
<?php } ?>
<?php if (CurrentUserImageBase64()) { ?>
<div class="image" style="float:right">
<img src="data:image/png;base64,<?= CurrentUserImageBase64() ?>" class="img-circle ew-user-image" alt="">
</div>
<?php } ?>
</div>
<?php } ?>
</script>
However, it would be much nicer if the user's photo would in fact replace the user icon (represented by ew-nav-link-user), whilst still maintaining the drop-down functionality.
Is there a way to do that with modifying the template?
v2023.13
Re: Replace user icon at top right with user avatar
Posted: Sat Mar 02, 2024 3:52 pm
by philmills
Essentially it looks like I need to replace <i class="fa-solid fa-user"></i> in layout.php with my own code, but Ideally I want to do this without modding the template files for easier upgrading
<li class="nav-item dropdown text-body">
<a id="ew-nav-link-user" class="nav-link ew-user" data-bs-toggle="dropdown" href="#">
<!--<i class="fa-solid fa-user"></i>-->
<!-- new code -->
<?php if (CurrentUserImageBase64()) { ?>
<img src="data:image/png;base64,<?= CurrentUserImageBase64() ?>" class="img-circle ew-user-image" alt="">
<?php } else {
<i class="fa-solid fa-user"></i>
} ?>
<!-- end new code -->
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="ew-nav-link-user">
<div class="dropdown-header">
<i class="fa-solid fa-user me-2"></i>{{:currentUserName}}
</div>
<div class="dropdown-divider"></div>
{{if hasPersonalData}}
<a class="dropdown-item" id="personal-data"{{props personalData}} data-{{:key}}="{{>prop}}"{{/props}}>{{:personalDataText}}</a>
{{/if}}
{{if canChangePassword}}
<a class="dropdown-item" id="change-password"{{props changePassword}} data-{{:key}}="{{>prop}}"{{/props}}>{{:changePasswordText}}</a>
{{/if}}
{{if enable2FAText}}
<a class="dropdown-item{{if !enable2FA}} d-none{{/if}}" id="enable-2fa" data-ew-action="enable-2fa">{{:enable2FAText}}</a>
{{/if}}
{{if backupCodes}}
<a class="dropdown-item{{if !showBackupCodes}} d-none{{/if}}" id="backup-codes" data-ew-action="backup-codes">{{:backupCodes}}</a>
{{/if}}
{{if disable2FAText}}
<a class="dropdown-item{{if !disable2FA}} d-none{{/if}}" id="disable-2fa" data-ew-action="disable-2fa">{{:disable2FAText}}</a>
{{/if}}
{{if canLogout}}
<div class="dropdown-divider"></div>
<div class="dropdown-footer text-end py-0">
<a class="btn btn-default"{{props logout}} data-{{:key}}="{{>prop}}"{{/props}}>{{:logoutText}}</a>
</div>
{{/if}}
</div>
</li>
Re: Replace user icon at top right with user avatar (v2023)
Posted: Sat Mar 02, 2024 10:06 pm
by arbei
philmills wrote:
it looks like I need to replace <i class="fa-solid fa-user"></i> in layout.php...
You may use "replaceAll" (change the your data-target also) instead of "prependTo".
Re: Replace user icon at top right with user avatar (v2023)
Posted: Sun Mar 03, 2024 9:53 pm
by philmills
Awesome!
I added this to Page_Foot
<?php if (CurrentUserImageBase64()) { ?>
<script type="text/html" class="ew-js-template" data-name="myDropdown" data-method="replaceAll" data-target="#ew-nav-link-user" data-seq="10">
<a id="ew-nav-link-user" class="nav-link ew-user" data-bs-toggle="dropdown" href="#">
<img src="data:image/png;base64,<?= CurrentUserImageBase64() ?>" class="rounded-circle ew-user-image" alt="">
</a>
</script>
<?php } ?>
so if the user has a photo it will replace the standard person icon
notice the use of bootstrap class rounded-circle to make the user photo circular
I also added some positioning tweaks to user styles for the photo:
img.rounded-circle.ew-user-image {
position: absolute;
top: -5px;
right: 0px;
}