• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Changing profiles to something like Facebook Timeline display

ArnyVee

Well-known member
#1
So, I've had some custom work done for my upcoming sites that I'm bringing to xF. Part of the customization is making the site more "social" by adding the "TagMe", an updated "Recent Activity" page and now I'd like to start working on the profile page setup/display.

The first step is I'd like to have the ability to add a horizontal/panoramic style picture at the top of the profile page which would make it a 'somewhat' similar layout to the new Facebook Timeline profile pages. I'm toying with the idea of having a set number of pictures available to choose from that the folks can select for themselves. Could I use the custom profile fields for that and just put some code at the top of the profile page? This is what I'd like to see....

Add_Image_in_Profile.jpg

....where would I look (template) to edit this? And, what sort of code would I use to display the results of the custom user profile field?

Would it be difficult to have a picture uploaded and added into that spot or would the custom user profile field be the easiest/cost-effective approach?
 

Jake Bunce

XenForo moderator
Staff member
#2
Admin CP -> Appearance -> Templates -> member_view

You can use this code to reference the value of a custom profile field:

Code:
{$user.customFields.field_id}
It can be used inside of HTML to define the location of an image:

Code:
<img src="path/to/images/{$user.customFields.field_id}.gif" />
But this doesn't facilitate uploading of custom images by the users.
 

ArnyVee

Well-known member
#3
Thanks Jake.

I've been using custom profile fields with vB for many years. But, I have yet to start using it on xF. I'll have to give it a shot. Thanks :)

By the way, if I wanted to display two or three smaller pictures, would I simply add several instances of the "img scr" portion of the code? I know that I'd change the field_id, of course, but would I add a space (&nbsp;) in between each.

Also, if one of the options were not selected, would there be a part of the code that we'd have to add to ensure that spaces were not added unnecessarily?

For example, if we had Picture 1 (Choice A), Picture 2 (Choice B) and Picture 3 (Choice C) as possible pictures to display but Choice B was not selected, how would that code look?
 

Jake Bunce

XenForo moderator
Staff member
#4
You can use conditions:

Code:
<xen:if is="{$user.customFields.field_id1}">
	<img src="path/to/images/{$user.customFields.field_id1}.gif" />
</xen:if>
<xen:if is="{$user.customFields.field_id2}">
	<img src="path/to/images/{$user.customFields.field_id2}.gif" />
</xen:if>
<xen:if is="{$user.customFields.field_id3}">
	<img src="path/to/images/{$user.customFields.field_id3}.gif" />
</xen:if>
 

Jake Bunce

XenForo moderator
Staff member
#7
For the position shown in your screenshot it would be:

Code:
		<xen:hook name="member_view_sidebar_end" params="{xen:array 'user={$user}'}" />
		
		<xen:include template="ad_member_view_sidebar_bottom" />

	</div>

	<div class="main">

		{$user.customFields.radiofield}

		<div class="section primaryUserBlock">
			<div class="mainText secondaryContent">
				<div class="followBlock">
					<ul>
						<xen:follow user="$user" title="" tag="li" />
						<xen:if is="{xen:helper isIgnored, $user.user_id}">
							<li><a href="{xen:link members/unignore, $user}" class="FollowLink">{xen:phrase unignore}</a></li>
						<xen:elseif is="{$canIgnore}" />
							<li><a href="{xen:link members/ignore, $user}" class="FollowLink">{xen:phrase ignore}</a></li>
						</xen:if>
						<xen:if is="{$canWarn}">
							<li><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a></li>
						</xen:if>
					</ul>
 

ArnyVee

Well-known member
#8
You can use conditions:

Code:
<xen:if is="{$user.customFields.field_id1}">
<img src="path/to/images/{$user.customFields.field_id1}.gif" />
</xen:if>
<xen:if is="{$user.customFields.field_id2}">
<img src="path/to/images/{$user.customFields.field_id2}.gif" />
</xen:if>
<xen:if is="{$user.customFields.field_id3}">
<img src="path/to/images/{$user.customFields.field_id3}.gif" />
</xen:if>
So, just to confirm.... I would take the first field in the pic here ....

ProfileField.jpg

....and then I would change the "field_id1" to "AKL1", correct?

Then, I would change the fields in the image path to "$user.customFields.field_id1" to "$user.customFields.AKL1", right?

I've done this and then added the code in the quote here in this post into the member_view template, but it's not displaying.

What am I missing?
 

ArnyVee

Well-known member
#11
Okay, I got it.

It was VERY simple, so simple that I was missing it. LOL

Just have to add the profile field ID that you used here....

ProfilePanoramic.jpg

....and include that in the code like this ....
Code:
<xen:if is="{$user.customFields.profilepano}">
    <img src="path/to/images/{$user.customFields.profilepano}.gif" />
</xen:if>
 

Sheldon

Well-known member
#17
Thanks for that stew! Although, is there any way to allow users to upload their own image? seems a bit pointless if there are only set images.
In the discussion thread to that add-on, I think 0xy found a way to do it. I haven't tested or tried that yet.