How to use Galleria plugin with Rails 4 Pipeline

Question

I've recently had a trouble making Galleria plugin work with Rails 4 Pipeline and it took me a while to figure out how to make it work, so I wanted to share the solution in case somebody has the similar problem.

1) After downloading the plugin, put galleria-1.3.3.js ( it's the current version on the day I write it ) and galleria.classic.js ( or other style js file ) to vendor/assets/javascripts

2) Put galleria.classic.css ( or other theme stylesheet) to vendor/assets/stylesheets

3)Add //= require galleria-1.3.3 and //= require galleria.classic to your application.js file and *= require galleria.classic to application.css file

4) Asset pipeline adds fingerprints to the images and that makes it difficult to access them via usual css, so it's needed to add 'scss' to your galleria stylesheet, like this galleria.classic.css.scss and change url(classic-map.png) to asset_url("classic-map.png");and the same with the second image.

5)Open galleria.classic.js file and find there css:"galleria.classic.css" or something like that, and change it to css: false

6) Now you just need to add Galleria.run('#galleria'); or something different for other elements in some js file` and that should work :)

PS I am a noob in Rails and might have made some foolish mistakes, but I hope this will be helpful for anybody :)

Snuff

exactly what i'm looking for, thks a lot – Exactitude

Answer 1

I've just used this in Rails 4.1 as well with Galleria version 1.3.5. Copy the files from the main galleria folder into the various parts. Note that I'm using the classic/default (free) theme.

# app/assets/images
classic-loader.gif
classic-map.png

# app/assets/javascripts
galleria-1.3.5.js
galleria.classic.js

# app/assets/stylesheets (rename with .scss extension)
galleria.classic.css.scss

Open up galleria.classic.js and edit the line css: '...' to be css: false (around line 17 if you don't alter the code).

That's all I had to do in order to get it working with Rails 4. I played around with placing the files in the vendor/assets folders, but that became a nightmare fairly quickly. I found the above solution to be the simplest/cleanest.

Update: 2016-02-02

I'm still using this same setup with a Ruby 2.2.3, Rails 4.2.4, Galleria 1.4.2 setup.

Make sure in your galleria.classic.scss stylesheet you use the image-url("classic-map.png") helpers. No problems with this current setup.

Eaves

gallerica.classic.css renamed to gallerica.classic.scss or gallerica.classic.css.scss? Was it mistyped? – Bellwether

@V-SHY: No, not mistyped. If you use the .scss extension, you do not need to use .css.scss. I routinely only use .scss extensions in any of my Rails stylesheets because a .scss can process BOTH standard CSS as well as SASS. Note that CoffeeScript assets do NOT follow this. If you have a .js.coffee file, it can only process CoffeeScript code, NOT raw JavaScript. – Eaves

@V-SHY: In addition, I always rename application.css to application.scss and manually control the ordering of my stylesheets via @import "sass_variables"; statements. That way you don't run into issues where SASS variables aren't defined before they are used. – Eaves

thanks for clear the doubt, by the way, I found a mistyped error, the gallerica should be galleria right? – Bellwether

@V-SHY: whoops, you are correct! I thought you were referring to the extension, not the filename itself. I fixed the typo in the answer. – Eaves

Answer 2

Thank you this was absolutely amazing and exactly what I needed (I wish I'd found this before the 18 hours of hair pulling trying to get this to freaking work)!

I'll add some more things that might be helpful to whomever:

1) I had to change to galleria.css.scss.erb, so that it would interpolate the class-loader like this: background: url(<%= asset_path "/galleria/classic-loader.gif" %>) (not sure why, but the asset_url didn't work for me)

2) Related, I also had to take the classic-map and loader images and put them in app/assets/images

3) Per Galleria, the files I moved were the min.js files, not regular .js

4) In the header of the view, I added:

<script src="<%= asset_path "/galleria-1.3.5.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.flickr.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.classic.min.js" %>" ></script>

5) In the script on each view to load Galleria, I modified their instructions like such:

Galleria.loadTheme("<%= asset_path "/galleria.classic.min.js" %>");

Jingo