Monday, March 26, 2012

Converting CSS background images to use asset pipeline

In order to use the asset pipeline in Rails 3.1, not only do you have to move your assets (images, css, javascript, fonts) to the appropriate folders in the assets folder, but you also have to modify the css files so that background images point to the new location.

To make this easier, I used a couple of regex replaces to swap out the old formats for the new format.

For example, I had the following css class in one of my css files.
.standard_form form fieldset input.submit_button {
    background-image: url('../images/common/donate_now_new.png');
    width: 202px;
    height: 50px;
    border: none;
    color: white;
    font-size: 19px;
    text-shadow: 2px 2px 2px #666666;
    font-weight: bold;
    cursor: pointer;
}
I needed to convert the backround-image line to:

image-url('common/donate_now_new.png')

I used the following regex search and replace strings to do so:

Search: (url)\('(\.\.\/images\/)(.*)'\)
Replace: image-url('$3')


I also had background-image statements with the following format: url(../../images/common/input_bg2.png)

I used the following regex to make the replacement for these

Search: (url)\((\.\.\/\.\.\/images\/)(.*)\)
Replace: image-url('$3')

Once I had completed all of the replacements, I changed the file name, adding scss to the end to ensure it would be compiled and the image-url method would substitute the appropriate address for me. 

No comments:

Post a Comment