Custom Profile Fields - Ordering and Display

Mixed forum with code snippets, guides and styles
Forum rules
Everything in this forum is for everybody
But support only for Donators!
Post Reply
User avatar
Stoker
Site Admin
Site Admin
Posts: 3540
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:
Contact Stoker

Custom Profile Fields - Ordering and Display

Post by Stoker »

Custom Profile Fields - Ordering and Display
Written by Stoker

Set the order and display of your Custom Profile Fields in Topic and Profile page.
With this guide you will learn how to:
  • Set your custom profile fields in a specific order
  • Use them as links
  • Use them to display an image
  • Define if you want display them in topic and/or profile
  • Define where to show them in topic and profile
Custom Profile Fields is made in the Admin Panel under the "USERS AND GROUPS" tab.

Lets use this board as example. At this time we have 6 custom profile fields:


BBCodes
Favourite BBCode
Real Name (made as link to wikipedia)
Alias
MyInfo (placed next to the username - popup with highslide)
Kudo Rank (linked image to the users Ohloh profile. Only visible in the Profile)

Notice the names in bold. We will use them when displaying the custom profile field.
[center]Custom Profile Fields in topics[/center]

First we will find the code that makes all the custom profile fields in the topic.
Its found in viewtopic_body.html:

Code: Select all

<!-- BEGIN custom_fields -->
			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
		<!-- END custom_fields -->
Yes, that tiny piece of code is actually doing it all. And it is this we will make some changes to. It is that code we will replace.
To display the custom profile fields we will have to put them in beteen this:

Code: Select all

<!-- BEGIN custom_fields -->
         your custom profile fields here....
      <!-- END custom_fields -->
BBCodes
This is the exact piece of code that outputs the BBCodes custom profile field:

Code: Select all

<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "BBCodes" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
                <!-- ENDIF -->
So for displaying this single field we use this code:

Code: Select all

<!-- BEGIN custom_fields -->
         <!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "BBCodes" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
                <!-- ENDIF -->
      <!-- END custom_fields -->
This will only show a single custom profile field. Lets add some more.
Favourite BBCode
This is the exact piece of code that outputs the Favourite BBCode custom profile field:

Code: Select all

<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
		<!-- END custom_fields -->
We will add this to our existing 1 custom profile field. We only have to add this part of the code:

Code: Select all

<!-- BEGIN custom_fields -->
        
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "BBCodes" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
                <!-- ENDIF -->
		
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
      
	  <!-- END custom_fields -->
Real Name
The 3. field we will add is a link to wikipedia. Its opening in a new window.
This is the exact code to display this custom profile field:

Code: Select all

<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Real Name" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> <a href="http://en.wikipedia.org/wiki/{postrow.custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{postrow.custom_fields.PROFILE_FIELD_VALUE}</a></dd>
				<!-- ENDIF -->
      <!-- END custom_fields -->
Now the final code to use will look like this:

Code: Select all

<!-- BEGIN custom_fields -->
        
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "BBCodes" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
                <!-- ENDIF -->
		
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
				
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Real Name" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> <a href="http://en.wikipedia.org/wiki/{postrow.custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{postrow.custom_fields.PROFILE_FIELD_VALUE}</a></dd>
				<!-- ENDIF -->
      
	  <!-- END custom_fields -->
Alias
The 4. field we will add is simple, we have done this before.
This is the exact code to display this custom profile field:

Code: Select all

<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Alias" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
When this is added we will end up with this:

Code: Select all

<!-- BEGIN custom_fields -->
        
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "BBCodes" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
                <!-- ENDIF -->
		
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
				
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Real Name" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> <a href="http://en.wikipedia.org/wiki/{postrow.custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{postrow.custom_fields.PROFILE_FIELD_VALUE}</a></dd>
				<!-- ENDIF -->
				
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Alias" -->
                                        <dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
      
	  <!-- END custom_fields -->
MyInfo
The 5. field is more exiting. We will place it next to the username and use the highslide script to show a popup with the custom profile field info.
This is NOT a guide how to use highslide, just an example
The code used the the Info field:

Code: Select all

<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "MyInfo" -->
                                         <span style="color: {postrow.POST_AUTHOR_COLOUR}"> | </span><a style="color: {postrow.POST_AUTHOR_COLOUR}" href="#" onclick="return hs.htmlExpand(this, { contentId: '{postrow.POST_AUTHOR}-{postrow.POST_ID}', slideshowGroup: '{postrow.POST_AUTHOR}', width: '400' } )" title="Info">Info</a>
<div class="highslide-maincontent" id="{postrow.POST_AUTHOR}-{postrow.POST_ID}">
	<div class="highslide-header">
  <ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Move</a>
   </li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this)">Close</a>&nbsp;

   </li>
		</ul>
	</div>
	<div><hr /><table border="0" width="100%">
    <tr>
      <td><!-- IF postrow.POSTER_AVATAR -->
				<a href="{postrow.U_PROFILE}">{postrow.POSTER_AVATAR}</a>
			<!-- ELSE -->
<a href="{postrow.U_PROFILE}"><img src="{T_THEME_PATH}/images/no_avatar.gif" width="90" height="90" alt="Default Avatar" /></a>
<!-- ENDIF --></td>
      <td style="text-align: center; width:100%;"><!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->{postrow.RANK_IMG}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF --><b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="font-size:12px; color: {postrow.POST_AUTHOR_COLOUR}" <!-- ENDIF -->>{postrow.RANK_TITLE}</b><!-- ENDIF -->
	  </td><td valign="top" style="text-align: right;">{postrow.ONLINE_IMG}</td>
    </tr>
</table><hr />
			<b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="color: {postrow.POST_AUTHOR_COLOUR}" <!-- ENDIF -->>{postrow.POST_AUTHOR} is saying:</b><br />
        {postrow.custom_fields.PROFILE_FIELD_VALUE}</div>
</div>
<!-- ENDIF -->
Because we are going to display this field another place, we have to wrap it in these tags:

Code: Select all

<!-- BEGIN custom_fields -->
      <!-- END custom_fields -->
So we will end up with this:

Code: Select all

<!-- BEGIN custom_fields -->				
				<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "MyInfo" -->
                                         <span style="color: {postrow.POST_AUTHOR_COLOUR}"> | </span><a style="color: {postrow.POST_AUTHOR_COLOUR}" href="#" onclick="return hs.htmlExpand(this, { contentId: '{postrow.POST_AUTHOR}-{postrow.POST_ID}', slideshowGroup: '{postrow.POST_AUTHOR}', width: '400' } )" title="Info">Info</a>
<div class="highslide-maincontent" id="{postrow.POST_AUTHOR}-{postrow.POST_ID}">
	<div class="highslide-header">
  <ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Move</a>
   </li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this)">Close</a>&nbsp;

   </li>
		</ul>
	</div>
	<div><hr /><table border="0" width="100%">
    <tr>
      <td><!-- IF postrow.POSTER_AVATAR -->
				<a href="{postrow.U_PROFILE}">{postrow.POSTER_AVATAR}</a>
			<!-- ELSE -->
<a href="{postrow.U_PROFILE}"><img src="{T_THEME_PATH}/images/no_avatar.gif" width="90" height="90" alt="Default Avatar" /></a>
<!-- ENDIF --></td>
      <td style="text-align: center; width:100%;"><!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->{postrow.RANK_IMG}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF --><b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="font-size:12px; color: {postrow.POST_AUTHOR_COLOUR}" <!-- ENDIF -->>{postrow.RANK_TITLE}</b><!-- ENDIF -->
	  </td><td valign="top" style="text-align: right;">{postrow.ONLINE_IMG}</td>
    </tr>
</table><hr />
			<b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="color: {postrow.POST_AUTHOR_COLOUR}" <!-- ENDIF -->>{postrow.POST_AUTHOR} is saying:</b><br />
        {postrow.custom_fields.PROFILE_FIELD_VALUE}</div>
</div>
<!-- ENDIF -->
<!-- END custom_fields -->
and we will insert this on a new line after:

Code: Select all

<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
Again, this is just an example. You can use it in another place.


Kudo Rank
This one is not displayed in the topics, so no code is added here.
[center]Custom Profile Fields in profiles[/center]

First we will find the code that makes all the custom profile fields in the profile.
Its found in memberlist_view.html:

Code: Select all

<!-- BEGIN custom_fields --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- END custom_fields -->
This is only a little different from displaying the fields in the topics. Same procedure, but a little change in the code. This is the code we will replace.
BBCodes
The code used for this field is this:

Code: Select all

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "BBCodes" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->
To make it display the final code:

Code: Select all

<!-- BEGIN custom_fields -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "BBCodes" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- END custom_fields -->
Favourite BBCode
The code used for this field is this:

Code: Select all

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->
To make it display with the 1. field, the final code is:

Code: Select all

<!-- BEGIN custom_fields -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "BBCodes" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- END custom_fields -->
Real Name
Link to wikipedia, opens in new window
The code used for this field is this:

Code: Select all

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Real Name" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd><a href="http://en.wikipedia.org/wiki/{custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{custom_fields.PROFILE_FIELD_VALUE}</a></dd><!-- ENDIF -->
To make it display with the other fields, the final code is:

Code: Select all

<!-- BEGIN custom_fields -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "BBCodes" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Real Name" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd><a href="http://en.wikipedia.org/wiki/{custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{custom_fields.PROFILE_FIELD_VALUE}</a></dd><!-- ENDIF -->

<!-- END custom_fields -->
Alias
The code used for this field is this:

Code: Select all

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Alias" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->
To make it display with the other fields, the final code is:

Code: Select all

<!-- BEGIN custom_fields -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "BBCodes" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Favourite BBCode" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Real Name" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd><a href="http://en.wikipedia.org/wiki/{custom_fields.PROFILE_FIELD_VALUE}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">{custom_fields.PROFILE_FIELD_VALUE}</a></dd><!-- ENDIF -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Alias" --><dt>{custom_fields.PROFILE_FIELD_NAME}:</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd><!-- ENDIF -->

<!-- END custom_fields -->
MyInfo
This custom profile is not displayed in the profile. So nothing is added.
Kudo Rank
A linked image to the users ohloh profile. Placed under the rank image.
The code used for this field is this:

Code: Select all

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Kudo Rank" --><br /><dd style="text-align: center;"><a href="https://www.ohloh.net/accounts/{postrow.custom_fields.PROFILE_FIELD_VALUE}?ref=Rank" title="{postrow.custom_fields.PROFILE_FIELD_NAME}"><img src="https://www.ohloh.net/accounts/{postrow.custom_fields.PROFILE_FIELD_VALUE}/widgets/account_detailed.gif" style="width:191px; height:35px;" alt="" /></a></dd><!-- ENDIF -->
and because we are placing this another place, we have to wrap in in this:

Code: Select all

<!-- BEGIN custom_fields --><!-- END custom_fields -->
So the final code to insert is:

Code: Select all

<!-- BEGIN custom_fields -->

<!-- IF custom_fields.PROFILE_FIELD_NAME eq "Kudo Rank" --><br /><dd style="text-align: center;"><a href="https://www.ohloh.net/accounts/{postrow.custom_fields.PROFILE_FIELD_VALUE}?ref=Rank" title="{postrow.custom_fields.PROFILE_FIELD_NAME}"><img src="https://www.ohloh.net/accounts/{postrow.custom_fields.PROFILE_FIELD_VALUE}/widgets/account_detailed.gif" style="width:191px; height:35px;" alt="" /></a></dd><!-- ENDIF -->

<!-- END custom_fields -->
To place it right under the rank image, add it after this code:

Code: Select all

<!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
[center]Other examples[/center]

In this section I will add more examples as we go along.
YouTube Favourite
Lets add our YouTube Favourite, but only in profile.
First you need to create the custom profile field in ACP

Open styles/prosilver/template/memberlist_view.html
Find:

Code: Select all

<!-- IF SIGNATURE -->
Before add:

Code: Select all

<!-- BEGIN custom_fields -->
<!-- IF custom_fields.PROFILE_FIELD_NAME eq "YouTube Favourite" -->
<div class="panel bg1">
	<div class="inner"><span class="corners-top"><span></span></span>

		<h3>{custom_fields.PROFILE_FIELD_NAME}</h3>

		<div style="text-align:center;"><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/{custom_fields.PROFILE_FIELD_VALUE}"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/{custom_fields.PROFILE_FIELD_VALUE}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></div>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
<!-- END custom_fields -->
Here you go, your favourite youtube video in your profile
Board rules! No PM support
Top
Post Reply

Return to “Snippets”