User Macro: How to display User Profile Avatar

[Robin Taylor]

Hello! First post here :)

I´ve written a Macro that allows to pick a User and to display further information (position, hobbies, mobile number...). The information is afterwards displayed in a profile card. The profile card was made by piecing together different AUI elements. Besides the $param sections everything else is HTML / CSS.

It actually works great and looks good, except for the Profile Avatar, which is a cheap inclusion of the Profile Picture Macro.

 <ac:structured-macro ac:name="profile-picture">
  <ac:parameter ac:name="User">
    $paramUsername
  </ac:parameter>
</ac:structured-macro>

This is handy because I don´t have to give up on the "follow" feature etc. thats available by mouseover, but I don´t quite understand how I can manipulate the picture format (increase size, round edges...).

How would you go about including the Avatar of the chosen User?

Thanks in advance for your input on this matter!

Cheers, Robin

[Davin Studer]

This is probably how I would do it. You could wrap the profile picture macro in a div with a class of your choosing. Then you can also add styles in the user macro to style the picture and over-ride any existing styles you do not want.

One thing to note below I am adding the style in via JavaScript on purpose. There is an odd behavior that I have found that if you put a style element into a user macro the top nav bar will no longer float at the top of the page when you scroll. It's odd and I don't know why it happens. However, if you add the style in via script after page load that issue doesn't manifest.

<script type="text/javascript">
//<![CDATA[

//The styles to add.
var style = `
<style type="text/css">
.myProfilePicture {
 /* Insert your styles here */
}
</style>`;

//Insert the styles into the page on ready
AJS.toInit(function(){
    AJS.$('header').append(style);
});

//]]>
</script>

<div class="myProfilePicture">
    <ac:structured-macro ac:name="profile-picture">
        <ac:parameter ac:name="User">
            $paramUsername
        </ac:parameter>
    </ac:structured-macro>
</div>