Sprite

h1. Documentation

h2. Installation

Just install the extension and include the "static setup":http://forge.typo3.org/projects/extension-sprite/repository/entry/trunk/Configuration/TypoScript/setup.txt to your template.

h2. Configuration

h3. Create my first sprite

It is very easy to setup the first sprite. Just create a folder and put some images in there, then use this snippet:

<pre><code>  page.5 < lib.sprite_generator

  page.5.userFunc {

  	name = whatever

  	directories.10 = fileadmin/templates/images/sprite/

  }</code></pre>

Set a unique name, which will be used as prefix for sprite classes. In this example the spriteclass will look like: tx-sprite-whatever-imagename.

You can define several directories, so it is used like an array (.10, .20, ...).

You need to assign the user-function call to the page node. Then the sprite will be created and the css file will attached to headerData.

h3. Use my first sprite

Now we have a cool sprite, but of course we want to use it in our template. Instead using the IMAGE cObject we use this:

<pre><code>  lib.logo < lib.spriteImage

  lib.logo.params = class="tx-sprite-whatever tx-sprite-whatever-logo" alt="The optional alt tag"

</code></pre>

We need to define two classes:

# The class of the sprite, which contains the image

# The class of the sprite part we want to show. It contains the automatic calculated background positions and the width and height of our image

This example tells us, that there exists an image _logo.png_ in the specified _fileadmin/templates/images/sprite/_ directory. The name of the image (without extension) will be taken as last part of the sprite classname.