Hello folks, today i’ll discuss about a cool method i made out of nothing, have you ever faced the problem to render icons or maybe different pics and have to declare an awful number of css classes?
Maybe not, since it’s not common to do this shit for a normal job nowadays, anyway i came up with a brilliant solution, i’m so proud that i wanted to share.

The Problem 

We’ve got a lot of RPG Heroes, with a lot of awful faces, hair colors and different haircuts. We hate them, i’ve seen dropbox sprite solution and they declare about 200 classes for their icons, but we’ve got twig and we’re working on Symfony2 so we want to be fast and smart.

The Solution

Obviously using Twig like a boss.

General Tips

If you don’t know Symfony2 or Twig you should probably google a bit, because these are awesome tools that even Drupal and eZpublish are going to implement in their CMS.
Symfony is a new generation PHP Framework, with his second release it’s become more useful than ever. I suggest to consider it if you like PHP frameworks since it’s actually one of the best.
Twig  is a PHP template engine, it shares the same feature of other template engines used by many CMS, but it’s easy and powerful and expecially quick to learn.

Now go on with the project..

1. Here we are with a lot of awful heroes, with their awful faces they expect you declare a CSS class for each one of them.
   
2. Now, since we are using Symfony we’ve got a nice Entity class for this heroes but we can do that even with plain PHP.

   class Hero
   {    
       private $id;
       private $name;
       // Declare this classes for each sprite characteristic
       private $hair;
       private $hair_color;
       private $face;
       // Functioning like a boss
       public function getHair()
       {
           return $this->hair;
       }
       public function getFace()
       {
           return $this->face;
       }
       public function getHairColor()
       {
           return $this->hair_color;
       }
   }

3. Now get on our Twig template, for istance heroes.html.twig and declare a single css class for the background sprite.

   <div class="hero"></div>

4. Here comes the smart part, instead of declaring different classes for hair-face-hair colors combinations, just declare inline css style with the background position got with a bit of math

   <div class="hero" 
   style="background-position:-{{ 0+(41*hero.getFace) }}px
   -{{ 0+(41*hero.getHair)+(41*hair_style_number*hero.getHairColor) }}px">
   </div>

5. All done, what?! Already done? Yes, actually studying my case you would notice that i’ve got 5 different faces, placed at 41 px distance from each other, so to calculate with face, i’ve populated my Hair property with 0-4 values then i multiply that value with 41, starting from 0 -> 0+41*hero.getFace. Easy.
   Calculating hair colors and hair styles was a bit tricky. First i have to add 41*hero.getHair (style) to place on the right line of the hair line. Then i’ve got to add another 41*getHair*getHairColor, actually that means that every 41*5 lines i change color, and i declared the 

   hair_style_number=5

   variable in order to update later the lenght of the lines with a single color. Result:
   

   Nothing special here, just some math and a smart use of twig will save you a lot of time!