OnkelTem's sandbox: Sprites

Making and using CSS sprites has always been a tricky task for webmasters. Of course, with the emerge of SASS and libraries like Compass, working with sprites became much easier.

But yet Drupal and SASS has no interworking parts, so when you build a website on Drupal, you have mere few options for using sprites generation — with you theme image files. Is it enough for Drupal? What about all those images which we upload to nodes or taxonomy terms or any other entity using Image field and then use them as category icons, menu icons or basically — for photo thumbs?

Now Drupal can do it for you automatically. This module generates CSS sprites from images of a specific image style. You can configure this on an image style page.

Features

• Automatically generates sprites images (PNG or JPEG) and corresponding CSS file.
• Places generated sprites and CSS file into public://sprites/ directory.
• Automatically replaces <img> tags with <span> tags.
• Support images states. I.e. you can have :hover, .active or any other.
• Support vertical and horizontal sprites (this is configurable)
• Allows you to specify background color (with alpha channel) of the sprite image.
• Allows you to set custom CSS class on <span> tags replacing images.

Limitations

• Working only with files available in {file_managed} table.
• Spriting images must locate in a subdirectory of your files directory. I.e. you can't make sprites from images uploaded in the root of files directory. This limitation is deliberately, to keep order.
• Sprites are made using GD library (you can't use another image toolkit).

Changelog

• Sprites caching by browsers is improved (i.e. not caching).
• CSS generation is optimized and is carried out in hook_preprocess_html() now.
• Improved the detection of CSS/sprites regeneration cases.
• Sprites caching at Drupal side is enhanced.
• Fixed some UI texts.
• Minor fixes

Please test and provide feedback!