Radiant CMS layout tricks

Page layouts are one of the most powerful features of Radiant. Layouts allow you to encapsulate much of the common HTML of a website into a template of sorts that is filled in with the information unique to each page.

Today, I’d like to share a couple of tips and tricks for making the best use of this powerful feature. These aren’t hard and fast rules, just a couple of the best practices that I’ve picked up over the years as I’ve worked with Radiant.

Use one layout if possible

Radiant allows you to create as many layouts as you want for your website. At first glance you may be tempted to create multiple layouts for your site that have a one-to-one relationship with the type of page you are creating. For instance, you may want to have a layout for your home page, one for your portfolio, one for your blog, etc. Resist this urge if you can. Depending on how your HTML and CSS are written, you may be able to get away with just one layout — even if the page that you are working on has a vastly different look and feel. The trick is to use conditional tags to switch parts of the layout on and off depending on the page.

Why is this helpful? It keeps all of the common code in one place and allows you to keep things DRY. It also minimizes user error and ensures that each page has the proper design, because a content editor never has to worry about selecting the proper layout. You set the layout once on the root page, and all the other pages inherit it.

Use conditional tags to build flexible layouts

Radiant provides a number of conditional tags that make it easy to build smart layouts. Use them.

The most commonly used is tag is probably if_url (and its sister unless_url). This tag allows you to test the URL of the current page and show or hide content based on the condition. You can do an exact match on the URL by using the equals attribute, but I mostly use the matches attribute because it allows me to use regular expressions to match an array of URLs.

For instance, on WiseheartDesign.com I insert code for comments using the if_url tag with the matches attribute like this:

<r:if_url matches="^/articles/.+">
...code to display comments here...
</r:if_url>

If you are not familiar with regular expressions, this may look a little convoluted, but it is really quite simple. It basically reads, if the URL starts with “/articles/” and is followed by at least one character, then insert the following code. That last part is necessary so that the articles index page (which has the URL of “/articles/”), is not matched by the expression.

As you can see, the if_url tag is quite powerful for adding conditions to your layouts, but it has one significant weakness. Since it relies on the URL of the page, if you change the URL scheme for your website, you will need to remember to come back and update your layout. If your layouts are riddled with calls to if_url this may prove to be a bit of a headache.

Another tag that may be useful here is the if_content tag. You can use the if_content tag to test if a page has certain parts (or the unless_content tag to test that it does not). With clever naming of page parts you can get a lot of mileage out of this simple tag.

For instance, suppose you have two basic page designs for your web site. One is a standard two-column design with content and sidebar. Another is a simple single column design with no sidebar. By testing for the existence of the sidebar, you can actually handle both cases with a single layout:

<r:if_content part="sidebar">
  <div id="content"><r:content /></div>
  <div id="sidebar"><r:content part="sidebar" /></div>
</r:if_content>
<r:unless_content part="sidebar">
  <div id="content" class="no_sidebar"><r:content /></div>
</r:unless_content>

The code above checks for the existence of the “sidebar” part. If it exists it renders two divs, one for the content and one for the sidebar. If the “sidebar” part does not exist, only the content div is rendered – this time with the “no_sidebar” class so that the single column version can be styled differently.

With a little a little imagination, I’m sure that you can see how the same technique can be used to achieve one-column, two-column, and three-column designs – all within the context of a single Radiant layout.

Use snippets to simplify complex layouts

Radiant snippets are designed to make it easy to share share common code between layouts and/or pages, but they are also useful for other purposes. The more complicated your layouts become the more you will find it makes sense to extract meaningful parts into Radiant snippets.

One purpose is to isolate complex or verbose code. For instance, you may want to put your Google Analytics code in a snippet. You will probably only enter this code once during the lifetime of your site, and there is no reason that it should clutter up your layout code.

Another purpose is to make content more accessible. I often put my navigation code in a snippet because as I update a site it is easier to maintain in isolation.

© 2013 John W. Long