In CSS files, you can get the proper name of an image asset (with the fingerprint) by using:
background-image: url(image-url("rails.png"))
but how do you do the same from a JavaScript file?
I see you are using the sass helper method.
In standard (non Sass) CSS you do something like this:
.class { background-image: url(<%= asset_path 'image.png' %>) }
The CSS file will need to have erb added to the extensions:
file_name.css.erb
For javascript the same rules apply:
file_name.js.erb
and in the file:
var image_path = '<%= asset_path 'image.png' %>'
The Rails asset pipeline guide is an excellent source of information about how to use these features.
In Rails 4, instead of using a js.erb view I recommend that you stick to the asset pipeline, and pass the URL to it with a variable instead using gon or some other technique discussed at: Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file
With gon:
app/views/layouts/application.html.erb:
<head>
<meta charset="utf-8"/>
<%= include_gon %>
app/controllers/application_controller.rb:
before_filter { gon.path = asset_path 'image.png' }
app/assets/javascripts/file.js.coffee:
alert gon.path
This method is faster because file is precompiled only once at startup, gets served by the server instead of through Rails, and on the same HTTP request as the rest of the Js.
Related
I am using GTMetrix to see my site speed and it is showing me this (check below image).
How can I Leverage browser caching to speed up the site loading speed in Rails 4?
To defer parsing JS, I have already put
<%= javascript_include_tag 'application' %>
before /html tag.
I would recommend using separate web server, like NGINX to set cache headers for .js and .css files, removing the hassle of serving static files from Rails.
If you really wanna go with a pure Rails (app/web)server, the solution is putting this piece of code in config/environments/production.rb
RAILS 5
config.public_file_server.headers = {
'Cache-Control' => "public, s-maxage=#{365.days.to_i}, maxage=#{180.days.to_i}",
'Expires' => "#{1.year.from_now.to_formatted_s(:rfc822)}"
}
RAILS 4
config.static_cache_control = "public, s-maxage=#{365.days.to_i}, maxage=#{180.days.to_i}"
Is it possible to call a ruby method inside index.html.erb that loads all my javascript files? I know you can do that directly using js but I am building a library and I want the client to be able to add the javascript files by simply calling my method.
I guess it will be something like
<%= library.get_javascripts %>
but I can't figure it out how the code would look like.
By default, any javascript/css file that you include in your app/assets folder will get loaded through your layout view, and as such, you will have access to those methods within any view in your app/views folder.
If you want to load something specifically, i.e. from the vendor folder you can just use a rails helper asset_path like so:
For a css file:
<link rel="stylesheet" href="<%= asset_path 'my_vendor_css_file.css' %>">
For a js file:
<script src="<%= asset_path 'my_vendor_js_file.js' %>"></script>
Add whichever to your index.html.erb file to load it there.
something like <%= library.get_javascripts %>
Ruby on Rails has javascript_tag and javascript_include_tag
I have a JavaScript file to use with a view. There needs to be Ruby code in it, and I need to do render in Ruby, so I understand that I can't put the JavaScript file in the asset pipeline. I can put it in the same view folder as the .html.erb file.
How do I include the JavaScript file, or use that JavaScript file for that view file? I tried javascript_include_tag in my view (that uses the asset pipeline apparently), using script src="myfile.js" for the myfile.js.erb file (but it can't find myfile.js), and names my js.erb file (users.js.erb) the same as my .html.erb file (users.html.erb), but all to no avail.
javascript_include_tag won't work js.erb declared in the view folder itself. There are three different ways you can have the javascript.
1] Write the code in the view, i.e., in the html.erb itself.
2] Create js file in public/javascripts folder and include it using javascript_include_tag.
3] In case you want to make the request as Ajax:
Create the js.erb in the view folder itself with the same name as that of the action.
In the view where some form is created which will be calling this action, make the request using :remote => true.
In the called action, use code as follows:
def action
respond_to do |format|
format.js
end
end
you can do this by
render :partial => "myfile"
you have to keep your file in controller's view directory with name _myfile.js.erb
Now you can write your own code (js,ruby) here and probably can separate out js with javascript_include_tag to avail asset pipline
This file will be first rendered by erb engine and then as javascript.
My company introduced a way to use social share buttons without providing tracking data to the social sites on page load: jquery.socialshareprivacy.
How can I use it in a Rails 3.2 asset pipeline?
The plugin consists of a JS file and a directory with css and images.
Rails 3.2 comes with jQuery 1.9.x and the jquery.socialshareprivacy.js uses functions, removed in 1.9 (.live $.browser), so you have to patch it (get patch at first gist) Using the asset pipeline requires to use different file paths for the images, so I patched the CSS (see second gist) and turned it into an SCSS (append .scss to the filename).
I basically turned three url() into image-url().
I put the JS in vendor/assets/javascripts and the whole CSS+images folder (socialshareprivacy) under vendor/assets/stylesheets
When I place the share buttons on a page (see this documentation), I set the image urls in the options:
<div id="socialshareprivacy"></div>
<script type="text/javascript">
$(function(){
$('#socialshareprivacy').socialSharePrivacy({
'css_path': '<%= asset_path 'socialshareprivacy/socialshareprivacy.css' %>',
services: {
facebook: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_facebook.png' %>'},
twitter: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_twitter.png' %>'},
gplus: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_gplus.png' %>'}
}
});
});
</script>
If you need it in several places, consider turning it into a partial.
We're using Rails 3.0 and I have a js.erb file which contains hard-coded paths for our logo images, but this means we can't easily add more logos to the application once it's deployed. Ideally, we would like to find the names of every image in a directory so users can just throw some images in the folder to add more logos.
I tried this code, http://pragprog.com/wikis/wiki/InstantGratification-2/version/21 which boils down to using ruby to send the list to an html.erb. However, since this is a js.erb and is located in our app/assets/javascripts folder, I don't know how to get ruby variables from a controller to the js.erb.
I also briefly tried importing System.IO in the js.erb to access some file APIs. Didn't work and I'm not very used to working with erb files.
You are right that the js.erb file won't have direct access to a controller's methods in the same way that a normal html.erb action view would have. You can embed the file listing logic in you js.erb directly because you can reference Ruby core library, e.g. this snippet will output the names of the files in the app/assets/images directory as a JavaScript array:
var files = [
<% Dir.entries("#{Rails.root}/app/assets/images").each do |file_name| %>
'<%= file_name %>',
<% end %>
];
Or you could implement a helper method in a helper class, e.g.
module ApplicationHelper
def image_files
Dir.entries("#{Rails.root}/app/assets/images")
end
end
and then you have to include it in your js.erb as follows:
<% environment.context_class.instance_eval { include ApplicationHelper } %>
var files = [
<% image_files.each do |file_name| %>
'<%= file_name %>',
<% end %>
];