Mini Mods - Avatar Glossy Effect - Postbit_Legacy

I found a really cool Javascript library that automatically adds a cool Glossy Shine effect to an image. You can add the Glossy Shine to any image on your forum, but I think it looks best with user's avatars.

And the best part is, the end-user doesn't need to do anything extra. They just upload their Avatar as normal, and when they see their avatar in posts, it will have a professional looking Shine/Glossy effect.

Lets get started!

1) First download the zip at the bottom, extract the contents, and upload the "js" folder to your forum root.

2) Add this code to your headerinclude template.

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

3) Edit the postbit_legacy template.

Find:

<vb:if condition="$show['avatar']">
			<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
				<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
			</a>
			</vb:if>

Now since my style is very custom, that code might not be exactly like yours.

You have to basiclly put a class on the avatar "IMG" tag.

Like this:

<vb:if condition="$show['avatar']">
			<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
				<img class="glossy"  src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
			</a>
			</vb:if>

And save!


I also added a screenshot of what it will look like when its done.

EDIT: You could also use the Javascript to make any image have the Glossy/Shine Effect. I added the code to my Postbit Legacy and the User Profile Avatars. I changed the code in the profiles so instead of the profiles showing the Profile Pictures, it only shows the User's Avatar with the Glossy/Shine Effect.

I added a screenshot of my profiles with the Avatar Shine/Glossy effect.

[concepts]

Pretty cool, and looks great on the site, thanks!

[valdet]

Same effect for vB 3.x series

https://vborg.vbsupport.ru/showthread.php?t=171714

[lapiervb]

Does this take any additional resources?

[CAG CheechDogg]

Originally Posted by lapiervb

Does this take any additional resources?

Some because of the javascript ...but shouldn't be that bad ....

[thetechgenius]

Originally Posted by CAG CheechDogg

Some because of the javascript ...but shouldn't be that bad ....

Yes, it does take up some resources, but not much at all. Its only a little bit of javascript.

[hazem_aliraqi]

thank you