Log in

View Full Version : Profile Enhancements - COVER image above profile (based on the profile picture)

vladig
10-25-2012, 10:00 PM
Hey.

This is my second mod and this mod allows to set a COVER image above the, Just like Facebook. This mod is based on a system of "profile picture" that came with the system. Because it is based on the system profile picture, if other users have used image profile, the COVER image will stretch so don't forget to tell your visitors about thet changes.

How to do it?
Open the file "MEMBERINFO", delete it all and write instead:

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
{vb:raw headinclude}
<title>{vb:rawphrase view_profile}: {vb:raw prepared.username} - {vb:raw vboptions.bbtitle}</title>
<vb:if condition="$userinfo['userid'] == $bbuserinfo['userid']">
<script type="text/javascript">
vbphrase['edit_value_js'] = "{vb:rawphrase edit_value_js}";
vbphrase['server_failed_respond_try_again'] = "{vb:rawphrase server_failed_respond_try_again}";
</script>
<script type="text/javascript" src="clientscript/vbulletin_profilefield_edit.js?v={vb:raw vboptions.simpleversion}"></script>
</vb:if>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_generic.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_visitormessage.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="clientscript/vbulletin_activitystream.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">

<!--
var isIE7 = navigator.userAgent.toLowerCase().indexOf('msie 7') != -1;
var isIE = navigator.userAgent.toLowerCase().indexOf('msie') != -1;
var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;
var THISUSERID = {vb:raw userinfo.userid};


vB_XHTML_Ready.subscribe(init_PostBits_Lite);

function init_PostBits_Lite()
{
var postbits = YAHOO.util.Dom.getElementsByClassName("postbit_lite", "li", "postlist");
for (var i = 0; i < postbits.length; i++)
{
new PostBit_Lite(postbits[i]);
}
}

function PostBit_Lite(postbit)
{
this.postbit = YAHOO.util.Dom.get(postbit);
this.postid = postbit.id.substr("piccom_".length);
this.inlinemod = new InlineModControl(this.postbit, this.postid, "imodsel");
}

function getParentElement(starterElement, classPattern, testTagName) {
var currElement = starterElement;
var foundElement = null;
while(!foundElement && (currElement = currElement.parentNode)) {
if ((classPattern && (currElement.className.indexOf(classPattern) != -1)) || (testTagName && (testTagName.toLowerCase() == currElement.tagName.toLowerCase())))
{
foundElement = currElement;
}
}
//go up the parentNode tree until found element with matching className
return foundElement;
}

//getParentElement
function tabViewPicker(anchorObject) {
var clickedTabId = null;
var tabtree = getParentElement(anchorObject,"tabslight");
var anchorInventory = tabtree.getElementsByTagName("a");

var tabIds = [];
for (var i=0; (currAnchor = anchorInventory[i]); i++) {
var anchorId = currAnchor.href.substring(currAnchor.href.indexOf("#") + 1, currAnchor.href.length);
var parentDd = getParentElement(currAnchor,null,"dd");
if (currAnchor == anchorObject) {
clickedTabId = anchorId;
parentDd.className = "userprof_module";
}
else
{
parentDd.className = "userprof_moduleinactive";
}
tabIds.push(anchorId);
}

//loop thru anchors to gather all tab IDs and set appropriate selected status
for (var j=0; (currTabId = tabIds[j]); j++) {
var elem = document.getElementById("view-" + currTabId);
if (!elem) {continue;}
if (currTabId == clickedTabId) {
//elem.className="selected_view_section";
YAHOO.util.Dom.replaceClass(elem, "view_section", "selected_view_section");
}
else
{
//elem.className="view_section";
YAHOO.util.Dom.replaceClass(elem, "selected_view_section", "view_section");
}
}

//set appropriate status on all tabs.
return false;
}
//-->
</script>

<vb:if condition="$show['post_visitor_message']">
<script type="text/javascript">
<!--
function goto_post_pm()
{
tabViewPicker(document.getElementById('visitor_mes saging-tab'));
fetch_object('view-visitor_messaging').scrollIntoView();

var textarea = fetch_object('visitor_message_form_textarea');
if (textarea)
{
textarea.focus();
textarea.select();
}
return false;
}
//-->
</script>
</vb:if>

<vb:if condition="$show_customize_profile">
<script type="text/javascript">
<!--
{vb:raw themes_js}

// for yui style picker:
loadVbCss(yuipath + '/slider/assets/skins/sam/slider.css');
loadVbCss(yuipath + '/colorpicker/assets/skins/sam/colorpicker.css');
loadVbCss(yuipath + '/container/assets/skins/sam/container.css');
if (remoteyui && yuicombopath)
{
document.write('<script type="text/javascript" src="' + yuicombopath + '?{vb:raw yui_version}/build/utilities/utilities.js&amp;{vb:raw yui_version}/build/dragdrop/dragdrop-min.js&amp;{vb:raw yui_version}/build/element/element-min.js&amp;{vb:raw yui_version}/build/slider/slider-min.js&amp;{vb:raw yui_version}/build/colorpicker/colorpicker-min.js&amp;{vb:raw yui_version}/build/container/container-min.js&amp;{vb:raw yui_version}/build/animation/animation-min.js&amp;{vb:raw yui_version}/build/json/json-min.js"></script>');
}
else
{
document.write('<script type="text/javascript" src="' + yuipath + '/utilities/utilities.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/dragdrop/dragdrop-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/element/element-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/slider/slider-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/colorpicker/colorpicker-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/container/container-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/animation/animation-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/json/json-min.js"></script>');
}
document.write('<script type="text/javascript" src="clientscript/vbulletin_userprofile.js?v={vb:raw vboptions.simpleversion}"></script>');
//-->
</script>
</vb:if>

<vb:if condition="$vboptions['storecssasfile']">
{vb:cssfile memberinfo-rollup.css}
<vb:else />
{vb:cssfile activitystream.css,sidebar.css,forumbits.css,postb it.css,postbit-lite.css,showthread.css,member.css,user{vb:raw userinfo.userid}}
</vb:if>

<style type="text/css">{vb:raw template_hook.memberinfo_css}</style>

<!--[if lt IE 8]>{vb:cssfile sidebar-ie.css,member-ie.css,postbit-lite-ie.css}<![endif]-->

<vb:comment>
If the member has a custom theme, and we are actually displaying it
then load additional.css before the theme, otherwise load it afterwards.
</vb:comment>

<vb:if condition="$show['userhastheme'] AND $show['showusercss']">
{vb:raw headinclude_bottom}
<link rel="stylesheet" type="text/css" href="css.php?userid={vb:raw show_userid}&amp;cssuid={vb:raw show.cssuid}&amp;d={vb:raw timenow}&amp;td={vb:stylevar textdirection}&amp;styleid={vb:raw session.styleid}&amp;sheet=userprofile.css" />
<vb:else />
<link rel="stylesheet" type="text/css" href="css.php?userid={vb:raw show_userid}&amp;cssuid={vb:raw show.cssuid}&amp;d={vb:raw timenow}&amp;td={vb:stylevar textdirection}&amp;styleid={vb:raw session.styleid}&amp;sheet=userprofile.css" />
{vb:raw headinclude_bottom}
</vb:if>
</head>

<body>
{vb:raw header}
{vb:raw navbar}
<vb:if condition="$prepared['profilepicurl']">
{vb:raw blocks.profile_picture}
</vb:if>
<style>.profileimg {
width: 1278px;
min-height: 250px;
max-height: 350px;
margin-top: -32px;
margin-bottom: -41px;
border-bottom: 5px solid hsla(204, 39%, 42%, 0.63);
border-top: 5px solid;
margin-right: -20px;
border-radius: 5px 5px 0 0;
}
</style>
{vb:raw memberinfo_customize}
<div class="member_content userprof fullwidth" style="display:block;float:{vb:stylevar left}" id="member_content">
<div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">
<div class="block mainblock moduleinactive_bg">
<h1 class="blocksubhead prof_blocksubhead">
<vb:if condition="$show['edit_profile']">
<a href="moderator.php?{vb:raw session.sessionurl}do=useroptions&amp;u={vb:raw userinfo.userid}" class="textcontrol imagecontrol"><img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" /></a>
</vb:if>
<span id="userinfo">
<span class="member_username">{vb:raw prepared.musername}</span>
<span class="member_status">{vb:raw prepared.onlinestatus}</span>
<vb:if condition="$prepared['usertitle']">
<br />
<span class="usertitle">{vb:raw prepared.usertitle}</span>
</vb:if>
<vb:if condition="$prepared['rank']">
<br />
<span class="rank">{vb:raw prepared.rank}</span>
</vb:if>
<vb:if condition="$show['reputation']">
<br />
<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">
<vb:each from="reputationdisplay" value="row">
<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />{vb:raw row.rowend}
</vb:each>
</span>
<br />
</vb:if>
</span>
</h1>
<div id="userinfoblock" class="floatcontainer">
<ul id="usermenu" class="usermenu">
<vb:if condition="$prepared['canbefriend']">
<li><a href="profile.php?{vb:raw session.sessionurl}do=addlist&amp;userlist=friend&amp;u={v b:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/add.png" alt="{vb:rawphrase add_as_friend}" class="inlineimg" /> {vb:rawphrase add_as_friend}</a></li>
</vb:if>
<vb:if condition="$show['contactlinks'] AND $show['pmlink']">
<li><a href="private.php?{vb:raw session.sessionurl}do=newpm&amp;u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/message.png" alt="{vb:rawphrase send_private_message}" class="inlineimg" /> {vb:rawphrase send_private_message}</a></li>
</vb:if>
<vb:if condition="$show['email']">
<li>
<a href="sendmessage.php?{vb:raw session.sessionurl}do=mailmember&amp;u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/email.png" alt="{vb:rawphrase email}" class="inlineimg" /> {vb:rawphrase send_email}</a>
</li>
</vb:if>
<vb:if condition="$prepared['homepage']">
<li>
<a href="{vb:raw prepared.homepage}"><img src="{vb:stylevar imgdir_siteicons}/homepage.png" alt="{vb:rawphrase home_page}" class="inlineimg" /> {vb:rawphrase home_page}</a>
</li>
</vb:if>
<vb:if condition="$show['addignorelist']">
<li>
<a href="profile.php?{vb:raw session.sessionurl}do=addlist&amp;userlist=ignore&amp;u={v b:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/ignore.png" alt="{vb:rawphrase add_to_ignore_list}" class="inlineimg" /> {vb:rawphrase add_to_ignore_list}</a>
</li>
</vb:if>
<vb:if condition="$show['removeignorelist']">
<li>
<a href="profile.php?{vb:raw session.sessionurl}do=removelist&amp;userlist=ignore&amp;u ={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/ignore.png" alt="{vb:rawphrase remove_from_ignore_list}" class="inlineimg" /> {vb:rawphrase remove_from_ignore_list}</a>
</li>
</vb:if>
<vb:if condition="$show['usernotes']">
<li>
<a href="usernote.php?{vb:raw session.sessionurl}u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/note.png" alt="{vb:rawphrase user_notes}" class="inlineimg" /> {vb:rawphrase user_notes} ({vb:raw prepared.usernotecount})</a>
</li>
</vb:if>
<li><a href="search.php?{vb:raw session.sessionurl}do=finduser&amp;userid={vb:raw userinfo.userid}&amp;contenttype=vBForum_Post&amp;showpost s=1"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase find_all_posts}" class="inlineimg" /> {vb:rawphrase find_all_posts}</a></li>
<li><a href="search.php?{vb:raw session.sessionurl}do=finduser&amp;userid={vb:raw userinfo.userid}&amp;starteronly=1&amp;contenttype=vBForum _Thread"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase find_all_started_threads}" class="inlineimg" /> {vb:rawphrase find_all_started_threads}</a></li>
<vb:if condition="$show['viewarticles']">
<li><a href="{vb:raw$ author_list_url}" rel='nofollow'><img src="{vb:stylevar imgdir_siteicons}/article.png" class="inlineimg" alt="" /> {vb:rawphrase view_articles}</a></li>
</vb:if>
<vb:if condition="$show['viewblog']">
<li><a href="{vb:raw $vboptions.vbblog_url}{vb:if "$vboptions['vbblog_url']", '/', ''}blog.php?{vb:raw session.sessionurl}u={vb:raw userinfo.userid}" rel='nofollow'><img src="{vb:stylevar imgdir_siteicons}/blog.png" class="inlineimg" alt="" /> {vb:rawphrase view_blog_entries}</a></li>
</vb:if>
<vb:if condition="$show['view_conversation']">
<li>
<a href="converse.php?{vb:raw session.sessionurl}u={vb:raw userinfo.userid}&amp;u2={vb:raw bbuserinfo.userid}"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase view_conversations}" class="inlineimg" /> {vb:rawphrase view_conversations}</a>
</li>
</vb:if>
</ul>
</div>
</div>
<vb:comment>sidebar</vb:comment>
{vb:raw template_hook.profile_sidebar_first}
{vb:raw blocks.stats_mini}
{vb:raw template_hook.profile_sidebar_stats}
{vb:raw blocks.friends_mini}
{vb:raw template_hook.profile_sidebar_friends}
{vb:raw blocks.albums}
{vb:raw template_hook.profile_sidebar_albums}
{vb:raw blocks.groups}
{vb:raw template_hook.profile_sidebar_groups}
{vb:raw blocks.visitors}
{vb:raw template_hook.profile_sidebar_last}
<vb:comment>sidebar</vb:comment>
</div>
<div class="member_tabs<vb:if condition="$stylevar['textdirection'] == 'ltr'"> contentright</vb:if>" id="userprof_content_container">

<div class="tabbackground" id="profile_tabs">
<div class="floatleft" id="tab_container">
<dl class="tabslight">
<dt>Tab Content</dt>
{vb:raw template_hook.profile_tabs_first}
<vb:if condition="$blocks[activitystream]"><dd<vb:if condition="$selected_tab == 'activitystream' OR $selected_tab == ''"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="activitystream-tab" href="{vb:link member, {vb:raw userinfo}, "tab=activitystream"}#activitystream" onclick="return tabViewPicker(this);">{vb:raw activity_phrase}</a></dd></vb:if>
<vb:if condition="$blocks[visitor_messaging]"><dd <vb:if condition="$selected_tab == 'visitor_messaging'"> class="userprof_module"<vb:else /> class="userprof_moduleinactive" </vb:if>><a id="visitor_messaging-tab" href="{vb:link member, {vb:raw userinfo}, "tab=visitor_messaging"}#visitor_messaging" onclick="return tabViewPicker(this);">{vb:rawphrase visitor_messages_tab}</a></dd></vb:if>
<dd<vb:if condition="$selected_tab == 'aboutme'"> class="userprof_module"<vb:else /> class="userprof_moduleinactive" </vb:if>><a id="aboutme-tab" href="{vb:link member, {vb:raw userinfo}, "tab=aboutme"}#aboutme" onclick="return tabViewPicker(this);">{vb:rawphrase about_me}</a></dd>
<vb:if condition="$blocks[friends]"><dd<vb:if condition="$selected_tab == 'friends'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive"</vb:if>><a id="friends-tab" href="{vb:link member, {vb:raw userinfo}, "tab=friends"}#friends-content" onclick="return tabViewPicker(this);">{vb:rawphrase friends}</a></dd></vb:if>
<vb:if condition="$blocks[infractions]"><dd<vb:if condition="$selected_tab == 'infractions'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="infractions-tab" href="{vb:link member, {vb:raw userinfo}, "tab=infractions"}#infractions-content" onclick="return tabViewPicker(this);">{vb:rawphrase infractions}</a></dd></vb:if>
<vb:if condition="$blocks[reputation]"><dd<vb:if condition="$selected_tab == 'reputation'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="reputation-tab" href="{vb:link member, {vb:raw userinfo}, "tab=reputation"}#reputation-content" onclick="return tabViewPicker(this);">{vb:rawphrase reputation}</a></dd></vb:if>
{vb:raw template_hook.profile_tabs_last}
</dl>
</div>
<vb:if condition="$show_customize_profile">
<button class="floatright userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
<div class="memberprofiletabunder"></div>
</div>

<div class="profile_content userprof">
<div id="view-activitystream" class="<vb:if condition="$selected_tab == 'activitystream' OR $selected_tab == ''">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.activitystream}
</div>
<div id="view-visitor_messaging" class="<vb:if condition="$selected_tab == 'visitor_messaging'">selected_view_section<vb:else />view_section</vb:if><vb:if condition="$userinfo['userid'] != $bbuserinfo['userid']"> vm_other_prof</vb:if>">
{vb:raw blocks.visitor_messaging}
</div>
<div id="view-aboutme" class="<vb:if condition="$selected_tab == 'aboutme'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.aboutme}
{vb:raw blocks.contactinfo}
{vb:raw blocks.stats}
</div>
<div id="view-friends-content" class="<vb:if condition="$selected_tab == 'friends'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.friends}
</div>
<div id="view-infractions-content" class="<vb:if condition="$selected_tab == 'infractions'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.infractions}
</div>
<div id="view-reputation-content" class="<vb:if condition="$selected_tab == 'reputation'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.reputation}
</div>
{vb:raw template_hook.profile_tabs}
</div>
</div>
</div>
{vb:raw footer}
</body>
</html>

Save the file.

Search the file memberinfo_block_profilepicture, delete everything and write:

<vb:if condition="$prepared['profilepicurl']">
<img src="{vb:raw prepared.profilepicurl}" class="profileimg" />
</vb:if>
Vick98
10-29-2012, 05:58 AM
Good mod. Is there any way to change the width of the cover image to a fixed width? I am using a fixed template and the image is overlapping the template.

Fixed: width was 975px
RamdonGhai
10-31-2012, 12:36 AM
Good mod. Is there any way to change the width of the cover image to a fixed width? I am using a fixed template and the image is overlapping the template.

Fixed: width was 975px

I agree completely, this mod stretches to fit, making most images look terrible.

Is there a way to where the image can be a fixed width, constraining proportions.

Or even a way to disable the stretching and center the image for the time being.
Vick98
10-31-2012, 12:20 PM
I agree completely, this mod stretches to fit, making most images look terrible.

Is there a way to where the image can be a fixed width, constraining proportions.

Or even a way to disable the stretching and center the image for the time being.

Change the width in the code provided below with the width of your template. My template width was 975 pixels and adjust the width to best fit your style.

</vb:if>
<style>.profileimg {
width: 1278px;
min-height: 250px;
max-height: 350px;
margin-top: -32px;
margin-bottom: -41px;
border-bottom: 5px solid hsla(204, 39%, 42%, 0.63);
border-top: 5px solid;
margin-right: -20px;
border-radius: 5px 5px 0 0;
}
FTG LIQUID CL
12-16-2012, 01:02 PM
i like the idea ,but i cant get the picture to look good
Kiran-E-Sehar
01-19-2013, 03:26 PM
sooper, but as i noticed its merging with Notifications area
how to fix it?
M.C.
02-17-2013, 12:23 PM
Idea is good but better to add this option to Customize block (I know it will need much more code edit)...
marccap
02-21-2013, 08:00 PM
Added - Works on 4.2 and I've amended the width and increase the usergroups profile pic dimensions
Divvy
03-13-2013, 12:38 PM
Great mod! But I have a suggestion:

Since this not work just like the facebook tool where the user can drag the image up and down to display what they want...

It is possible to add a default image to all users that don't have any profile pic yet? My idea is to appear an default image telling the recommended size of the image...

Thanks!
rgreene1971
03-24-2013, 03:23 AM
Where can I find these two files to edit? I am searching everywhere
Morrus
03-24-2013, 06:58 PM
This is such a good idea, and I'd love to see it implemented smoothly. If anyone does do so, any chance you could share it with us?
DJ29Joesph
04-01-2013, 01:18 AM
One suggestion is can we change it to a value (url) to a hidden user profile field?
Bestrafung
01-15-2014, 09:29 PM
One suggestion is can we change it to a value (url) to a hidden user profile field?

Sorry to dig up such an old thread but I just stumbled across this and was wondering if anyone has figured out a way to do this. I'd like to see if it can be a custom image so the profile pic can be left alone.
MentaL
01-15-2014, 11:04 PM
cool idea.
rohirrim
07-04-2015, 09:40 PM
not working on 4.3
Manoel J?nior
07-08-2015, 12:54 AM
Cool, functionaly with 4.2.2?