jQuery Plugins and Rails Asset Pipeline

Question

I am using a jQuery plugin called Fancy Gallery that often calls images from the images folder within the plugin folder like background:url("../images/fancygallery/arrows_sprite.png"). My question has 2 parts

How should this plugin integrate with my rails 3.1 application? Should the folder be placed inside the vendors/assets folder? The plugin has 3 folders, css, images, js. If I put these in vendor/assets/stylesheets, vendor/assets/images, vendor/assets/javascripts, the css will surely not be able to locate the images in ../images folder since it will no longer exist after asset pipelining is done with it. So where should this be placed?
Is there a simple way in which I don't have to go in to my plugin and edit the css everywhere it is loading the images? I do not want to do this every time I update the plugin, there has to be a way I can just drop the plugin folder as is and have it work.

Upon further testing

This is the issue i am running in to. for example, in the CSS, here is a part that loads the arrow background: url('../images/fancygallery/arrows_sprite.png'). Throughout the plugin, all images are referred with a ../images like that. So when loading the plugin when the page loads, this is how it looks for the image http://localhost:3000/images/fancygallery/arrows_sprite.png but the image does not exist there, it exists in the assets/fancygallery/images folder. Is there any way I can make the ../images look in http://localhost:3000/assets/fancygallery/images/ and not http://localhost:3000/images/? Or some other workaround for this that does not require me to alter the plugin code so that I can easily update it later.

Part of the problem is

The plugin css is being loaded in my application.css.SCSS file like this

@import "fancygallery/css/uniform.aristo";
@import "fancygallery/css/jquery.fancygallery";
@import "fancygallery/css/prettyPhoto";

so all images are being relateve to that.

alik · Accepted Answer · 2011-11-04 06:26:37Z

1

I was able to solve this by adding a fancygallery-plugin folder and then dropping the fancygallery folder in there. After asset:precompile, the fancygallery folder was available in the assets folder. Then I simply called the css and js files directly instead of from inside a application.css.scss file, like this:

<%= stylesheet_link_tag    "fancygallery/css/uniform.agent.css" %>
<%= stylesheet_link_tag    "fancygallery/css/jquery.fancygallery.css" %>
<%= stylesheet_link_tag    "fancygallery/css/prettyPhoto.css" %>
<%= javascript_include_tag "fancygallery/js/jquery.uniform.min.js" %>
<%= javascript_include_tag "fancygallery/js/jquery.fancygallery.min.js" %>
<%= javascript_include_tag "fancygallery/js/jquery.prettyPhoto.js" %>

This makes the image references just work how the plugin developer intended it to be and they load fine.

answered Nov 4, 2011 at 6:26

alik

3,8689 gold badges43 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RubyRedGrapefruit Over a year ago

Where did you put the "fancygallery-plugin" folder?

Collectives™ on Stack Overflow

jQuery Plugins and Rails Asset Pipeline

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related