Version 2 (Armin Ruediger Vieweg, 2012-03-12 17:43)
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.
|7||2||Armin Ruediger Vieweg||
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
name = whatever
directories.10 = fileadmin/templates/images/sprite/
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"
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.
|36||2||Armin Ruediger Vieweg|
|37||2||Armin Ruediger Vieweg||
The html output will be:
|38||2||Armin Ruediger Vieweg||
<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>
|39||2||Armin Ruediger Vieweg|
|40||2||Armin Ruediger Vieweg||
The sprite extension provides its own blank.gif (also known as spacer).
|41||2||Armin Ruediger Vieweg|
|42||2||Armin Ruediger Vieweg||
h3. Fill my sprite
|43||2||Armin Ruediger Vieweg|
|44||2||Armin Ruediger Vieweg||
You've got several possibilities to define which images should be part of the sprite:
|45||2||Armin Ruediger Vieweg||
# *directories* (array): An array of directories which contain images. The images will not be loaded recursive.
|46||2||Armin Ruediger Vieweg||
# *files* (array): The same like directories, but you have to enter files. Files will be checked if they exist.
|47||2||Armin Ruediger Vieweg||
# *files* (string): You can also assign a string to the files property, which should contains the filenames comma separated.
|48||2||Armin Ruediger Vieweg|
|49||2||Armin Ruediger Vieweg||
|50||2||Armin Ruediger Vieweg||
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.