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>