Databases Reference
In-Depth Information
Now the next step is to change the HTML code to render individual images from
the preceding combined image:
<html>
<body>
Arrow Up : <img src='spacer.png' width='16px' height='16px'
style='background:url(arrow_sprite.png) 0 48;' />
Arrow Down : <img src='spacer.png' width='16px' height='16px'
style='background:url(arrow_sprite.png) 0 0;' />
Arrow Right : <img src='spacer.png' width='16px' height='16px'
style='background:url(arrow_sprite.png) 0 32;'/>
Arrow Left : <img src='spacer.png' width='16px' height='16px'
style='background:url(arrow_sprite.png) 0 16;'/>
</body>
</html>
This means we are now using one large image to load four different images. This
concept is called CSS image sprites. The combined image is called a
sprite image
.
This technique is very good but it requires a lot of development effort. In the case
of Portal, we need to create many image sprites for portlets, themes, and so on.
We also need to add a lot of CSS styles to use sprite images. Fortunately, Liferay
Portal provides built-in support for CSS image sprites. The Liferay plugin deployer
automatically generates sprite images by combining all the images in one folder.
Along with that it also generates a file called
_sprites.properties
. This file stores
the size and coordinates of each image. Liferay tag libraries internally read this
information and automatically generate the
image
tags to load the specific image
from the sprite image.
Let's assume, in our custom theme, that we included the previous four images in
the
images\arrows
folder. Now when we deploy the theme on Liferay Portal, it
generates the
_sprite.png
,
_sprite.gif
, and
_sprite.properties
files in the
same folder. Both of the images will look similar to the image shown in this section.
The content of the
_sprite.properties
file will look as follows:
/arrows/01_down.png=0,16,16
/arrows/01_left.png=16,16,16
/arrows/01_right.png=32,16,16
/arrows/01_up.png=48,16,16
