Rails 4.
Hi I d'like to add an lightbox to my application. I have follow the step-by-step instructions for Lightbox but my photo gallery doesn't respond at all
I have called (:all : application) the file necessary in my application.html.erb. My view is ok I think the problem reside in my way to call the vendor files.
I place all the lightbox files under vendor/assets/javascript and vendor/assets/stylesheets respectively. I did create an vendor/assets/images for the Lightbox images file (close icon...) and my application.html.erb contains:
stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
javascript_include_tag "application", "data-turbolinks-track" => true
Nothing show up properly concerning my photo-gallery. any help?
in your /assets/javascripts/application.js add this line after //= require jquery:
//= require lightbox-2.6.min
same thing for your /assets/stylesheets/application.js add this line :
//= require lightbox
I added the following line that #medBo told me too.
But for the IMG folder I placed it inside the public folder.
add '.scss' to the lightbox.css file and edit
line 195 to 'background: url(/img/close.png) top right no-repeat;'
then you can keep the img folder inside the assets folder where it belongs if you are going to compile assets localy
Probably you can take a look at these gems:
Lightbox Rails
Lightbox for Bootstrap 3
Related
I have a vendor library that has its own directories and many files (js and css a.o.). I have placed this as a folder in my_app/vendor/assets/external_library/. How can I refer to files from this directory, for example in my views?
For example, there are the following two files:
my_app/vendor/assets/external_library/editor.js
my_app/vendor/assets/external_library/contents.css
To use these I have added:
In application.js: //= require editor
In application.css.scss: #import "contents";
In my view: <script src="editor.js"></script>
It does load the view page in development. But when I go to the page's source code and click on the link to the js file, it is unable to find that file. Am I doing something wrong?
Add this to your application.rb file:
config.assets.paths << Rails.root.join('vendor', 'assets')
and then require these in your application.js:
//= require external_library/editor.js
and application.css.scss:
#import "external_library/contents";
In your view you should only need to have the following:
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
So, I'm learning to build Rails app, I've written the controller and everything looks fine, then moved to get the views.
As usual I downloaded a template and started to move it into my app (normal html template from html5up.net).
All JS files I've put them in app/assets/javascripts.
All CSS files I've put them in the app/assets/stylesheets.
and in the app/views/layouts/application.html.erb I've included them all using the javascript_include_tag and stylesheet_link_tag
so everything in theory should be fine.
In my routes file I got those 2 lines:
resources :users
root 'users#new'
When I start the server and go to the root route localhost:3000 everything is rendered smoothly and with awesome style, however if I try to access the very same page but from it's original route localhost:3000/users/new somewhy the html I get doesn't include images and scripts, and the style is messed up (probably because no images/js), same goes for other pages from the users controller.
I tried putting the js/css files in public folder and linking to them but it gives exact same results.
Any idea what's going wrong and how to fix it?
I'm using Rails 4.2.1
Rather than including each of the stylesheets / javascripts directly, reference them within application.css and application.js respectively. This will add them to the asset pipeline - making the application run faster amongst other things (http://guides.rubyonrails.org/asset_pipeline.html).
So instead of referencing the scripts directly in application.html.erb, just ensure application.html.erb has these to lines in the head section:
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
Then check that application.css exists in app/assets/stylesheets and that it includes this line:
*= require_tree .
This tells it to include every .css file that is within the assets/stylesheets directory (alternatively reference each file individually with a require statement)
Similarly, ensure app/assests/javascripts/application.js includes:
//= require require_tree .
And that the javascript files are in app/assets/javascripts
Put all the images in app/assets/images
Change all the references to the images in CSS files from
url("images/example.png")
to
url(image_path("example.jpg"))
or
image-url("example.png")
And you should be good to go... the rails helpers should handle the relative path issues that it looks like you've been experiencing.
I know it's kinda old, but forgot to post the answer for this.
The problem was in the view html codes, the <%= stylesheet_link_tag "application", media: "all" %> was inside a <noscript> tags so they didn't work.
<%= javascript_include_tag "application", params[:controller] %>
I added the above tag in my application.html.erb, but it seems my js files are not loaded according to controller. When i navigate to localhost:8000/sessions it does not load sessions.js
Rails now uses the asset pipeline. In app/assets/javascripts/application.js you can require all your of javascript files with "magic comments":
//= require_tree .
Your javascript can now be inside app/assets/javascripts/sessions.js or even app/assets/javascripts/sessions.js.coffee if you want to use coffeescript.
Note that this will require all Javascript files on every page, which is often a desired effect because the client can cache the javascript and thus only has to download it at the first request. For more information read the Rails Guide I linked to above.
You can load controller specific js files as follows
<%= javascript_include_tag "application", controller_name %>
So that, if you navigate to localhost:8000/sessions it will load sessions.js file. And it is not necessary to add //= require_tree . in application.js.
I am reading rails guides documentation for asset pipeline.
It states that coffeescript page specific generated files
are by default ready to user if there is a require_tree directive on the manifest.
This is not working with me I have to do include this
<%= javascript_include_tag params[:controller] %>
on the specific controller.
What am I missing ?
The asset pipeline will compress all of your JS into a single file, application.js. In order to call JS for a specific page, you will need to organize your JS by controller and action. There is a gem, RailsScript that does this automatically and it's compatible with Turbolinks which can give you a single page application feel.
RailsScript only takes a few minutes to learn, https://github.com/gemgento/rails_script.
A specific example using rails script:
# app/assets/javascripts/users.js.coffee
window.App ||= {}
class App.Users extends App.Base
show: ->
alert('The users#show action!')
I think you are misunderstanding the asset-pipeline in general. It doesn't load the javascript-files individually, but rather all the .js.coffee files will get compiled into one big js-file, which you have to include in your views/layout like this
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
If you want some js-code that is only available in one view, you definitely should not include that into the asset-pipeline.
Not sure if I've misunderstood your first paragraph, but I think what the line means is that if your application.js manifest contains a line like:
//= require_tree .
Then yes indeed, page specific javascript, or coffeescript will be loaded, not only for that specific page, for for all pages. If you want to constrain assets to certain pages like you've described, you will need a file located in app/assets/javascripts/ with the pluralized name of the controller, and .js.
I would personally create this as another manifest for that specific page, that way I can load multiple assets. Lets say you have a controller called UsersController, with various assets used by that controller's views. What you then need, in order for the line you wrote in your question to work, is a .js filed users.js or users.js.coffee in the app/assets/javascript directory.
Alternatively, to maintain the naming convention, I do something like this:
<%= javascript_include_tag "application-#{params[:controller]}"%>
and then of course name my file appropriate (application-users.js).
Also, when you do this, you'll want to stop your page-specific assets from loading for all controllers. Simply remove the //= require_tree . line and replace it with explicit //= require lines as needed.
Here's a way to do page-specific javascript in rails.
Install the jquery-readyselector.js plugin. (It's 18 lines)
a. Copy the contents of https://raw.github.com/Verba/jquery-readyselector/master/jquery.readyselector.js
b. Paste the contents to a new file at assets/javascripts/jquery_readyselector.js
c. Require jquery-readyselector
// assets/javascripts/application.js
//= require jquery_readyselector
//= require_tree .
Create CSS classes so we have a way to reference each page individually.
<%# views/layouts/application.html.erb %>
<body class="<%= controller_name %> <%= action_name %>">
Now we can scope our javascript to our page using CSS.
// assets/javascripts/posts.js
$(".posts.index").ready(function() {
});
I was wondering if there was a way to ignore a css file from being added to the manifest application.css file.
The reason why I want to do this is that I have two versions of the site, a mobile version, an an web version. The mobile version's css is currently being added to the manifest, and messing with the style of the main page.
Is there anyway to configure the manifest file to exclude a certain css file?
Remove the require_tree directive and add just the files you want, in the order you want them to application.css. Leave out the mobile CSS file.
To access the mobile CSS file you need to add it to the precompile list in
production.rb:
config.assets.precompile += ['mobile.css']
This will allow you to use the standard rails helper to access the mobile css:
<%= stylesheet_link_tag "mobile" %>
as distinct from the application.css file.
One tip for these situations is that you can share CSS files between manifests. For example, if you have a CSS reset in a separate file this can be added to both manifests (assuming you make the mobile css a manifest too).
What I ended up doing was creating subdirectories under app/assets/stylesheets called app/assets/stylesheets/web and app/assets/stylesheets/mobile
Then place an application.css with the standard:
/* ...
*= require_self
*= require_tree .
*/
inside each of your new web and mobile folders. Then to access them:
# just use this
<%= stylesheet_link_tag "web/application", :media => "all" %>
# or this as needed
<%= stylesheet_link_tag "mobile/application", :media => "all" %>