SmartSprites

I just thought i'd raise why this is still a very valid and important feature request.

The problem here arises because for organisational purposes on large or multi-part sites such as ours, we have separated files for different application components... such as our movie news and our tv guides sections of the site.

These are kept in separate files for easy compartmental workflow of the team as well as reducing file size of all css when minified on the fly by the server. If image references are shared between css files (h3 or h4 decorations, gradients, etc) because of common styling, then the above way of writing code isn't applicable, because of the split files.

eg:
Movies css:
.movies-header { background-image: url("../img/deco.png"); /** sprite-ref: sprite */ }

TV css:
.tv-header { background-image: url("../img/deco.png"); /** sprite-ref: sprite */ }

An inconvenient work around could be forced with an additional css file which overrides selectors with the applicable background image of all the separate css files and defines all the backgrounds there. Like "backgrounds-all-over-the-site.css". This is however, highly impractical and a nightmare to manage!

Hi Kevin,

The same point has been made on the discussion group, moving to 0.2.4 release and increasing priority.

S.

Implemented in trunk, binaries available from:

http://download.csssprites.org/smartsprites-0.2.4-dev.zip

Hi Kanu,

Just for your reference, I implemented the duplicate removal in a slightly different way than suggested in your patch. Instead of comparing individual image paths, I'm comparing the bitmaps individual sprite references produce. This way, even if the same image has two different file names, it will be included in the sprite only once. More importantly, this method correctly takes into account the individual image's margins and other properties I'll be introducing e.g. in: SMARTSPRITES-39. Therefore, beware with your original version: if you have two references to the same image differing only by margins (sprite-margin-*), these will be incorrectly linked to the same image within sprite, though in fact they should produce two different images within the sprite.

S.

Hi Kanu,

1) removes duplicate images. creates background-position with the same co-ordinates for same images
2) added parameter to copy non annotated CSS files.
3) added parameter to process/ignore smartsprite annotations.

I've implemented point 1) in a slightly different way, but I have a question about the use case for 2) and 3). I'm assuming that you're using a combination of these two options (copy non-annotated CSS files + ignore annotations) to simply copy your design files from the source location to the output dir? If so, maybe a simple Ant copy task, possibly with some mappers (http://ant.apache.org/manual/CoreTypes/mapper.html) would do instead?

Thanks,

S.

That sounds like a great idea and it will save a lot of unnecessary processing. Great

Closing for the 0.2.4 release.

Reopening to delete a comment.