Profile Enhancements - Profile Page Banner

Changeable Member Profile Page Banner

Description: Your members can add a banner above their Profile page.
================================================== ===
Demo: http://nacc.club/member.php?u=1
The demo is a 3.8 test site but it will look the same in 4.2

Music will play in profile, please adjust volume before clicking.
================================================== ===
Step One:
You will need to make a new User Profile Field.

Admincp/User Profile Fields/Add New User Profile Field

Single-Line Text Box

Title: Add a banner above your profile

Description: Please add your Image URL
(Example: http://nacc.club/imagehosting/14f7bd890a86c3.jpg)

Field Required: No

Field Editable by User: Yes

Display Page: Edit Profile


Save it Remember the field ID number, you will need it later.

================================================== ===
Step Two:

You will need to edit your MEMBERINO template.
(MAKE A BACKUP OF ANY TEMPLATE YOU EDIT BEFORE YOU EDIT IT, YOU MAY NEED IT IF YOU MAKE A MISTAKE.)
Find:

{vb:raw navbar}

Add below:

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="600" height="150"></td></tr> </vb:if></div>

Note: Change the xx in fieldxx to the profile field you created.
================================================== ===

As you see, I set the default Image size allowed to 600 x 150.
Any image a member adds will show image at that size.
Adjust these numbers to suit your needs or remove "width="600" height="150" to allow your members to add any size image.


================================================== ===

Step Four: Inform your Members...Enjoy
================================================== ===
================================================== ==
ADDON: Added wired1's extra profile pages addon ( marked reusable) to show the banner profile field to its own page and added <vb:else /> if conditionals to only show the page contents to select usergroups by adding usergroup id's to the top of the new pbanner template (info included in zip)

To Upgrade:
Click Install & download the zip file.
Import the product-be1_pbpfp.xml
Edit the admincp/profilefield.php file
Edit the USERCP_SHELL template
Edit the pbanner template to add usergroup id's to wat to allow access to the page

After you do the addon steps, go into your profile field manager, click edit to the right of Profile Banner. Scroll to the bottom of that page to the Display Page, click the dropdown and select, Option: Profile Banner Options... Done






================================================== ==
Happy Editing!!

Added 3rd party Image Upload and Resize script.

[DemOnstar]

Good idea blind eddie, this will provide instant, satisfying feedback to any user.

Always good to see development on 4.2.1.

[mohammad6006]

how can i change banner size like facebook cover?

[blind-eddie]

Facebook cover?
As stated in first post:

As you see, I set the default Image size allowed to 600 x 150.
Any image a member adds will show image at that size.
Adjust these numbers to suit your needs or remove "width="600" height="150" to allow your members to add any size image.

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="600" height="150"></td></tr> </vb:if></div>

[Mr_Running]

Again I just want to say thanks blind-eddie

@ mohammad6006
facebook cover is ...851 pixels wide and 315 pixels tall. If you upload an image that's smaller than these dimensions, it will be stretched to this larger size.

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="851" height="315"></td></tr> </vb:if></div>

I did 950 pixels wide and 150 pixels tall...but then again I'm still sorting out how I would like it!

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="950" height="150"></td></tr> </vb:if></div>

If you upload an image that's smaller than these dimensions, it will be stretched to this larger size.

[mohammad6006]

Originally Posted by Mr_Running

Again I just want to say thanks blind-eddie

@ mohammad6006
facebook cover is ...851 pixels wide and 315 pixels tall. If you upload an image that's smaller than these dimensions, it will be stretched to this larger size.

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="851" height="315"></td></tr> </vb:if></div>

I did 950 pixels wide and 150 pixels tall...but then again I'm still sorting out how I would like it!

<div align=center><vb:if condition="$userinfo['fieldxx']"><td class="vbmenu_option"><img src="{vb:raw userinfo.fieldxx}" width="950" height="150"></td></tr> </vb:if></div>

If you upload an image that's smaller than these dimensions, it will be stretched to this larger size.

thank you very much

i add style

style="max-height: 350px; max-width: 75%;"

[blind-eddie]

You could use,

width="75%" height="auto"

which shows same results as your edit on my test board.
The only issue I see having with any of the edits is the size of the image.

Example random banner image from the net:
http://shipritestore.com/wp-content/...ns-Banners.jpg
This image is 1664 x 312 and 1941264 bytes (HUGE)

Using style="max-height: 350px; max-width: 75% or width="75%" height="auto will drop the image to 1165 x 218 (Fluid Style)but it will still remain 1941264 bytes (HUGE)

I could add image guidelines & add image resizer link on the profile field page so members will know what size their image needs to be.

[Mr_Running]

FYI
My image guidelines when filling out the User Profile Field Description

Please add your Image URL ...for best results Banner photos are xxx pixels wide and xxx pixels tall. If image is smaller than these dimensions, it will be stretched to this larger size...sometimes this will give you a cool image.

[blind-eddie]

I added image resizing to specific dimension's and image upload on the pbanner page.

I will share my edit later tonight.

[Mr_Running]

Cool!

Upload-Resize Host
Image on post #43
Notes:
neider ...I think it should read...neither

Upload-Resize Host ...will that be hosted on our own servers?

[coolhula]

nvm this