vb.org Archive - Show Thread Enhancements - Rounded avatars, profile pictures and attachment thumbnails

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=192)

- - Show Thread Enhancements - Rounded avatars, profile pictures and attachment thumbnails (https://vborg.vbsupport.ru/showthread.php?t=171664)

Rounded avatars, profile pictures and attachment thumbnails

Description:
Rounded Avatar & Image Effects allows you to add rounded corners (and also shading and shadow) to avatars and images on your forums. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.

This modification is a nice addition to all of you, who want your forums to have a nice Web2.0 effect.

Installation:
1. Upload the attached corner.js to your clientscript directory

2. In your header template, find:

Code:

and add this below

Code:

<script type="text/javascript" src="clientscript/corner.js"></script>

3. In your postbit_legacy template, find

Code:

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

replace it with

Code:

                <div class="smallfont">

                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]"  class="corner iradius10" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>

                </div>

Finished.

Note that you can alter the javascript classes to suit your needs. If you want a shadow in your avatars/profile pics you may add ishadowXX to the class, so it may become: class="corner iradius10 ishadow25".
It is very flexible and you can tweak it as much as you want.

v.1.01 added rounded effects for attachment thumbnails
v.1.0 Initial release

Credits for this modification go out to CVI Lab for the original javascript. I just made it to work for vBulletin

Enjoy,
Val.

Here are the additional changes for postbit template, memberprofile, memberlist and profile picture

In your postbit template, find

Code:

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

replace it with

Code:

            <if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" class="corner iradius10" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>

For rounded avatar in member profile, in MEMBERINFO template, find:

Code:

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

and replace it with

Code:

<td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] class="corner iradius10" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" /></td>

For rounded avatar in memberlist, in memberlist_resultsbit template, find this

Code:

    <if condition="$show['avatarcol'] AND exec_switch_bg()"><td class="$bgclass"><if condition="$show['avatar']"><img src="$avatarurl" border="0" $avwidth $avheight alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" hspace="4" vspace="4" /><else />&nbsp;</if></td></if>

replace it with:

Code:

<if condition="$show['avatarcol'] AND exec_switch_bg()"><td class="$bgclass"><if condition="$show['avatar']"><img src="$avatarurl" class="corner iradius10" $avwidth $avheight alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" /><else />&nbsp;</if></td></if>

For rounded display picture in member profile, in MEMBERINFO template find:

Code:

<img src="$userinfo[profilepicurl]" $userinfo[profilepicsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_picture]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" />

replace it with:

Code:

<img src="$userinfo[profilepicurl]" $userinfo[profilepicsize] class="corner iradius10" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_picture]</phrase>" />

For rounded attachment thumbnails, in postbit_attachmentthumbnail template find this:

Code:

class="thumbnail"

as it is the only instance of a class in the template, and replace it with

Code:

class="thumbnail corner iradius10"

This is very nice, but it has one single problem. It destroys animated avatars.

Thanks. :)

Quote:

Originally Posted by Defkalion (Post 1453079)

This is very nice, but it has one single problem. It destroys animated avatars.

Thanks. :)

you destroyed my illusions :rolleyes:

Ah!! It was almost great... any way to keep those gifs away from these action? I can't leave my animations.

I don't think this javascript works for animated gifs.

But hey someone might find it useful though. ;)

Absolutely. I didn't mean to dishonor your work. This hack is very cool, I just don't have use for it, because I have animated gifs as avatars on my website. :)

Quote:

Originally Posted by valdet (Post 1453184)

I don't think this javascript works for animated gifs.

But hey someone might find it useful though. ;)

Chill, sure its handy with jpeg.

Nice, I think I'll add this to my forum :)

Thanks valdet

oh, just seen it's for 3.6, will this work in 3.7 ?

thanks

i don't understand how i can shadow it

Quote:

Originally Posted by Loco.M (Post 1454205)

Nice, I think I'll add this to my forum :)

Thanks valdet

oh, just seen it's for 3.6, will this work in 3.7 ?

thanks

Hey Brandon, thanks. It surely works for vb3.7 too, but i just did not install that one yet.
In your postbit_legacy search for $vbphrase[xs_avatar] , because there is only one instance of this phrase and do the replace accordingly between the <div> ...... </div> tags. Same goes with other templates too where you want to tweak the avatars.
For profile picture look for phrase $vbphrase[xs_picture].

I am sure it will work.

Quote:

Originally Posted by erdiyilmaz (Post 1454329)

i don't understand how i can shadow it

It is quite easy.
In my replacements, all you need to do is add the ishadowXX (XX is a number) to the javascript class.
Example if you need to add shadows in postbit_legacy you would use this replacement:

Code:

<div class="smallfont">

                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]"  class="corner iradius9 ishadow38" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>

                </div>

Note that you can tweak the numbers highlighted in red color to your liking.

The result:
http://img182.imageshack.us/img182/6...owedfi9.th.png

Cheers,
Val.

thanks vaLdet, i understand now : )
its very nice

valdet,
pershendetje edhe urime per kete script...
kam nevoje per ndonje script qe mund te mi zvogeloje automatikisht avataret ne 80x80 pixel, edhe pse custom avatars mund te jene te medhej, automatikisht te zvogelohen ne 80x80

very nice dude
i´ll use it but i´ll edit it with a pretty rounded

my forum has a probLem because of corner.js

some antivirus programs immediateLy aLert; EXP/HTML.VML.Gen virus.

how can we soLve this issue?

Quote:

Originally Posted by erdiyilmaz (Post 1498466)

my forum has a probLem because of corner.js

some antivirus programs immediateLy aLert; EXP/HTML.VML.Gen virus.

how can we soLve this issue?

I think that might be a false positive, because I scanned that file with Kaspersky online scanner, my McAfee scanner and NOD32 and there were no risk alerts at all.

What's more, I provided the link to original author of this script and since it is widely used, I don't think it is a virus/trojan and whatsoever.

I hope that helps.

Regards,
Val.

Not working for me! :(
Still the avatars are same, no curve or any other effect.

What does the shading do?

Quote:

Originally Posted by sherytiger (Post 1499516)

Not working for me! :(
Still the avatars are same, no curve or any other effect.

Make sure, you are using the correct replacement and upload the file.

If you want you may PM me your URL to take a look.

Click Install too. :)

Quote:

Originally Posted by Boofo (Post 1499533)

What does the shading do?

Hi Boofo,
This adds a shadow to rounded avatars if you selected the appropriate settings in javascript class.

Attached is a screenshot of shades and rounded avatars in action.

You did shadow, not shading, though. Isn't the shading on the pic itself?

I finally got the optimal setting for this and it really looks great! Thank you. ;)

Quote:

Originally Posted by Boofo (Post 1499552)

You did shadow, not shading, though. Isn't the shading on the pic itself?

I finally got the optimal setting for this and it really looks great! Thank you. ;)

Shades/shadow it all sounds same to me as I am not a native English speaker. :)
The attached picture has a drop shadow on bottom right side of the picture/avatars.

I am glad you sorted it out.

hello valdet, it looks nice but do you know if it possible to do it with categories?

rounded categories if so any ideas on how I would go around this?

Quote:

Originally Posted by kj_202 (Post 1523804)

hello valdet, it looks nice but do you know if it possible to do it with categories?

rounded categories if so any ideas on how I would go around this?

Do you mean to have rounded avatars only in certain categories & forums..?

If that's your question, then YES, it can be done by using conditionals.

If, you're thinking categories of your users (aka usergroups) then it can be done with conditionals too.

Regards,
Val.

Erm I mean, just having categories, rounded

e.g. Plain categories nothing but a gradient in with a curve in? Do you understand if not reply please... I can explain further.

Edit: doesn't matter now, sorted :)

-deleted-
never mind, stupid question :)

tried this in vB 3.8.1 doesnt work.

any similar mod for the latest vB?

great hack , but makes animated gif avatars , freezing

Yes it does. That is one of the limitations of the javascript file.

anyway great hack , worked fine on 3.8 , thanks 4 quick reply

Great! It also works with 3.8.2 !!! :up:

Thanks, we like it!

Karin

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01275 seconds Memory Usage 1,820KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (15)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (33)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: