Forum Discussion

iftomkins's avatar
iftomkins
Maven
11 years ago

Mobile profile header on My Kudos page

I'm modifying our mobile site, and I want to have this component <component id="profile-header"/> appear at the top of the MobileMyKudosPage (both received and given).

 

I've added it to the XML but it does not appear.

 

I already have this code written for the menu, which displays the avatar, rank and link to profile page:

 

 

<#assign avatarUrl = rest("/users/id/${user.id}/profiles/avatar/url").value />
<#assign rankingName = rest("users/id/${user.id}/ranking/name").value />
<#assign profileUrl = "/t5/user/viewprofilepage/user-id/${user.id}" />

 

    <a class="menuProfile" href="${profileUrl}">         <#-- User profile URL -->
        <img src="${avatarUrl}" />                        <#-- User avatar -->
        ${rankingName}                                    <#-- User ranking name -->
    </a>

 

 

However, it does not display the 2 additional icons that sometimes appear next to the name, your Rank icon (like Moderator or Admin), and the 2nd special icon that company representatives can have. (screenshot)

 


How can I either:

 

A) make the profile header widget work on the mobilemykudos page, or

B) modify my above code to output those additional 2 icons

 

Thanks!

  • ChiaraS's avatar
    ChiaraS
    11 years ago

    Hi,

     

    you can use the following component:

    <@component id="common.widget.user-name" user="conv:${user.login}" /> 

     

    it take care of showing the username, linking to the user profile page and adds the left and right rank icons if present.

    Just did a quick test and seems to work fine on mobile as well...

  • ChiaraS's avatar
    ChiaraS
    Lithium Alumni (Retired)
    11 years ago

    Hi,

     

    you can use the following component:

    <@component id="common.widget.user-name" user="conv:${user.login}" /> 

     

    it take care of showing the username, linking to the user profile page and adds the left and right rank icons if present.

    Just did a quick test and seems to work fine on mobile as well...

    • iftomkins's avatar
      iftomkins
      Maven
      11 years ago

      Perfect--thank you. I used the widget you suggested, combined with my own freemarker code, and inserted it into the HTML structure of the profile header component. Here's the final custom component code, which outputs the profile header anywhere on the site! :)

       

       

      <#assign avatarUrl = rest("/users/id/${user.id}/profiles/avatar/url").value />
      <#assign rankingName = rest("users/id/${user.id}/ranking/name").value />
      <#assign profileUrl = "/t5/user/viewprofilepage/user-id/${user.id}" />

      <div class="lia-quilt-row lia-quilt-row-standard lia-mobile-profile-header lia-component-profile-header">
          <div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single avatar-name-rank-container">
              <div class="lia-quilt-column-alley lia-quilt-column-alley-single">
                  <div class="profile-user-avatar-container">
                      <div class="custom-avatar-wrapper">
                          <div class="UserAvatar lia-user-avatar lia-component-common-widget-user-avatar">
                              <a class="UserAvatar lia-link-navigation" tabindex="-1" target="_self" id="link_1" href="${profileUrl}"><img class="lia-user-avatar-message" title="${user.login}"  src="${avatarUrl}"></a>
                          </div>
                      </div>
                  </div>
              <div class="lia-user-attributes">
                  <span class="UserName lia-user-name">
                      <@component id="common.widget.user-name" user="conv:${user.login}"/>
                      <div class="lia-user-rank">${rankingName}</div>
                  </span>
                  </div>
              </div>
          </div>
      </div>

       

    • iftomkins's avatar
      iftomkins
      Maven
      11 years ago

      Hi Chiara, one last question.

       

      I'm trying to output that same username with icons code using the widget, but this time its in a slide-over menu, and all the additional HTML formatting around it is making it complicated. Is there a way to output the information but strip all the HTML that comes with it?

       

      Thanks!

      • ChiaraS's avatar
        ChiaraS
        Lithium Alumni (Retired)
        11 years ago

        Hi,

         

        I don't think there's a way to use a standard component for that, you will need to create a custom component. Here's a similar example I did (may need some adjustments):

         

        <#assign user_rank = rest("/users/id/${user.id}/ranking")>
<span class="UserName lia-user-name">
	<#if user_rank.ranking.display.left_image?? && !(user_rank.ranking.display.left_image.@null[0]?? && user_rank.ranking.display.left_image.@null=="true")>
		<img class="lia-user-rank-icon-left" title="${user_rank.ranking.name}" alt="${user_rank.ranking.name}" src="${user_rank.ranking.display.left_image.url}">
	</#if>
	<a class="lia-link-navigation lia-page-link lia-user-name-link" style="color: #${user_rank.ranking.display.color}" target="_self" href="/t5/user/viewprofilepage/user-id/${user.id}">${user.login}</a>
	<#if user_rank.ranking.display.right_image?? && !(user_rank.ranking.display.right_image.@null[0]?? && user_rank.ranking.display.right_image.@null=="true")>
		<img class="lia-user-rank-icon-right" title="${user_rank.ranking.name}" alt="${user_rank.ranking.name}" src="${user_rank.ranking.display.right_image.url}">
	</#if>
</span>