Replace user icon at top right with user avatar (v2023)

[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

[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>

[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".

[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;
}