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

I like to selectively download jQuery UI JavaScript code so that I can easily upgrade to any future versions and have a light-weight jQuery UI (include needed files only, here progressbar.js).

I have the following setup for the "Dot Luv" jQuery UI theme.

Note:

The JavaScript and CSS files are uncompressed and taken from jquery-ui-1.8.16.custom/development-bundle/ui and jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv respectively, and I rely on sprokets to minify and compress them.

The images are from jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.

Directory Structure:

app/assets/javascripts/application.js

//= require jquery
//= require jquery-ui/v1.8.16/Core/jquery.ui.core
//= require jquery-ui/v1.8.16/Core/jquery.ui.widget
//= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar
//= require jquery_ujs

app/assets/stylesheets/application.css.scss

*= require_self
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme

config/application.rb

config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')

Answer 2

There's a proposed fix in Ruby on Rails that makes precompilation of jQuery UI's images work.

(As of 3.1.0rc6, the asset precompiler uses the regular expression /\w+\.(?!js|css).+/ to find things to compile. This misses all the jQuery UI images because their names include dashes and underscores.)

Answer 3

There is now a jquery-ui-rails gem (see announcement). It packages the images as assets (and correctly references them from the CSS files) so things Just Work. :-)

Answer 4

I think you can put ui styles in app/assets/stylesheets. Do something like this:

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

In 'jquery-ui' stylsheet, something like this:

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

Answer 5

With Ruby on Rails 3.1.2 I did the following.

#app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

For the CSS files, I like to do @import instead to have more control over the load order of CSS files. To do this, I have to add the .scss extension to the app/assets/stylesheets/application.css file, and also to all CSS files I want to import, like the jQuery UI CSS file.

#app/assets/stylesheets/application.css.scss

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*/

@import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss";

/* Other css files you want to import */
@import "layout.css.scss";
@import "home.css.scss";
@import "products.css.scss";
....

Then I put everything jQuery UI related in vendor/assets like this:

jQuery UI stylesheet:

vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss

jQuery UI images folder:

vendor/assets/images/images

Note that you can create additional folder in the stylesheets path like I did here with "jquery-ui/ui-lightness" path. That way you can keep multiple jQuery themes nicely separated in their own folders.

** Restart your server to load any newly created load paths **

Ryan Bates has some excellent screencasts about the asset pipeline and Sass in Ruby on Rails 3.1, where he shows how to use the @import function in Sass. Watch it here:

• #279 Understanding the Asset Pipeline

• #268 Sass Basics

Edit: I forgot to mention that this works both locally and on Heroku on the Cedar stack.

Answer 6

What I did to get everything to work properly is as follows.

1.) Added the CSS to the assets/stylesheets folder

2.) Added the images to the assets/images folder

3.) Removed the paths to all the images in the CSS using find "url(images/" and replace with "" leaving just the image file name.

/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }

Bingo! Everything should work correctly.