How do I use region-odd and region-even block classes?

I am developing a theme, and in order to handle multiple viewport sizes, I am setting the theme to adjust the column layout, so that wide viewports (> 960px) will have a double sidebar, normal viewports (>640px to 960px) will have a single sidebar, and narrow viewports (>320 to <640px) they will appear in a double column below the content. Very narrow viewports (<320px) they will be in a single column also under the content.

By douple sidebar, I mean a sidebar where the blocks appear side by side in pairs. ie:
[ B1 ] [ B2 ]
[ B3 ] [ B4 ]
. . .
[ Bn-1 ] [ Bn ]

In smaller viewports they appear as a single stacked column, as we normally see. ie:
[ B1 ]
[ B2 ]
[ B3 ]
[ B4 ]
. . .
[ Bn-1 ]
[ Bn ]

To do so however, I need to know how to determine if the block is region-even or region-odd (zebra striping), so that I can wrap it in the appropriate start/end divs.

Thanks, Carolyn

Comments

todd nienkerk’s picture

Title: Using region-odd and region even » Using region-odd and region-even
Status: Active » Closed (won't fix)

Carloyn:

This isn't something this module was designed to handle. You can achieve this at the theme layer using template_preprocess_block() to create a "counter" to track each block as it's themed.

Note that the blocks already contain a "zebra" value, which is added to the $variables array in Drupal core's implementation of template_preprocess_block() (same link as above). Here is the relevant code:

  static $block_counter = array();
  // All blocks get an independent counter for each region.
  if (!isset($block_counter[$variables['block']->region])) {
    $block_counter[$variables['block']->region] = 1;
  }
  // Same with zebra striping.
  $variables['block_zebra'] = ($block_counter[$variables['block']->region] % 2) ? 'odd' : 'even';
  $variables['block_id'] = $block_counter[$variables['block']->region]++;

The code above assigns a value of "odd" or "even" to $variables['block_zebra'], which can be accessed in the theme as $block_zebra. Try adding this line to your theme's block.tpl.php file(s) to see the output:

print $block_zebra;

More advanced stuff -- like multiple viewports and columns of blocks -- may require something more advanced than the "odd" or "even" classes inside $block_zebra. This will require some custom code in your theme.

carolynmarenger’s picture

I think I have a handle on the theme end of things. I have that code already. I was not sure how to check either a counter or the odd/even. So, now that I have that, I can go ahead with my theme.

Thanks, Carolyn