I am using the jstree (https://www.jstree.com/) jQuery library. Works fine in development but in production all the standard background CSS breaks. The css calls the background icons from /app-assets/32px.png etc. These files are in my /app/assets/images and even added them to my pre-compile but none of them load (throw 404 errors).
I suspect the issue is that I deploy to production Rails is pre-compiling the images and when the jstree css calls url("32px.png") the server calls /app-assets/32px.png which will always fail because the server is expecting the /app-assets/32px-xxxxxxxxxxxxxxxx.png precompiled asset pipeline url.
I can manually dump the icon files in the public folder and hack the css but the JS seem to still trigger code for the old path. Can I get JS tree to reference the Rails asset pipeline urls?
The ended up being the CSS which calls for the background to be url("32px.png") and in the Rails world that is relative to the pre-compiled CSS that is under /assets/...
I placed my jstree images in the static /public folder and then changed the CSS to url("/32px.png") so that jstree loads them absolute from root.
There is an option to use image-url("32px.png") but the jstree JS fails when it tried to load the images as it tries to still load the relative path and I saw some double loading of the image files etc. I gave up on that and opted for the first solution.
Hope this helps someone down the road.
I have a project that includes lots of js, css and png. I couldn't divide them into javascripts and stylesheets folders. For example I have plugin1 folder it includes js and css files and I want to keep them together in same folder. Could you help me?
If you want to use the rails assets pipeline Im nearly certain that you'll have to put the files into the correct location as described in the ruby guides. Rails will then pull all this together to create, for example, the js file. It would be, I imagine, a big job to change this set up.
I guess if your set on keeping the folders the same you'll just have to point to the JavaScript/CSS files the traditional way through the header/footer with links to the file locations.
The rails guides explain the asset pipeline pretty well, and are a good place to start digging around further.
Good luck!
I downloaded a onepager from the internet. This includes a html file with a lot of assets (seperate css, javascript and image files). It is a bootstrap theme so I know I can delete those css files from bootstrap.
What is the most clean way to implement this? I don't want those assets loaded when people are using the app itself. It is only needed for the landing page.
I know I can put it in the vendor folder. Problem here is still everything gets loaded.
Can somebody put me on the right track?
We have a Grails app with loads of javascript files in the /web-app/js folder and we recently installed the Asset Pipeline Plugin... but just recently. The app is a few years old now.
We don't want to move all js files from /web-app/js folder to /grails-app/assets/javascripts folder since we might break some of the gsp files that are using those resources directly.
Let's suppose we have the file:
/web-app/js/myscript.js
We want to create a matching file in the assets folder...
/grails-app/assets/javascripts/myscript.js
... but that file should be empty except for one line like:
//=require /web-app/js/myscript.js
So the file in the assets folder only points to the real file in web-app folder.
The problem is that the above manifest line does not work.
The above might not make too much sense for just one file. But what we really want is to include several files (that already exist in /web-app/js folder) and use the Asset Pipeline Plugin to compile them all.
Is it possible?
Thanks a lot.
Unless the default changed in the more recent versions of the asset pipeline, just lose the /web-app prefix - the plugin searches both locations for compatibility reasons (think of all the plugins that aren't asset pipeline aware and would have to be modified..)
EDIT: in fact, looking at the Asset Pipeline documentation, you can loose /js as well since all folders under /web-app will be searched for the referenced file name.
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
Even destroying the whole images folder the images are still being served.
Am I missing something?
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png
Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.
Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.
You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
In production, make sure
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
Kind of frustrating there aren't better docs out there for this big of a change.
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
when referencing images in CSS or in an IMG tag, use image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
The solution I chose is #Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
The asset pipeline in rails offers a method for this exact thing.
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?