User Image and User Info Alignment

PHPMaker General Discussion (PHPMaker)
1

By default the User Image and User Info are showing in Horizontal means Image on Left and Info on right.
the original code is

<div class="user-panel mt-3 pb-3 mb-3 d-flex" data-isset="true">
	<div class="image">
		<>
	</div>
	<div class="info">
		<>
	</div>
</div>

I want this to be display in Vertical means first Image and below Info. For that I have to remove the “d-flex” from the class user-panel

So on the Global Footer I put th code as

<script>
        loadjs.ready("head", function () {
            $(".user-panel").removeClass("d-flex");
        });
    </script>

This display the image and below it Info correct.
The issue is when the page load it first show in the horizontally and next change to Vertically. when some one open the page in low speed internet it is not looking nice.

Is there any way to show directly as vertically.

2

You may use Auto JS Template to replace the div.user-panel by your own.

3

I try as

<script type="text/html" class="ew-js-template" data-name="user-panel" data-method="replaceAll" data-target=".user-panel" data-seq="0">
	<div class="user-panel mt-3 pb-3 mb-3" data-isset="true">
		<div class="image">
			<img src="" class="img-circle ew-user-image" alt="">
		</div>
		<div class="info">
			<div class="fw-bold text-dark text-white text-center"><?= CurrentUserID() ?></div>
			<div class="fw-bold text-dark text-white text-center"><?= CurrentUserInfo("OutletName") ?></div>
			<div class="fw-bold text-dark text-white text-center"><?= CurrentUserLevelName() ?></div>
			<div class="fw-bold text-dark text-white text-center"><?= CurrentUserInfo("Mobile") ?></div>
		</div>
	</div>
</script>

Here how can I get the Image data for src=“”
and the issue is still there, first it display the way phpmaker generated and after that it replace it. so there is a flicking on the display.

4
  1. You may refer to the original HTML code on how to show the image by the src attribute,
  2. You replace the original content on page load, so you’ll see the original HTML for a brief moment first. If you don’t want to see it first, you may add CSS (under HTML → Styles → User) to hide it first, e.g.
.user-panel:not(.my-class) {
  display: none !important;
}

Then in your own HTML you add your class my-class to your div.user-panel so above CSS becomes valid and your div will show.

5

Thanks for the help. Now it is perfectly working using the css and the ew-js-template

.user-panel:not(.my-class) {
  display: none !important;
}

<script type="text/html" class="ew-js-template" data-name="compinfo" data-method="replaceAll" data-target=".user-panel" data-seq="10">
    	<?php if (IsLoggedIn()) { ?>
    		<div class="user-panel mypanel text-center py-2">
    			<a class="btn btn-xs btn-link ew-row-link ew-edit" data-table="UpdatePhoto" data-caption="Edit" data-ew-action="modal" data-action="edit" data-ajax="false" data-url="<?= BasePath()."/UpdatePhotoEdit/".CurrentUserID() ?>" data-btn="SaveBtn">
    			<?php if (CurrentUserImageBase64()) { ?>
    			<div class="image">
    				<img src="data:image/png;base64,<?= CurrentUserImageBase64() ?>" class="img-circle ew-user-image" alt="">
    			</div>
    			<?php } else { ?>
    			<div class="image">
    				<img src="data:image/png;base64,<?= base64_encode(file_get_contents("images/avatarmale.png")) ?>" class="img-circle ew-user-image" alt="">
    			</div>
    			<?php } ?>
    			</a>
    			<?php if (GetClientVar("login", "currentUserName")) { ?>
    			<hr class="my-2" style="border-top: 1px solid #dee2e6; width: 60%; margin: 0 auto;">
    			<div class="details mt-2">
    				<div class="fw-bold text-white text-center small"><?= CurrentUserID() ?></div>
    				<div class="fw-bold text-white text-center small"><?= CurrentUserInfo("OutletName") ?></div>
    				<div class="fw-bold text-white text-center small"><?= CurrentUserLevelName() ?></div>
    				<div class="fw-bold text-white text-center small"><?= CurrentUserInfo("Mobile") ?></div>
    			</div>
    			<?php } ?>
    		</div>
    	<?php } ?>
    </script>

Now I have put an option to change the profile picture by creating a edit page “UpdatePhotoEdit” the photo is change but it does not reflect to the user-panel. It effect only after logout and login again. how can I reflect it as soon as when change or udated.

6

You are probably using older versions. If so, you may search “Set up user image” in the template and borrow the code to update the user image after editing your image.