jakesgordon/sprite-factory

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_"