Problem with image filenames starting with a number.
Closed this issue · 2 comments
I discovered a problem when image filenames start with a number.
Sprite-factory generates css lines such as :
img.001_25 { width: 24px; height: 24px; background: url(<%= asset_path 'common.png' %>) -304px -193px no-repeat; }
It seems that in css2, class names can't start with a digit, so they need to be escaped e.g.
img.\30 01_25 { width: 24px; height: 24px; background: url(<%= asset_path 'common.png' %>) -304px -193px no-repeat; }
After doing this, I can use sprite_tag in the normal way
<%= sprite_tag( "001_25", :title => "Details", :alt => "" ) %>
- i.e. no need to use an escape in the name.
This would be a good use case for using the custom :selector option when generating your sprites. Since number only identifiers are not valid CSS classes, you would want to prepend them with "icon_" (or similar).
You can do this either with the sf command line tool
$ sf images/icons --selector "img.icon_"
or with the Ruby API
SpriteFactory.run!('images/icons', :selector => "img.icon_")
Now, sprite-factory will generate css that looks something like this:
img.icon_001 { ... }
img.icon_002 { ... }
And you can display the sprite using
<%= sprite_tag("icon_001", ...) %>
Check out the README for more information on the :selector option.
Hope that helps.
NOTE: I had a typo in previous comment (now fixed)
What was:
:selector => "icon_"
Should have been
:selector => "img.icon_"