Using Gpanels

Gpanels are multi-region, multi-column snippets of PHP code you can drop into your theme - they give instant vertical columns anywhere you place them. All our free and commercial themes include at least two or more Gpanels. They are extremely versatile and take just minutes to copy, paste and start using.

The Gpanel snippets are in Adaptivetheme core, in the "gpanels" folder. There are many to choose from in various column counts (2, 3, 4, 5 and 6) and configurations, such as a three column with the first column being 50% and the other two just 25%.

You can use Gpanels in both page.tpl.php and node.tpl.php. For both the first part of the process is identical, but for nodes you need a few extra steps (and actually write some PHP) to allow Drupal to use the regions inside the node template.

1. Copy, Paste

First select the Gpanel you want to use - in the code example I am using the 3x33 (3 columns, each 33.333% wide), note that all Gpanels are fluid and use percentages. Open up the file inside adaptivetheme/gpanels and copy the entire code block and paste this into page.tpl.php.

Here I have pasted the code between the message and help and the secondary content region - this will give me three even width columns near the top of the page and span the full width of the page.

  <?php print $messages; ?>
  <?php print render($page['help']); ?>

  <!-- Three column 3x33 Gpanel -->
  <?php if ($page['three_33_first'] || $page['three_33_second'] || $page['three_33_third']): ?>
    <div class="three-3x33 gpanel clearfix">
      <?php print render($page['three_33_first']); ?>
      <?php print render($page['three_33_second']); ?>
      <?php print render($page['three_33_third']); ?>
  <?php endif; ?>

  <?php print render($page['secondary_content']); ?>

2. Enable

Note: the following pertains to 7.x-2.x Adaptivetheme, for 7.x-3.x the region definitions are in the same file as the actual Gpanel PHP code and you need to copy them to your info file. This was done to clean up the info file since we now have many more Gpanel layouts in Adaptivetheme 7.x-3.x.

Next we need to enable the regions - open up your sub-themes info file and find the Gpanel regions section - all you need to do is uncomment the matching regions by removing the semi-colon before each line - you can change the region description if you like (the text after the equals sign), do not change the actual region name (the bit between the square brackets).

Once you have enabled the regions you must clear your sites cache so Drupal can see the new regions in the info file - then you can start using them. Below I have removed the semi-colons:

  ; 3 col 3x33
  regions[three_33_first]  = 3col 3x33 Gpanel col 1
  regions[three_33_second] = 3col 3x33 Gpanel col 2
  regions[three_33_third]  = 3col 3x33 Gpanel col 3

Node.tpl.php - its all different...

By default Drupal does not know about regions in node templates, we need to tell Drupal they are there - to be frank this became a bit off a pain in the ass in Drupal 7, compared to Drupal 6 this was way easy, now we need to write a heap of code and rewrite the Gpanel code as well.

First we need to make the regions available to the node template, we do that in theme_preprocess_node() function in your sub-themes template.php file.

We need to build new variables using each region, run through the block_get_blocks_by_region() function, then do some more stuff to get the region wrappers which Gpanels needs as style hooks for the CSS (else just the blocks will print):

function adaptivetheme_subtheme_preprocess_node(&$vars) {
// Setup variables to hold the regions blocks, so we can print them in node.tpl.php
if ($blocks_three_33_first = block_get_blocks_by_region('three_33_first')) {
$vars['three_33_first'] = $blocks_three_33_first;
$vars['three_33_first']['#theme_wrappers'] = array('region');
$vars['three_33_first']['#region'] = 'three_33_first';
  else {
$vars['three_33_first'] = '';
  if (
$blocks_three_33_second = block_get_blocks_by_region('three_33_second')) {
$vars['three_33_second'] = $blocks_three_33_second;
$vars['three_33_second']['#theme_wrappers'] = array('region');
$vars['three_33_second']['#region'] = 'three_33_second';
  else {
$vars['three_33_second'] = '';
  if (
$blocks_three_33_third = block_get_blocks_by_region('three_33_third')) {
$vars['three_33_third'] = $blocks_three_33_third;
$vars['three_33_third']['#theme_wrappers'] = array('region');
$vars['three_33_third']['#region'] = 'three_33_third';
  else {
$vars['three_33_third'] = '';


OK, got that? Now we need to rewrite the Gpanel code that you will use in node.tpl.php - all this does is a print render() on the new variables we built in the preprocess function.

<?php if ($three_33_first || $three_33_second || $three_33_third): ?>
  <div class="three-3x33 gpanel clearfix">
    <?php print render($three_33_first); ?>
    <?php print render($three_33_second); ?>
    <?php print render($three_33_third); ?>
<?php endif; ?>

And thats it really, after clearing your cache you can use these regions.

Responsive Gpanel Settings in Adaptivetheme 7.x-3.x

In AT 7.x-3.x there are new theme settings that allow you to modify the layout of the Gpanel depending on what device and orientation the site is being viewed in. Previously this was hard coded and you could not easily change how Gpanels reacted in mobile devices such as smartphones and tablets. Now you can - visit the theme settings and find the "Responsive Panels" tab in the Layout Settings (these settings will also control any Adaptivetheme Panel Layout, they work for both), and select the layout options for each mobile device orientation. Its quite intuitive although there are many options so we have made sensible default settings out of the box so you can leave this as default if you are happy with the results.

Last updated 9th May, 2012 - 8:27pm