CODEWITHSUNDEEP
ruby-on-rails
Juned Ansari
Juned Ansari

Reputation: 5283

how do i separate css, javascript, images for admin side and visitor side in ruby on rails

i am very new to ruby on rails, i am confused with css and java-script file include method in ruby on rails. when i am using below code for file include in visitor side it will includes all css and javascript files on every page including admins css and javascript also.

<head>
    <title>Content management system</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks' => true %>
    <%= csrf_meta_tags %>
</head>

when i view source of html file it will look like this

<head>
    <title>Content management system</title>
    <link rel="stylesheet" media="all" href="/assets/admin/colorbox.self-c93dd376833c0e267b594921dd5498fcbb3f446331a35dc75372b26fd8c61167.css?body=1" data-turbolinks="true" />
<link rel="stylesheet" media="all" href="/assets/bootstrap.min.self-be6a645f213f356601ff235da5760f5080076f6168dec3d19d33587edbf75b95.css?body=1" data-turbolinks="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks="true" />
    <script src="/assets/jquery.self-167adc1826a31cef2040f73c4d3996900974f3b4578f72e2c1bfb814d66ca2fb.js?body=1" data-turbolinks="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks="true"></script>
<script src="/assets/bootstrap.min.self-f2d64b74536a49f843b022431e37325973468a71c9b362343deb0b6c582e5ba0.js?body=1" data-turbolinks="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks="true"></script>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Y+tOunCBKVwpv7hfpg2+OFA7XBQTjldPTMRb3SC8DHUkUfrOfxkMBYiFLwGPSVAJiCzS21WsFtY179tcsa9I9A==" />
</head>

i wanted only specific css and javascript files should be included even in visitor side.

folder structure this is just an example structure 

app
-assets
 -fonts
 -mages
  -admin
    -1.jpg
    -2.jpg
  -visitors
     -3.jpg
     -4.jpg 
 -javascripts
  -1.js
  -2.js
  -admin
    -3.js 
 -stylesheets
   -1.css
   -2.css
   -admin
    -3.css

Upvotes: 1

Views: 312

Answers (2)

bntzio
bntzio

Reputation: 1324

Just add the assets in each individual file you want it to work.

In erb files:

<%= stylesheet_include_tag 'your_css_file.css' %>

<%= javascript_include_tag 'your_js_file.js' %>

In haml files:

= stylesheet_link_tag 'your_css_file.css'

= javascript_include_tag 'your_js_file.js'

In your application.html.erb file (using conditionals):

<!-- Only load the assets when in contacts view -->
<% if current_page?(contacts_path) %>
  <%= stylesheet_include_tag 'your_css_file.css' %>
  <%= javascript_include_tag 'your_js_file.js' %>
<% end %>

Upvotes: 0

Anthony E
Anthony E

Reputation: 11235

In your code example application.js and application.css are manifest files used by the asset pipeline to declare what gets loaded when you call stylesheet_link_tag or javascript_include_tag from within your view.

However, the application filename is just what's used as the default manifest name by Rails. You can change this to whatever you want as long as it matches what's called from stylesheet_link_tag or javascript_include_tag. So, to isolate what specific assets get loaded in your admin and main site, all you need to do is break application.js and application.css into separate files, each being loaded within that respective domain of your site.

You may also need to add the new manifest files to be loaded by the asset pipeline as well:

config.assets.precompile << 'app/assets/javascripts/admin.js'
config.assets.precompile << 'app/assets/stylesheets/admin.scss.css'

The definitions within your app would look something like this:

app/views/layouts/admin.html.erb

<head>
    <title>Content management system</title>
    <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks' => true %>
    <%= javascript_include_tag 'admin', 'data-turbolinks' => true %>
    <%= csrf_meta_tags %>
</head>

app/controllers/admin_controller.rb

class AdminController < ApplicationController
   layout 'layouts/admin'

   # ...
end


app
-assets
 -fonts
 -mages
  -admin
    -1.jpg
    -2.jpg
  -visitors
     -3.jpg
     -4.jpg 
 -javascripts
  -1.js
  -2.js
   admin.js <-- included by admin.html.erb layout
  -admin
    -3.js 
 -stylesheets
   -1.css
   -2.css
   admin.css <-- Also included by admin.html.erb
   -admin
    -3.css

Then define admin.scss.css and admin.js just as you would your application manifest:

admin.js

 *= require_tree './admin'

Upvotes: 2

Related Questions