Skip to content

Commit

Permalink
updated README and RELEASE_NOTES for new :cssurl option
Browse files Browse the repository at this point in the history
  • Loading branch information
jakesgordon committed Jan 13, 2013
1 parent 0e0b0c9 commit e8dbfa6
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 10 deletions.
22 changes: 12 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ Much of the behavior can be customized by overriding the following options:
- `:style` - specify stylesheet syntax (css, scss or sass)
- `:library` - specify image library to use (rmagick or chunkypng)
- `:selector` - specify custom css selector (see below)
- `:cssurl` - specify custom path for css image url (see below)
- `:cssurl` - specify custom css url (see below)
- `:output_image` - specify output location for generated image (default: <input folder>.png)
- `:output_style` - specify output location for generated stylesheet (default: <input folder>.<style>)
- `:pngcrush` - pngcrush the generated output image (if pngcrush is available)
Expand Down Expand Up @@ -199,43 +199,45 @@ map '--' (double dash) to a colon ':' in any source image filename. For example:
span.icon_alert { ... first file ... }
span.icon_alert:hover { ... second file ... }

Customizing the CSS Image Path
==============================
Customizing the CSS Image Url
=============================

Within the generated CSS file, it can be tricky to get the correct path to your unified
sprite image. For example, you might be hosting your images on Amazon S3, or if you are
building a Ruby on Rails application you might need to generate URL's using the `#image_path`
helper method to ensure it gets the appopriate cache-busting query parameter.
helper method to ensure it gets the appropriate cache-busting query parameter.

By default, the SpriteFactory generates simple url's that contain only the basename of the
By default, the SpriteFactory generates simple url's that contain the basename of the
unified sprite image, e.g:

SpriteFactory.run('images/icons')
SpriteFactory.run('icons')

# generates: url(icons.png)

...but you can control the generation of these url's using the `:cssurl` option:

For most CDN's, you can prepend a simple string to the image name:

SpriteFactory.run('images/icons',
SpriteFactory.run('icons',
:cssurl => "http:https://s3.amazonaws.com/")

# generates: url(http:https://s3.amazonaws.com/icons.png)

For more control, a simple token replacement can be performed using the $IMAGE token. For example, to generate calls
to custom Sass helper functions, such as those provided by [sass-rails](https://github.com/rails/sass-rails) plugin:

SpriteFactory.run('images/icons',
SpriteFactory.run('icons',
:cssurl => "image-url('$IMAGE')")

# generates: image-url('icons.png')


For full control, you can provide a lambda function and generate your own values:

SpriteFactory.run('images/icons',
SpriteFactory.run('icons',
:cssurl => lambda{|image| "url(#{image_path(image)})" })

# generates: url(/images/icons.png?v123456)
# generates: url(/path/to/my/images/icons.png?v123456)

Customizing the entire CSS output
=================================
Expand Down
1 change: 1 addition & 0 deletions RELEASE_NOTES.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
v1.5.2 - Unreleased
-------------------
* replaced `:csspath` option with `:cssurl` [issue #21](https://github.com/jakesgordon/sprite-factory/issues/21)
* ordered css rules by pseudoclass importance [issue #20](https://github.com/jakesgordon/sprite-factory/pull/20)
* added support for .ico files when using rmagick [issue #18](https://github.com/jakesgordon/sprite-factory/pull/18)

Expand Down

0 comments on commit e8dbfa6

Please sign in to comment.