Wikibooks

Ruby on Rails/ActionView/Layout Files

< Ruby on Rails | ActionView

Layout Files

edit

The previous chapter explained how to render output to the default layout or to a special layout provided by you. You may have already looked inside such a layout file. Its default content will be similar to 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Products: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>
<p style="color: green"><%= flash[:notice] %></p>
<%= yield %>
</body>
</html>

Typically a layout's head section has an embedded tag for a stylesheet and the complete content is represented using a yield-tag

Asset tags

edit

All asset tags, such as the "stylesheet_link_tag" are little helpers that generate the proper HTML for you. You can use this tags to embed CSS, Java Script and images or to provide RSS-feeds.

To embedded Javascript or CSS, you can use the according helpers: 

<%= javascript_include_tag "my_javascript" %>

or if you want to include CSS 

<%= stylesheet_link_tag "my_css" %>

All these files are located in the public directory public/javascripts or public/stylesheets. There is no need to provide the extension as Rails will handle it automatically. To include multiple files just provide all the file names inside the tags: 

<%= stylesheet_link_tag "my_css", "my_other_css" %>

Of course these files can be placed anywhere in your application, just be sure to provide the proper path: 

<%= stylesheet_link_tag "my_css", "files/stylesheet" %>

To load all files inside your public/javascripts or public/styleheets use the appropriate tag with :all 

<%= javascript_include_tag :all %>

When embedding CSS you can specify the media attribute inside the tag: 

<%= stylesheet_link_tag "my_print", media => "print" %>

No modern web site is complete without using pictures and graphics so Rails provides you with its own image tag: 

<%= image_tag "my_image" %>

As with JavaScript or CSS the Rails will look into public/images by default to find the proper picture. Note: that you do not need to tell Rails if you use .jpg, .gif or .png! You can also provide a custom path and HTML attributes 

<%= image_tag "images/my_image", :height => 50, :width => 50, :alt => "This is my image" %>

Yield

edit

"yield" means that this is sort of a placeholder for the view that will be displayed inside your layout, but you are not limited to using a single yield: 

<body>
  <%= yield :header %>
</body>

To get access to the :header you can use the "content_for" method. So with the above example, that might be: 

<% content_for :header do %>
  <h1>Hello Rails - This is my header</h1>
<% end %>

Named yields can be used for menus, footers or sidebars to ease up maintenance. Just put them in your code and they will be placed in the right place.

Partials

edit

It is time for a little more DRY. If you have a lot of HTML code that repeats itself in many different views (such as forms, dynamic menus,...) you might want to consider using partials: With partials, move the code that you use often into a separate file and place a link inside the files that should use your partials 

<%= render :partial => "form" %>

This will look inside the folder from where the partial gets called for a file named _form.html.erb. Use an underscore in your filename to tell Rails that it is a partial.

To move your partial to a separate folder use 

<%= render :partial => "partials/form" %>

will look in "partials" for a file called _form.html.erb

Overall partials minimize the effort of copying the same code over and over, but to keep the needed code in single files that can be altered easily and used as often as desired.

Retrieved from "https://en.wikibooks.org/w/index.php?title=Ruby_on_Rails/ActionView/Layout_Files&oldid=3677018"