Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support creating image sprites #124

Closed
miracle2k opened this issue Apr 4, 2012 · 5 comments
Closed

Support creating image sprites #124

miracle2k opened this issue Apr 4, 2012 · 5 comments
Labels

Comments

@miracle2k
Copy link
Owner

There are generally two options:

  1. Implement this ourselves in Python.
  2. Implement as a filter on top of an external tool.

I am leaning towards 2), because looking at the complexity of some of the tools that are out there, it seems a waste to try to duplicate their functionality.

Some links:

http://csssprites.org/
https://github.com/elentok/sprites-gen
https://github.com/yostudios/Spritemapper

@aisipos
Copy link

aisipos commented Apr 19, 2012

Seems that (2) is the right way to go. Perhaps implementing this as just another filter? Meaning place all the images in a bundle, and specify a sprite filter.Then we could implement different filters for the different tools, and give users the choice in which sprite tool to use by allowing them to pick the appropriate filter.

This does bring up the point that you might need to bundle up a large number of images, it can be tedious to list them all, it may help to allow Bundles to be specified by globs instead of just individual filenames.

@miracle2k
Copy link
Owner Author

Meaning place all the images in a bundle, and specify a sprite filter.

I think a sprite filter would probably have to operate on a bunch of CSS files, so it can replace the image definitions properly.

This does bring up the point that you might need to bundle up a large number of images, it can be tedious to list them all, it may help to allow Bundles to be specified by globs instead of just individual filenames.

Actually, that's already possible. If you install the glob2 package, you can even use ** to do recursive glob.

@aisipos
Copy link

aisipos commented Apr 19, 2012

Good points. You are correct that a more useful filter would work on the css files themselves, detect their images, sprite them, and replace the image definition. To be more specific, my use case is that I want to manage jquery-ui using webassets. I'm doing it in a very manual fashion now but would like to use webassets. Doing so completely and easily is perhaps beyond the scope of this ticket (there are other tickets related to handling combinations of js/css in one bundle), but at the moment there is no way to sprite images at all with webassets. Thanks for your links to the 3 projects above, I will take a look and see if they could be of some use here, and possibly "filterized".

@miracle2k
Copy link
Owner Author

Thanks to @bryanchow there is now a "spritemapper" filter based on https://github.com/yostudios/Spritemapper.

However, in practice I notice that the spritemapper library is certainly not perfect. Among other things, it breaks on @media directives.

I'm closing this now, but there is certainly no reason why there couldn't be other filters based on different spriting tools.

@bryanchow
Copy link
Contributor

Haha! I intended to eventually submit a pull request for the Spritemapper filter, but you beat me to it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants