Railscasts - Layouts and content

Mar 21, 2007

Layouts and content_for

If you want to change something in the layout on a per-template basis, content_for is your answer! This allows templates to specify view code that can be placed anywhere in a layout.

Tags: views

Download (10.4 MB, 3:30)

alternative download for iPod & Apple TV (5.5 MB, 3:30)

Read it on ASCIIcasts

<!-- projects/index.rhtml -->
<% content_for :head do %>
  <%= stylesheet_link_tag 'projects' %>
<% end %>

<!-- layouts/application.rhtml -->
<head>
  <title>Todo List</title>
  <%= stylesheet_link_tag 'application' %>
  <%= yield :head %>
</head>

< Previous Episode

Next Episode >

26 comments

1. Christopher Jun 19, 2007 at 07:22

Thank you. Thank you. Thank you.

Report as Spam

2. rs Jun 26, 2007 at 08:41

I don't like this method because you get two <link ... type="text/css" /> items in your HTML source.
I really don't think that this is an appropriate behavior.

Report as Spam

3. Ryan Bates Jun 26, 2007 at 13:53

@rs, that's a valid concern. However, I think it's acceptable if one page requires a lot of additional styling. No sense in putting all this styling in a global CSS file and requiring it on every other page. Also, if the users are coming from another page they will likely have the global "application.css" stylesheet cached.

Report as Spam

4. Brian Jun 27, 2007 at 01:48

hi,

what is the meaning of yield and :head in => <%= yield :head %>

Report as Spam

5. Ryan Bates Jun 27, 2007 at 08:03

The "yield" call in a layout will output the contents of the template. When supplying a parameter (:head in this case) it will output the contents of that content_for block. I explained this in the episode, sorry if it wasn't clear.

Report as Spam

6. louis Jul 10, 2007 at 01:01

@rs and ryan,
it seems to me that having multiple <link.../> tags is like having multiple <script /> tags in the head. is there some rule that says multiple script tags are ok, but link tags for css should be in one file? eric meyer has 8 stylesheet links on his homepage (as of today). i think he knows what he's doing vis-a-vis css.

it's a fantastic little railscast, btw. these little tricks make dev so much easier and smarter. thanks for doing this! you're a mensch.

Report as Spam

7. Syn Oct 23, 2007 at 10:28

You can have multiple link tags. This is even used in the W3C standards to have multiple stylesheets specified for different medias, or simply to allow choice of stylesheets. (In Firefox, this shows up in the View Menu -> Page Style sub-menu.)

Report as Spam

8. kriom Mar 14, 2008 at 03:26

What is the best way and is there a best way to call a "content_for" between
<%=yield :mycontent %>
and
<%=@content_for_mycontent %>

Report as Spam

9. Robert B. Apr 06, 2008 at 09:07

kriom, there shouldn't be any difference, since content_for_mycontent is only old style version for yield in Rails, as far as I am concerned.

Report as Spam

10. Avishai Aug 01, 2008 at 19:12

Great tip; It's really useful for including JavaScript/CSS that you only need on specific pages of your app.

I've used this technique to load some extra jQuery files and CSS that I needed for a sortable list and autocomplete widget. Very cool.

Report as Spam

11. apputammi Sep 15, 2008 at 23:53

give something brief

Report as Spam

12. jude Sep 16, 2008 at 01:05

As per ur tutorial if i write the content_for in index.html.erb its working fine.other than that if write in any other file example news.html.erb its not taking.Please send ur reply to me

Report as Spam

13. Thibaut Jan 04, 2009 at 05:32

Thanks!

Report as Spam

14. Mark Jan 26, 2009 at 08:07

I'm having problems using content_for with yield in a rails 2.2.2 project. The content_for is not being rendered. Any one else experiencing problems with content_for in Rails 2.2.2?

Report as Spam

15. Alastair Brunton Mar 11, 2009 at 07:24

@Mark

I have just experienced a similar issue. I upgraded HAML and it fixed the problem. (2.0.9)

Report as Spam

16. Chuck Wood Jun 06, 2009 at 15:20

I've built about 5 different helpers for different clients that do this. Then I started watching railscasts. Thanks for the great content. I've summarized the behavior on my website so I have a quick reference.

http://rails.lostjungles.com/content_for-multiple-yields-in-the-same-layout/2009/06

Keep up the great work!

Report as Spam

17. Asfand Yar Qazi Jun 22, 2009 at 08:16

I'm using Rails 2.3.2 - and doing content_for in the layout itself will NOT make that content visible if you yield in the layout as well.

i.e. if in application.html.erb, you do 'content_for :javascript', etc... and do a 'yield :javascript' in the same layout, it will not work. I'm not sure how to get the required behaviour since I was depending on this...

Annoying.....

Report as Spam

18. Ryan Wanger Jul 19, 2009 at 14:27

@Asfand, renaming it to content_for :script worked for me in 2.3.2. Example below.

in your layout:

<% content_for :script do %>
<%= javascript_include_tag "nameofjsfile" %>
<% end %>

in your head: <%= yield :script %>

The place I needed it was actually in a partial that gets called inside a lightbox. It didn't work to have the code in the partial, so I had to add it into the page it was called from. I suspect that was a lightbox issue more than a partial issue.

Report as Spam

19. Rob Levin Jul 20, 2009 at 18:33

Wow, thanks for this wonderful cast Ryan!

Report as Spam

20. Thomas Watson Aug 10, 2009 at 03:18

I can't get it to work inside partials either. An issue have been raised on Lighthouse:
https://rails.lighthouseapp.com/projects/8994-ruby-on-rails/tickets/1896-content_for-not-rendering-from-partials-in-layout

But it seems that DHH invalidated it. Maybe it should be reopened?

Report as Spam

21. Pawel Barcik - Gem Coders Aug 27, 2009 at 05:32

Very good cast.

Report as Spam

22. maurizio de magnis Nov 13, 2009 at 04:20

I'm on rails 2.3.4 and content_for doesn't simply work when called within a partial..

Report as Spam

23. Omin Dec 17, 2009 at 00:39

@Ryan:

Can we use the same method to make a call to an item stored on a remote server? Say what if i want to http://google.com/somefolder/residingin/anotherfolder/somefile.js

Report as Spam

24. Nike Air Max 90 Jan 24, 2010 at 17:42

Thank you for sharing.Nice post.

Report as Spam

25. 642-901 Jan 25, 2010 at 01:15

Good job. That's super

Report as Spam

26. 640-802 Jan 25, 2010 at 01:31

that was close.

Report as Spam