Being smart with Radiant layouts

After having set up over 35 Radiant sites, you'd think you're getting the hang of it. We have come up with a certain way of organizing our layout so that it rarely needs to change. This way we can build most of our screens without having to render extra parts in the layout, while the whole team (yeah, both of us) immediately knows what's going on. Here's the interesting bit;

<div id="content">
<r:if_content part="breadcrumb" inherit="true">
<div id="breadcrumb">
<r:content part="breadcrumb" inherit="true" />
</div>
</r:if_content>
<div id="content_main">
<r:content part="pre-body" inherit="true" />
<r:unless_content part="read-more">
<r:content />
</r:unless_content>
<r:content part="read-more" />
<r:content part="post-body" inherit="true" />
</div>
<r:if_content part="nav-sec, content-sec" inherit="true" find="any">
<div id="content_sec">
<r:content part="nav-sec" inherit="true" />
<r:content part="content-sec" inherit="true" />
</div>
</r:if_content>
</div>

You can probably tell what everything does by reading the layout, but here's a breakdown:

<r:if_content part="breadcrumb" inherit="true">
<div id="breadcrumb">
<r:content part="breadcrumb" inherit="true" />
</div>
</r:if_content>

This makes use of the if_content inherit attribute that was introduced in Radiant 0.6.8.  It makes sure that the surrounding div tags are only shown when the div is not blank.

<r:content part="pre-body" inherit="true" />
<r:unless_content part="read-more">
<r:content />
</r:unless_content>
<r:content part="read-more" />
<r:content part="post-body" inherit="true" />

The pre-body and post-body parts can come in handy when you want to render something before or after every child of a certain page. For example, you can add a post-body part to an ArchivePage to render meta data and the comments snippet below every article. You'll certainly find more uses for it yourself.

You also see that we prefer that the read-more page part (for articles) is not necessarily a continuation of the content part that comes up on the blog's index page. We show the default page part in the overview page, and if there is a read-more part, we link to it. The 'short' version will not render on the 'detail' page. You could use this in your children:each iteration on the "overview" page;

<r:if_content part="read-more">
<p class="read_more"><r:link>Read more...</r:link></p>
</r:if_content>

Finally, our 'sidebar' div is only rendered when either one of nav-sec or content-sec page parts is available on the current or any ancestor page:

<r:if_content part="nav-sec, content-sec" inherit="true" find="any">
<div id="content_sec">
<r:content part="nav-sec" inherit="true" />
<r:content part="content-sec" inherit="true" />
</div>
</r:if_content>

In a reading mood?

Have something to add?



  • (required, but not displayed)

  • (optional)

About this article

You’re reading an entry titled “Being smart with Radiant layouts”. Written

undefined tag `time_ago_in_words'
ago (24/08/2008) — and archived under documentation, radiant. So far, 0 people (dis)agreed with me, what do you think?

What the fuzz is all about

  1. 2 pages are tagged with WYM
  2. 1 page is tagged with absolute-urls
  3. 1 page is tagged with arrrrcamp
  4. 2 pages are tagged with documentation
  5. 2 pages are tagged with editor
  6. 2 pages are tagged with extension
  7. 2 pages are tagged with extensions
  8. 1 page is tagged with minitorial
  9. 1 page is tagged with navigation
  10. 10 pages are tagged with radiant
  11. 4 pages are tagged with rails
  12. 2 pages are tagged with ruby
  13. 2 pages are tagged with shell
  14. 1 page is tagged with sifr
  15. 2 pages are tagged with troubleshooting

Github activity

More places where you can find me

Back to top