CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
Blankman
Blankman

Reputation: 267020

How to load different assets based on my layout?

I have 3 layouts in /views/layouts for 3 distinct sections of my website.

My assets looks like:

/javascripts/layout1/*.js
/javascripts/layout2/*.js
/javascripts/layout3/*.js

/stylesheets/layout1/*.css
/stylesheets/layout2/*.css
/stylesheets/layout3/*.css

Now in a specific layout, say layout1, how can I only include the styles/javascript files for this layout?

Upvotes: 2

Views: 1066

Answers (2)

Developer
Developer

Reputation: 6223

You can achive this by following the five steps

Note: I am assuming layout1 layout2 and layout3 are manifest files like application.js and application.css

1) Create a manifest file for new layout

create the following js files on assets/javascripts/

layout1.js

//= require_tree ./layout1

layout2.js

//= require_tree ./layout2

layout3.js

//= require_tree ./layout3

create the following css files on assets/stylesheets

layout1.css

/*  
*= require_tree ./layout1
*/

layout2.css

/*
*= require_tree ./layout1
*/

layout3.css

/*
 *= require_tree ./layout1
 */

2) Add this line to config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( layout1.js layout1.css layout2.js layout2.css layout3.js layout3.css )

3) Include the following line to respective layouts

layout1.html.erb

<%= stylesheet_link_tag    'layout1', media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'layout1', 'data-turbolinks-track' => true %>

layout2.html.erb

<%= stylesheet_link_tag    'layout2', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'layout2', 'data-turbolinks-track' => true %>

layout3.html.erb

<%= stylesheet_link_tag    'layout3', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'layout3', 'data-turbolinks-track' => true %>

4) Include layout in your controller

layout_one_controller.rb

class LayoutOneController < ApplicationController
    layout 'layout1'
    def index
    end
end

layout_two_controller.rb

class LayoutTwoController < ApplicationController
    layout 'layout2'
    def indiex
    end
end

layout_three_controller.rb

class LayoutThreeController < ApplicationController
    layout 'layout3'
    def index
    end
end

5) Restart your application

Upvotes: 6

Richard Peck
Richard Peck

Reputation: 76774

If you want to use layout1 assets in your app, just call it in your layout:

#app/views/layout/layout_1.html.erb
<%= stylesheet_link_tag    :layout_1, media: 'all',  %>
<%= javascript_include_tag :layout_1 %>

--

As mentioned by @Ramesh Kumar Thiyagarajan, you'll have to include any extra asset files (over and above application.css/.js) in your assets.rb initializer:

#config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( layout_1.js layout_1.css )

--

You'll also have to define when each layout is called:

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   layout :set_layout

   private

   def set_layout
      # conditional for determining layout
   end
end

Upvotes: 0

Related Questions