PDA

View Full Version : Remote Avatars


Rawhide
16 Nov 2006, 13:31
This is a template modification for vBulletin 3.6.3 to enable the use of remote or default avatars. It disables the inbuilt avatar handling system and does not allow avatar uploading.

A regular expression is used to prevent html or other code from being used and to prevent the avatar from stretching the page layout. You can set the width and height of the avatar from 20 pixels to 120, if not set the same as the original image, the image will be stretched.

As of this version, v0.1 BETA, only the postbit_legacy is supported. Although it will not be hard to modify it to suit the standard postbit.



Step 1: Create the following 5 User Profile Fields

Title: Avatar
(field6 in my examples)
Profile Field Type: Single-Selection Radio Buttons
Options: Required, Editable
Description: Avatars are small graphics that are displayed under your username whenever you post. This is a global setting that will turn off your avatar altogether or let you choose a default or custom one.
Items per line: 0
Options:
None
Default
Custom

Set Default: Yes
Display Order: (Whatever ends up being 1st)
Field Required: Yes, Always
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: No
Allow user to input their own value for this option: No
Max length of allowed user input: 100
Field Length: 25
Regular Expression:
Which page displays this option?: Options: Other

---

Title: Default Avatar
(field7 in my examples)
Profile Field Type: Single-Selection Menu
Options: Required, Editable
Description: A selection of default avatars.
Set Default: Yes, but no First Blank Option
Display Order: (Whatever ends up being 2nd)
Field Required: Yes, Always
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: No
Allow user to input their own value for this option: No
Max length of allowed user input: 100
Field Length: 25
Regular Expression:
Which page displays this option?: Options: Other

---

Title: Custom Avatar URL
(field8 in my examples)
Profile Field Type: Single-Line Text Box
Options: Editable
Description: Type in the URL to your custom avatar. The URL must start with http:// and the avatar must end in .gif, .jpg or .png. For example: http://www.example.com/avatars/avatar.gif
Default Value:
Max length of allowed user input: 100
Field Length: 50
Profile Field Type: Single-Line Text Box
Display Order: (Whatever ends up being 3rd)
Field Required: No
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: No
Regular Expression: ^http://([A-Za-z0-9/.~_-]+)\.(jpg|gif|png)$|^$
Which page displays this option?: Options: Other

---

Title: Custom Avatar Width
(field9 in my examples)
Profile Field Type: Single-Line Text Box
Options: Required, Editable
Description: Custom avatar width in pixels (20-120, default 80)
Default Value: 80
Max length of allowed user input: 3
Field Length: 3
Profile Field Type: Single-Line Text Box
Display Order: (Whatever ends up being 4th)
Field Required: Yes, Always
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: No
Regular Expression: ^([2-9][0-9]|1[0-1][0-9]|120)$
Which page displays this option?: Options: Other

---

Title: Custom Avatar Height
(field10 in my examples)
Profile Field Type: Single-Line Text Box
Options: Required, Editable
Description: Custom avatar height in pixels (20-120, default 80)
Default Value: 80
Max length of allowed user input: 3
Field Length: 3
Profile Field Type: Single-Line Text Box
Display Order: (Whatever ends up being 5th)
Field Required: Yes, Always
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: No
Regular Expression: ^([2-9][0-9]|1[0-1][0-9]|120)$
Which page displays this option?: Options: Other


Step 2: Create a web accessable folder to house your default avatars.
ie. http://www.example.com/avatars/


Step 3: Name and upload the default avatars. You should not use spaces and I suggest using capital letters to distinguish words. This makes it look nicer later on. All your avatars need to have the same file extension, this is currently .gif but can be changed.
ie. OrangeBanana.gif


Step 4: One per line in the Default Avatar field, type in the names of the uploaded avatars exactly as they are, but without the extension.
ie. OrangeBanana.gif = OrangeBanana


Step 5: In Member Info Templates -> MEMBERINFO
Find:
<if condition="$show['avatar']">
<td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" /></td>
<else />
<td>&nbsp;</td>
</if>

Replace:
<td>
<if condition="$bbuserinfo[options] & 2 OR $bbuserinfo['userid'] == 0">
<if condition="$userinfo['field6'] == 'Default' AND $userinfo['field7']">
<img src="http://www.example.com/avatars/$userinfo[field7].gif" alt="$post[field7]" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" />
</if>
<if condition="$userinfo['field6'] == 'Custom' AND $userinfo['field8'] AND $userinfo['field9'] AND $userinfo['field10']">
<img src="$userinfo[field8]" alt="" width="$userinfo[field9]" height="$userinfo[field10]" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" />
</if>
</if>
&nbsp;</td>
Be sure to replace http://www.example.com/avatars/ with your default avatar location and update all custom fields!


Step 6: In Postbit Templates - > postbit
Skip this step or make your own modification based on my postbit_legacy example. I will include this step later.
The code you want to replace is here:
<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>


Step 7: In Postbit Templates - > postbit_legacy
Find:
<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</div>
</if>

Replace:
<if condition="$bbuserinfo[options] & 2 OR $bbuserinfo['userid'] == 0">
<if condition="$post['field6'] == 'Default' AND $post['field7']">
<div class="smallfont">
&nbsp;<br />
<img src="http://www.example.com/avatars/$post[field7].gif" alt="$post[field7]" border="0" />
</div>
</if>
<if condition="$post['field6'] == 'Custom' AND $post['field8'] AND $post['field9'] AND $post['field10']">
<div class="smallfont">
&nbsp;<br />
<img src="$post[field8]" alt="" border="0" width="$post[field9]" height="$post[field10]" />
</div>
</if>
</if>
Be sure to replace http://www.example.com/avatars/ with your default avatar location and update all custom fields!


Step 8: Run these SQL queries

UPDATE userfield
SET field6 = 'None'
WHERE field6 = ''

UPDATE userfield
SET field7 = 'Avatar'
WHERE field7 = ''
(Replace Avatar with the first default avatar you have in the list)

UPDATE userfield
SET field9 = '80'
WHERE field9 = ''

UPDATE userfield
SET field10 = '80'
WHERE field10 = ''



Step 9: TEST! TEST! TEST!



Revision history:
0.1 BETA
Original release

0.11 BETA
Bugfix: Regular expression for Custom Avatar Width and Height not allowing sizes 100-109. New expression: ^([2-9][0-9]|1[0-1][0-9]|120)$



Special thanks go to Jake Bunce and Viper007Bond who both helped when I was stuck.

Rawhide
16 Nov 2006, 13:32
Revision history:
0.1 BETA
Original release

0.11 BETA
Bugfix: Regular expression for Custom Avatar Width and Height not allowing sizes 100-109. New expression: ^([2-9][0-9]|1[0-1][0-9]|120)$

HaYLaZ
16 Nov 2006, 18:47
good work;)

Smoothie
17 Nov 2006, 02:21
Nice one, but that's a whole lot of work just to show remote avatars. This should be built-in by default. IBP has it built-in, it's great for having a rotating image as your avatar.

Any other method this could be done without all that work?

Rawhide
17 Nov 2006, 11:39
Nice one, but that's a whole lot of work just to show remote avatars. This should be built-in by default. IBP has it built-in, it's great for having a rotating image as your avatar.
I agree, it was definitely a lot of work for a feature that should be included as standard.

Any other method this could be done without all that work?
Well, I designed this modification with a few specifications in mind:

It must allow both remote and local avatars (uploaded not required).
It must prevent the use of html code and dynamic images
The standard avatar size was 117x117, to prevent layout damage I either had to force all avatars to 117x117 or allow users to set the size
I made the code so it would obey the "Show Avatars" option


Ways to reduce the work:

If you don't need local avatars, two fields can be removed: Avatar, Default Avatar - You will need to change a condtition to not display any avatar if Custom Avatar is blank
If you want to force remote avatars to a specific size (ie. 80x80) or have no limit, two fields can be removed: Custom Avatar Width, Custom Avatar Height
The SQL queries do not have to be run, I included them to ensure no existing members caused display errors

NolF
10 Dec 2006, 15:20
Wondeful hack worked perfectly :D

And yest it should be default in vb xD meanwhile thank you

blind-eddie
03 Jan 2007, 03:07
This would be Perfect if you were able to use default avatars & still upload one if you wanted too. Then I would install

GruntHalo
25 Jan 2007, 04:17
Any screenshots? :D

001
09 Feb 2008, 16:09
To complicated.

Ways to reduce the work:

If you don't need local avatars, two fields can be removed: Avatar, Default Avatar - You will need to change a condtition to not display any avatar if Custom Avatar is blank
If you want to force remote avatars to a specific size (ie. 80x80) or have no limit, two fields can be removed: Custom Avatar Width, Custom Avatar Height
The SQL queries do not have to be run, I included them to ensure no existing members caused display errors

Can you post the short version with only one field and the changed condition?

Also it does not work on memberlist.php showing the avatars.

Rawhide
09 Feb 2008, 20:59
I'm sorry for not replying sooner, I was not aware there were replies.

This would be Perfect if you were able to use default avatars & still upload one if you wanted too. Then I would install
Unfortunately, with this template modification, you cannot use the inbuilt system for avatars. I have however set up a system to replace that functionality so that you can have default avatars.

Any screenshots? :D
I don't really see the need... It is a couple of extra fields in the user's profile and the avatars where they normally are. But I will get you some in a couple of weeks when I get back.

To complicated.


Can you post the short version with only one field and the changed condition?

Also it does not work on memberlist.php showing the avatars.
I won't be able to do the short version for a while, the reason for writing this was mainly for a single forum with specific needs. I've made the modification available for two reasons, I'd like everyone to be able to use it, and as a 'proof of concept' that off-site avatars are possible and that several limitations and problems are easy to get past. As such, this will have to stay on the back burner, but it is my hope that vBulletin will include support for off-site avatars (should I hold my breath?).

Hrm, as our forum does not display the avatars on the memberlist, I didn't consider this. It would be a matter of including the same bit of find and replace (slightly modified no doubt).

001
23 Sep 2008, 02:45
It no longer works for 3.7.3.

NolF
23 Sep 2008, 07:09
Have a look at http://www.vbulletin.org/forum/showthread.php?t=180162
I havent test it with 3.7.3 but I see no reason why it shouldn't work :) It's been working perfectly on my site for months now :) and no problems ^^