Adding content to alternating coloured bands on a concrete5 site

There has been a broad trend in web design towards layouts where content is presented on horizontal bands that extend to the left and right edges of the browser. Such bands may still feature content with a fixed/maximum width, but when the background continues to the edges of the browser things feel wider. As well as being modern and attractive, these simple bands can help to visually define sections of content.

We wanted to be able to place one or more blocks (of any kind), into such alternating bands, also being able to utilise concrete5's layout tool if necessary to further split them into columns.

Creating different editable areas in a custom built concrete5 theme is pretty trivial, but on these sites we wouldn't know how many bands we would need on each page, so hard coding a fixed number of areas onto a page was not ideal. If we hard coded ten areas, we'd perhaps then need twelve, or twenty, or none...

To solve this, we came up with a handy little approach using a custom page attribute and only a few lines of code.

An example of these coloured bands in practice

First, we simply created a 'number' custom page attribute, with the handle number_bands. We gave this attribute the name 'Number Of Content Bands'.

Then on the page template we added the following code:

<?php 
 	page = Page::getCurrentPage();
 	$numberbands = $page->getAttribute('number_bands');
 	
 	if (!$numberbands) { 
 		$numberbands = 0;
 	}
 	
 	for($i = 1; $i<=$numberbands; $i++) { 
 ?>
	 <div class="band-<?php echo ($i % 2 == 0 ? 'white' : 'grey'); ?>">
		 <div class="band-container">
			<div class="band-content">
				<?php 
					$a = new Area('Band ' . $i);
					$a->display($c);
				?>
			</div>
		</div>
	</div>
<?php } ?>	

This code looks up this page attribute and uses the value here to create a corresponding number of areas, labeled 'Band 1', 'Band 2', etc. Each editable area is then wrapped by a few DIVs (to allow content to be given widths, padding, etc), with an outer DIV with alternating class names.

We added this underneath our 'Main' area on the page, so that there's always at least one editable area (it's good practice to always have an area named Main available), with these bands simply being an option.

So if a page needs five bands, all that you need to do is add the custom page attribute to the page and you'll get 5 new editable areas, each wrapped in a DIV. This code in particular alternates between two classes, but you could adjust the code to suit what you are after (or use CSS3 and nth-child).

You'll get something like the following:

This approach means it's trivial to control how many bands are displayed on a page, with the template simply taking care of outputting the required editable areas.

You can view an example of this in action on the history page of the ACORN website and one any of the services pages on the recently launched Thornton Group website. Both examples are mobile-responsive.

-Ryan