Where to put Galleria (jQuery image gallery framework) in Rails 3.1 Asset Pipeline?

Question

I'm a bit confused as to where to put a jQuery framework like Galleria in Rails 3.1's new Asset Pipeline?

I know it, technically, should go into /vendors/assets/javascripts but, it is my understanding that, the Galleria folder with the jQuery & themes wants to be in root (/galleria) of the live site in order to work correctly.

Also, while we're at it, where to put the following script so it will appear only on the page(s) with a gallery?

<script>
    $('#gallery').galleria({
        width:500,
        height:500
    });
</script>

Edit: Surprised there's no response!?! Maybe Galleria isn't that popular? These are the files I'm trying to load. They are bundled like this though I could easily move them:

vendor/
  assets/
    javascripts/
      galleria-1.2.5.js
      galleria-1.2.5.min.js
    galleria/
      themes/
        classic/
          classic-loader.gif
          classic-map.png
          galleria.classic.css
          galleria.classic.js
          galleria.classic.min.js

i thought Sprockets require_tree . would load everything in app/assets, lib/assets and vendor/assets?!?

Answer 1

I had the same problem, and it took a while to get working. Initially, it would work fine on development, but when we moved to production, Galleria silently failed, due to the asset filenames now having "fingerprints". This also seems to be an issue with jQuery UI themes, and many other such scripts.

Of course, you could just go back to the old way of doing things and throw everything in "public", but we would like the advantage of automatically merging all css/js files, and doing things the rails way.

This is how I got it working:

vendor/
  assets/
    images/
      classic-loader.gif
      classic-map.gif
    javascripts/
      galleria-1.2.5.js
      galleria.classic.js
    stylesheets
      galleria.classic.css.scss

Rename your galleria.classic.css file to galleria.classic.css.scss. Then replace the image references, like so (I had two):

url("classic-loader.gif") becomes image-url("classic-loader.gif")

UPDATE: It looks like you don't need to do this in Rails 3.1.1. Just rename the file to .css.scss and rails will automatically preprocess the url() calls for you.

In your app/assets/javascripts/application.js file, make sure you have the lines

//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .

In you app/assets/stylesheets/application.css file, make sure you have the lines

*= require galleria.classic
*= require_tree .

Finally, Galleria seems to have some fancy non-standard css loading built in. This is what was preventing Galleria from loading on our production website. Since we have already included the stylesheet, we want to disable this behavior. Simply open up galleria.classic.js (or your Galleria theme javascript file), and replace the line:

css: 'galleria.classic.css',

with:

css: false,

This will tell Galleria not to try loading the stylesheet.

One more thing - when trying to compile these assets, I ran into what is apparently a bug in Rails 3.1.0. When I ran rake assets:precompile, I got errors like:

$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
  (in /vendor/assets/stylesheets/galleria.classic.css.scss)

Long story short, you need to set this line in config/environments/production.rb:

config.assets.compile = true

This shouldn't be necessary once 3.1.1 is released.

Answer 2

I like Arjen's suggestion, though I think vendor/assets/libs is more appropriate. Here's my setup:

In config/application.rb

config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"

In app/assets/javascripts/application.js

//= require galleria/galleria-1.2.6.min.js

To initialize:

Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();

Notice how the path passed to loadTheme() begins with 'assets'.

I like this setup because it keeps the galleria folder intact. Also, it concatenates galleria-1.2.6.min.js onto my main js file (one less http request).

Answer 3

I've also stumbled upon this problem. Dividing up an existing library so it fits into the current javascripts/stylesheets structure is a bit of a hassle. Therefor you can add an extra path to your application.rb file to load assets from, like this:

    # Enable the asset pipeline
    config.assets.enabled = true
    config.assets.paths << "#{Rails.root}/app/assets/libs"

Create a 'libs' folder under app/assets, copy the galleria library to this folder and add this to your application layout file:

    <%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
    <%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>

You could also bundle up the galleria code by requiring the js files, but that's up to you.