Comments (6)
I haven't had a chance to use rails 3.1 yet. I'll try to look into it shortly, but until then here is some vague rambling thoughts off the top of my head...
Normally, I would suggest a Rake task that uses the sprite factory API. For example, at liquidplanner.com we use something like this:
desc 'recreate sprite images and css'
task :resprite => :environment do
begin
require 'sprite_factory'
rescue LoadError => e
abort("You are missing the sprite-factory gem")
end
SpriteFactory.report = true
SpriteFactory.csspath = "<%= image_path 'sprites/$IMAGE' %>" # we post process our CSS with ERB in order to get correct cache busting URL's in our sprites
SpriteFactory.run!('public/images/sprites/icons', :layout => :packed)
SpriteFactory.run!('public/images/sprites/medium_icons', :layout => :packed, :selector => 'img.medium_icon_')
SpriteFactory.run!('public/images/sprites/import', :layout => :vertical, :selector => 'img.import_icon_')
SpriteFactory.run!('public/images/sprites/message_icons', :layout => :horizontal, :selector => 'img.message_icon_')
SpriteFactory.run!('public/images/sprites/details_pane', :layout => :horizontal, :selector => 'img.details_pane_icon_')
SpriteFactory.run!('public/images/sprites/timesheet', :layout => :horizontal, :selector => 'img.timesheet_icon_')
# ... etc ...
end
Then a separate tool, such as sprockets, might include/require the generated css file in 1 large unified css file for your application (at liquidplanner.com we have a home grown UnifiedAssets gem that is much like the upcoming sprockets 2 stuff)
Since the location of assets are changing in Rails 3.1 it might be a good idea to extend the sprite factory with an option to specify a location for the output CSS file independent of the location that the output .PNG gets created in so that you can place them into a location that sprockets will automatically pick up (e.g. app/assets/stylesheets - or whatever it ends up in 3.1)
Going a step further, the sprite-factory gem could, in theory, be integrated into the rails 3.1 asset pipeline to automagically resprite whenever the source images are modified, maybe based off a config file (instead of a hard coded Rake tasks) but that would take a bit more thought.
If I get some time soon I'll try to take a closer look at how sprite-factory might work with the rails 3.1 asset pipeline.
from sprite-factory.
I released a new version of sprite-factory (1.4.1) which has better support for working with the Rails 3.1 asset pipeline.
You can read more about it on my blog
I also pushed a working example to github
Hope this helps!
from sprite-factory.
@jakesgordon Great, thanks for you really fast feedback.
As I didn't expect your feedback (with a working new gem) so early and desperately needed that feature, I worked on a solution on my own. My approach is a little different to yours as I dont have a new rake task for generating the sprites but instead tried to write a customer sass importer. This way you can simply do a @import "sprites:icons"
in your sass files and it'd automatically regenerate all needed assets if the current ones are outdated when the stylesheet gets loaded. It should work without any problems (and it does with some workarounds), if there weren't two bugs in sass-rails which make some troubles: rails/sass-rails#25 rails/sass-rails#26. If you like my approach I could share my code with you... :)
from sprite-factory.
Sure I'd be interested in taking a look at your code.
I think that sounds like a good next step. My last update was really just minimal amount to play nice with the new rails 3.1 asset locations. The next step would probably be along the lines of your simple import/include that automatically resprited at run-time.
Although I'd probably want to hook it somewhere into the sprockets //*= require mechanism so that it would support both css and sass, it would also need some way to accept some kind of parameterization (or maybe it could read a config file).
Something like, in application.css/scss
//*= require "sprites/icons", :selector => "img.icon_", :width => 45, :height => 45, :etc => 'etc'
or, ideally
//*= resprite "icons", :selector => "img.icon_", :width => 45, :height => 45, :etc => 'etc'
Having said that, I think the need for auto-regeneration is a lot less with sprites than with unified css/js files. In development we are constantly editing the css/js and expect those changes to appear when we refresh the browser, but dropping in a new image that needs to go into a sprite-sheet is a much rarer event, and you're unlikely to want to generate different versions for production than development, so you can usually resprite once in a dev environment and check your generated image/css files into source control.
Having to run a rake assets:resprite is probably an acceptable workflow for most cases.
from sprite-factory.
Hi i saw demo project, and it's good to understand and to fast start. But i also saw that sprite support also available at compass. Can you tell pros and cons of both gems?
Sorry for bad English.
from sprite-factory.
Sorry for late reply (I've been offline this week).
I haven't used compass myself, so I can't really give you a fair comparison. I think compass is much more than just css sprite generation - its more of an extension to sass (which itself is an extension to css) providing a framework for simpler html & css generation overall.
The sprite-factory gem only has a single purpose its purely to generate the stylesheet image and css for use in an application that does not already have that functionality.
Certainly if you are already using Compass, and it provides the features you need you should continue to use it.
Sorry I couldn't give you more detail. I plan to look deeper at compass one day but haven't had the need yet!
- Jake
from sprite-factory.
Related Issues (20)
- Feature request: adding 1px margin on all images to support browser zoom HOT 13
- Feature Request: SASS Mixins HOT 10
- Add support for Retina sprites HOT 9
- When generating SASS files csspath should use image-url instead of url HOT 3
- Maven / Gradle plugin HOT 1
- Automatically detect CRUD directory changes? HOT 2
- :hover pseudo-class optimization HOT 1
- Alternatives? HOT 6
- JRuby options? HOT 2
- Test suite fails HOT 7
- NameError: uninitialized constant Magick::MaxRGB HOT 1
- Rewrite compass mixin HOT 1
- input must be a single directory HOT 2
- `width` `height` options is not working
- mini magic support? HOT 3
- comparison of Array with Array failed error
- input must be a single directory
- Showing alt tag on top of the image
- Support for SVG sprites
- Does not seem to work with rmagick 4.0.0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sprite-factory.