Ruby on Rails 3.1 and jQuery UI images

Question

I\'m using Ruby on Rails (Edge, the development version), and Ruby rvm 1.9.2.

application.js is as follows.

//= require jquery
//= requi         


        

Answer 1

Example of a working setup:

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

Finally run this command:

    vendor/assets/images $ ln -s jquery_ui/ images

Enjoy your jQuery UI

Answer 2

Using Ruby on Rails 3.1.1, I simply placed the files as follows. No other changes were required.

• app/assets/stylesheets/jquery-ui-1.8.16.custom.css
• app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
• ...

Answer 3

I know this thread already has a lot of answers but I'm going to throw in what worked best for me.

There is a gem called jquery-ui-themes that includes the default jQuery UI themes already converted to sass using the image-path helper. So you can include the gem and get any of the default themes out of the box just by adding them to your application.css file

If you want to use your own custom theme (as I did) there is a rake task that will automatically convert the CSS file to SCSS and use the image-path helper to find the right path.

Answer 4

Combining suggestions here is what got things working for me:

Put the jQuery UI theme CSS folder in vendor/assets/stylesheets.

Put vendor.css in vendor/assets/stylesheets:

*= require_tree ./theme-css-name

In production.rb I added this:

config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name

That is what it took to get the images to get precompiled and resolve without editing the jQuery UI theme CSS file or moving the images out of the theme CSS folder.

Answer 5

For that moment, I found not a perfect but working a solution.

Assuming you have jQuery UI theme in the /vendor/assets/stylesheets/ folder. Then you have to modify application.css:

/* =require ui-lightness */

and create plugin_assets_monkey_patch.rb in the /config/initializers

Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
    AppName::Application.config.assets.paths << dir

    index_content = '/*=require_tree .*/'

    index = File.join(dir, 'index.css')
    unless File.exist?(index)
        File.open(index, 'w') { |f| f.puts index_content }
    end
end

index.css in every /vendor/assets/stylesheets/ subfolder guarantees that stylesheets like jquery-ui-1.8.11.custom.css will be compiled (if you require that subfolder).

config.assets.paths ensures that folders like /vendor/assets/stylesheets/ui-lightness/images are visible at the application root scope.

Answer 6

What worked for me was instead of having the jQuery theme CSS file in app/assets/stylesheets/ and the images in app/assets/images/. I placed them into app/assets/images/images/, and it worked. It's kind of a hack, but it seems to work at this point with minimal fudging and without modifying the CSS files.