Load flags with a css sprite

[tavenger5]

I've been experimenting with css sprites lately and found that it can cut down on server calls significantly. With them all of the flags could be loaded at once instead of one after another. This would effectively eliminate 52 server calls. Unfortunately there's no easy way to convert the flags into a sprite since the img tags are dynamically built in the code.

There's some info here: Creating easy and useful CSS Sprites | Css Globe

CSS Sprites generator

Sorry for all the suggestions lately

Edit - I think I found a way to do it. The name of the sprite just has to correspond to the name of the flag/language. Some editing of 'vbenterprisetranslator_flag' should work.

So it would look something like this: (see the change in img src)

<a rel="novbseo" href="$url" <if condition="$code==$vbulletin->options['vbenterprisetranslator_forumlanguage']">onclick="document.cookie = 'vbet_language=; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/'; return true;"</if>><img class="sprite $code" src="/clear.gif" alt="$name" <if condition="$vbulletin->options['vbenterprisetranslator_flags_noborder'] && !$highlight">border="0"</if><if condition="$highlight">border="1" style="border-color: yellow"</if>/></a>

[vBET]

We will look closer on this idea At this moment we have to learn about css sprite and does it really can improve performance (browsers are caching images anyway). Request put into consideration

[tavenger5]

btw, here is what I just used to implement it (I don't use all 52, but the 13 most common)

The change to vbenterprisetranslator_flag above (sprite can be renamed whatever - I used 'flags')

This image:


This added to extra css:

.sprite {background:url(/images/flags.png); width: 16px; height: 11px;}

	.ar {background-position: -0px -0px;}
	.zh-CN {background-position: -17px -0px;}
	.en {background-position: -34px -0px;}
	.fr {background-position: -51px -0px;}
	.de {background-position: -68px -0px;}
	.it {background-position: -85px -0px;}
	.ja {background-position: -102px -0px;}
	.ko {background-position: -119px -0px;}
	.pl {background-position: -136px -0px;}
	.pt {background-position: -153px -0px;}
	**** {background-position: -170px -0px;}
	.es {background-position: -187px -0px;}
	.nl {background-position: -204px -0px;}

[vBET]

As I understand highlighting active language will not work anymore?

We will look close on that

[tavenger5]

active language still highlights - that uses a style where sprites use a class

[vBET]

Nice We definitively will check it. Anyway - first we have lot of work with moving performance improvements from vBET4.x to vBET3.x which seems be more important right now. But be calm - we have your request on TODO list

[Snake]

I have this semi-working, but all my images are the same first flag, in the sprite.

[vBET]

Done. Will be supported in next release - for all places where flags are used