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 bu...
  • 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>