logo
11.10.2019 10:39
1
zdravím všetkých

mám tento kód
<img src="".CONFIG::$site_link."images/langs/".$lang["iso"].".png">

po pridaní prekladu v administrácii sa mi doteraz automaticky pridala k nemu vlajka ktorú mám v zložke images/langs (en.png, cz.png atď / cca 250 vlajok)


lenže na https://gtmetrix.com mám info
Kombinujte obrázky pomocou CSS sprites


preto som si vytvoril css sprites generátoru https://instantsprite.com/

.sprite { background: url('sprite.png') no-repeat top left; width: 16px; height: 11px; }
.sprite.tf { background-position: 0 0; }
.sprite.tg { background-position: 0 -21px; }
.sprite.th { background-position: 0 -42px; }
.sprite.tj { background-position: 0 -63px; }
.sprite.tk { background-position: 0 -84px; }
.sprite.tl { background-position: 0 -105px; }
.sprite.tm { background-position: 0 -126px; }
atd



<div class='sprite tf'></div>
<div class='sprite tg'></div>
<div class='sprite th'></div>
<div class='sprite tj'></div>
<div class='sprite tk'></div>
<div class='sprite tl'></div>
<div class='sprite tm'></div>
atd


ale ako to mám urobiť?

predtým mi stačil iba jeden riadok <img src="".CONFIG::$site_link."images/langs/".$lang["iso"].".png">
a vlajka sa automaticky priradila (keď som pridal preklad / nový jazyk)


ako to vtomto prípade vyriešiť?
11.10.2019 11:13
2
Kód:
'<div class="sprite ' . $lang["iso"] . '"></div>'
eh, sprites su dost problemove kvoli poziciovaniu a rozmerom prvkov. osobne som to prave kvoli problematickym rozmerom prvkov nikdy nenasadil do prevadzky. hlavne v dnesnej dobe responzivnych css je to imho prakticky nemozne poriadne nastylovat.
11.10.2019 13:26
3
Muzes zkusit http://flags.cz/
11.10.2019 15:50
4
Původně odeslal node
Kód:
'<div class="sprite ' . $lang["iso"] . '"></div>'
eh, sprites su dost problemove kvoli poziciovaniu a rozmerom prvkov. osobne som to prave kvoli problematickym rozmerom prvkov nikdy nenasadil do prevadzky. hlavne v dnesnej dobe responzivnych css je to imho prakticky nemozne poriadne nastylovat.


perfektné a pritom také jednoduché riešenie.
na lang sprites mám iba vlajky. a všetky vlajky majú stejné rozmery. tak dúfam nenastane žiadny problém.

vďaka node
11.10.2019 20:24
5
Jenom mimochodem:

Zrovna vlajky lze taky realizovat jako "sprite mapu" vektorovou. Odpadlo by vám tak CSS ohledně pozicování, bylo by to snadněji dále upravitelné, vektory si lépe "udržují" kvalitu a vůbec bych se nedivil, kdyby byl výsledek o poznání menší.