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?!?

Broiler

Good questions all-around. Sorry I don't know the answers to them. – Unicellular

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.

Otocyst

I do not like to change library code, i.e. changing url(...) to image-url(...). I will try to let them stay in the public folder. – Abagail

Neither, but it seems changing library code is the only way to gain the awesome benefits of the Rails 3.1 asset pipeline. – Otocyst

Are there any awesome benefits for images referenced in stylesheets? Fingerprinting...? – Abagail

Thanks, that probably saved me quite a bit of time! This should be the accepted answer imo. – Astraea

@duddle Yes, images referenced in stylesheets are fingerprinted the same way all images in the asset pipeline are – Otocyst

This works for now, but I really want a solution that doesn't have anything to do with touching vendor files! – Monecious

@MattHuggins You only need to rename the files to .scss.css and split them up into various folders. If you want to have rails combine your vendor css with your own css it is always going to need a bit of shuffling. – Otocyst

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).

Soosoochow

I also tried this solution, but what works in development breaks in production. I can try loadTheme('assets/gall...') or loadTheme('/assets/gall...') or whatever, it won't find the theme. All I get is: Fatal error: Theme at assets/galleria/themes/classic/galleria.classic.min.js could not load, check theme path – Claycomb

@KarstenS. The settings I suggest apply to all production levels. Try looking for differences between your dev and prod, specifically in your asset pipeline config. – Soosoochow

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.

Biceps