Documentation¶

Installation¶

Just install the extension and include the static setup to your template.

Configuration¶

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:

  page.5 < lib.sprite_generator
  page.5.userFunc {
      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.

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:

  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:

1. The class of the sprite, which contains the image
2. 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.