Layouts and content_for in Ruby on Rails

Introduction

Layouts help you keep a common look for many pages.
content_for lets you add special parts to that layout from each page.

You want all pages to share the same header and footer.

You need to add a custom title or script on some pages only.

You want to keep your HTML organized and avoid repeating code.

You want to insert extra content like ads or banners in specific pages.

You want to separate page-specific content from the main layout.

Syntax

Ruby on Rails

In layout file (e.g., application.html.erb):
<%= yield %>  <!-- main content -->
<%= yield :sidebar %>  <!-- named content -->

In view file:
<% content_for :sidebar do %>
  <p>Sidebar content here</p>
<% end %>

yield shows the main content from views.

content_for defines extra content blocks you can place anywhere in the layout.

Examples

This layout shows header and footer around the main page content.

Ruby on Rails

<!-- layout.html.erb -->
<html>
  <body>
    <header>Site Header</header>
    <%= yield %>
    <footer>Site Footer</footer>
  </body>
</html>

This layout adds a sidebar area that can be filled by views using content_for :sidebar.

Ruby on Rails

<!-- layout.html.erb -->
<html>
  <body>
    <header>Site Header</header>
    <%= yield %>
    <aside>
      <%= yield :sidebar %>
    </aside>
    <footer>Site Footer</footer>
  </body>
</html>

This view fills the sidebar block defined in the layout.

Ruby on Rails

<!-- view.html.erb -->
<h1>Welcome</h1>
<p>Main page content.</p>
<% content_for :sidebar do %>
  <p>Links and info for sidebar.</p>
<% end %>

Sample Program

This example shows a layout with a dynamic title and footer. The home page view sets a custom title and footer content using content_for. The main content appears in the <main> area.

Ruby on Rails

<!-- app/views/layouts/application.html.erb -->
<html lang="en">
  <head>
    <title><%= content_for?(:title) ? yield(:title) : "Default Title" %></title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <%= yield %>
    </main>
    <footer>
      <%= yield :footer %>
    </footer>
  </body>
</html>

<!-- app/views/home/index.html.erb -->
<% content_for :title do %>
  Home Page
<% end %>

<h2>Welcome to the Home Page</h2>
<p>This is the main content area.</p>

<% content_for :footer do %>
  <p>Contact us at [e-mail]</p>
<% end %>

Important Notes

If you don't use content_for for a named yield, it will show nothing.

Use content_for? to check if content exists before showing it.

Layouts keep your site consistent and easy to update.

Summary

Layouts wrap your pages with shared HTML like headers and footers.

content_for lets views add special content to named spots in layouts.

This helps keep your code clean and your site consistent.

Practice

1. What is the main purpose of using content_for in Rails layouts?

easy

A. To define the main layout file for the application

B. To insert specific content into named sections of a layout

C. To create a new controller action

D. To style the page with CSS

Solution

1. Step 1: Understand the role of layouts

   Layouts provide a shared structure like headers and footers for pages.

2. Step 2: Understand content_for usage

   content_for allows views to add content to specific named areas in the layout.

3. Final Answer:

   To insert specific content into named sections of a layout -> Option B

4. Quick Check:

   content_for inserts content into layout spots [OK]

Hint: Remember: content_for fills layout placeholders [OK]

Common Mistakes:

• Confusing content_for with layout definition
• Thinking it styles pages directly
• Mixing it up with controller actions

2. Which of the following is the correct syntax to define a content block named :sidebar in a Rails view?

easy

A. <%= yield :sidebar %>

B. <% content_for :sidebar = 'Sidebar content' %>

C. <% sidebar_content 'Sidebar content' %>

D. <%= content_for :sidebar do %>Sidebar content<% end %>

Solution

1. Step 1: Recall content_for block syntax

   The correct way is to use content_for :name do ... end with ERB tags.

2. Step 2: Check each option

   <%= content_for :sidebar do %>Sidebar content<% end %> uses <%= content_for :sidebar do %> ... <% end %> which is correct syntax. <% content_for :sidebar = 'Sidebar content' %> tries assignment incorrectly. <%= yield :sidebar %> is for yielding, not defining. <% sidebar_content 'Sidebar content' %> is invalid.

3. Final Answer:

   <%= content_for :sidebar do %>Sidebar content<% end %> -> Option D

4. Quick Check:

   Use content_for :name do ... end to define content [OK]

Hint: Use content_for :name do ... end to define blocks [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Confusing yield with content_for
• Missing ERB tags or using wrong ones

3. Given the layout code:

<html>
<body>
  <header><%= yield :header %></header>
  <main><%= yield %></main>
  <footer><%= yield :footer %></footer>
</body>
</html>

And the view code:

<%= content_for :header do %>Welcome Header<% end %>
Main content here
<%= content_for :footer do %>Footer Info<% end %>

What will be rendered inside the <main> tag?

medium

A. Footer Info

B. Welcome Header

C. Main content here

D. Nothing

Solution

1. Step 1: Understand yield usage in layout

   yield without arguments renders the main view content. yield :header and yield :footer render named content blocks.

2. Step 2: Identify main content in view

   The main content is the part outside content_for blocks: <p>Main content here</p>.

3. Final Answer:

   <p>Main content here</p> -> Option C

4. Quick Check:

   Main content = yield without args = <p>Main content here</p> [OK]

Hint: Main content is outside content_for, shown by plain yield [OK]

Common Mistakes:

• Thinking content_for blocks appear in main yield
• Confusing named yields with main yield
• Ignoring content outside content_for

4. You have this layout snippet:

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

And this view code:

<% content_for :title = 'Page Title' %>

Why does the title not appear in the header when rendering?

medium

A. Because content_for must use a block, not assignment

B. Because yield is missing in the layout

C. Because the layout file is not linked properly

D. Because content_for only works in controllers

Solution

1. Step 1: Check content_for syntax in view

   The code uses assignment content_for :title = 'Page Title', which is invalid syntax.

2. Step 2: Correct usage of content_for

   content_for requires a block: content_for :title do 'Page Title' end or content_for(:title) { 'Page Title' }.

3. Final Answer:

   Because content_for must use a block, not assignment -> Option A

4. Quick Check:

   content_for needs blocks, not assignment [OK]

Hint: Always use blocks with content_for, not assignment [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Forgetting to yield named content in layout
• Assuming content_for works in controllers

5. You want to create a layout that shows a custom page title if provided, or a default title otherwise. Which layout code correctly uses content_for and yield to achieve this?

hard

A. <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title>

B. <title><%= yield(:title) || 'Default Title' %></title>

C. <title><%= content_for(:title) || 'Default Title' %></title>

D. <title><%= yield :title if content_for?(:title) %></title>

Solution

1. Step 1: Understand content_for? and yield

   content_for?(:title) checks if content was provided. yield(:title) outputs it.

2. Step 2: Check each option for fallback logic

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> uses a ternary to show yield(:title) if present, else 'Default Title'. <title><%= yield(:title) || 'Default Title' %></title> uses yield(:title) || 'Default Title' but yield(:title) returns nil if no content, so fallback works but less explicit. <title><%= content_for(:title) || 'Default Title' %></title> uses content_for(:title) which returns nil and does not output content. <title><%= yield :title if content_for?(:title) %></title> only yields if content exists but shows nothing otherwise.

3. Final Answer:

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> -> Option A

4. Quick Check:

   Use content_for? to check, then yield or fallback [OK]

Hint: Use content_for?(:name) to check before yielding [OK]

Common Mistakes:

• Using content_for instead of content_for? for checking
• Assuming yield(:name) returns empty string instead of nil
• Not providing fallback content