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 tutorial

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.

The html output will be:

<pre><code class="html"><img src="typo3conf/ext/sprite/Resources/Public/Images/blank.gif" alt="The optional alt tag" class="tx-sprite-whatever tx-sprite-whatever-logo"></code></pre>

The sprite extension provides its own blank.gif (also known as spacer).

h3. Fill my sprite

You've got several possibilities to define which images should be part of the sprite:

# *directories* (array): An array of directories which contain images. The images will not be loaded recursive.

# *files* (array): The same like directories, but you have to enter files. Files will be checked if they exist.

# *files* (string): You can also assign a string to the files property, which should contains the filenames comma separated.

*Super flexibility:*

You can add typoscript instead of fixed paths. This makes it incredible flexible. One of the possibilities is the creation of a website-wide-sprite. That means a sprite which contains all used images (tt_content) on the entire website. Lower in the documentation you'll find a typoscript which creates such a sprite and replaces all tt_content outputs with the sprites. This is not always useful - you have to decide yourself if it is useful to you.