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

XF 1.2 Cover photo/art?

Discussion in 'Styling and Customization Questions' started by BrittonG, Jun 24, 2014.

  1. BrittonG

    BrittonG Member

    Is it possible to add like a cover photo/art to my forums so that users can put a picture BEHIND their profile picture? For example: Twitter/Facebook.


    Thanks!
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can use user fields.

    Create a field where users can enter an image URL:

    Admin CP -> Users -> Custom User Fields

    Then edit this template:

    Admin CP -> Appearance -> Templates -> member_view

    Near the top, add the red code:

    Code:
    <xen:require css="member_view.css" />
    <xen:require js="js/xenforo/quick_reply_profile.js" />
    
    <div style="background-image: url('{$user.customFields.fieldId}');" class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    
    	<div class="mast">
    		<div class="avatarScaler">
    			<xen:if is="{$visitor.user_id} == {$user.user_id}">
    				<a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
    					<img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
    				</a>
    			<xen:else />
    
    You must specify the fieldId of the custom field you created. That will use the value of that custom field as the background image on profile pages.

    This will require custom styling on your part to get it looking how you want. But that is the general idea.
     
    Glen Anderson and RoldanLT like this.
  3. BrittonG

    BrittonG Member

    @Jake Bunce Thank you so much!

    I've managed to add space for the cover photo & I've got a custom user field setup but I can't figure out how to make it so they can click a button and upload a picture like how the user uploads an avatar. Please help me with this!
     
  4. RoldanLT

    RoldanLT Well-Known Member

  5. BrittonG

    BrittonG Member

    Excellent. Thank you, RoldanLT. I've looked all over for an add-on like that.

    Thanks to both of you for helping me figure this out. :)
     

Share This Page