CODEWITHSUNDEEP
jqueryruby-on-railsjquery-pluginsruby-on-rails-3.1asset-pipeline
alik
alik

Reputation: 3870

jQuery Plugins and Rails Asset Pipeline

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

  1. 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?

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

Upvotes: 1

Views: 1084

Answers (1)

alik
alik

Reputation: 3870

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.

Upvotes: 1

Related Questions