1. 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

Discussion in 'Styling and Customization Questions' started by ArnyVee, Mar 18, 2012.

  1. ArnyVee

    ArnyVee Well-Known Member

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


    ....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?
    RobinHood likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> member_view

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

    It can be used inside of HTML to define the location of an image:

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

    ArnyVee Well-Known Member

    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?
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can use conditions:

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

    ArnyVee Well-Known Member

    Figured that should be straight forward. Thanks Jake! :)
  6. ArnyVee

    ArnyVee Well-Known Member

    Jake, would I include it underneath here?

        <xen:breadcrumb href="{xen:link full:members, $user}">{$user.username}</xen:breadcrumb>
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For the position shown in your screenshot it would be:

    		<xen:hook name="member_view_sidebar_end" params="{xen:array 'user={$user}'}" />
    		<xen:include template="ad_member_view_sidebar_bottom" />
    	<div class="main">
    		<div class="section primaryUserBlock">
    			<div class="mainText secondaryContent">
    				<div class="followBlock">
    						<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 is="{$canWarn}">
    							<li><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a></li>
    ArnyVee likes this.
  8. ArnyVee

    ArnyVee Well-Known Member

    So, just to confirm.... I would take the first field in the pic here ....


    ....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?
  9. Sheldon

    Sheldon Well-Known Member

    Arny, this is awesome. This would be great for anyone to have. (y)
    ArnyVee likes this.
  10. ArnyVee

    ArnyVee Well-Known Member

    Thanks. As soon as I get it working it will be great for everyone (especially me) ;)

    For some reason I'm missing something really basic and it's not allowing the picture to display.
  11. ArnyVee

    ArnyVee Well-Known Member

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


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

    Sheldon Well-Known Member


    With easy to follow instructions!! Haha
    ArnyVee likes this.
  13. Travis

    Travis Active Member

    Did you get this working Army? Would love to know how as this would be great on my site!
  14. Sheldon

    Sheldon Well-Known Member

  15. Sheldon

    Sheldon Well-Known Member

    Travis likes this.
  16. Travis

    Travis Active Member

  17. Sheldon

    Sheldon Well-Known Member

    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.
  18. Travis

    Travis Active Member

    Actually, scratch that. Found something.
  19. Sheldon

    Sheldon Well-Known Member

    That site is a piracy site. (n)

    Please remove the URL.

  20. Travis

    Travis Active Member

    oops....didn't dig enough :X3: . Apologies. link removed

Share This Page