PDA

View Full Version : Already done Load flags with a css sprite



tavenger5
17-03-10, 16:54
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 (http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

CSS Sprites generator (http://csssprites.com/)

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
17-03-10, 19:50
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
17-03-10, 20:57
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:
http://files.cellphoneforums.net/images/flags.png

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
17-03-10, 21:31
As I understand highlighting active language will not work anymore?

We will look close on that :)

tavenger5
17-03-10, 22:13
active language still highlights - that uses a style where sprites use a class

vBET
19-03-10, 02:07
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
29-04-10, 23:19
I have this semi-working, but all my images are the same first flag, in the sprite.

vBET
11-06-10, 01:22
Done. Will be supported in next release - for all places where flags are used :)

AfrikaansAlbanianArabicBelarusianBulgarianCatalanChineseCroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGermanGreekHaitian CreoleHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishTaiwaneseThaiTurkishUkrainianVietnameseWelshYiddish
Translations made by vBET 4.9.99