Is there any way to hide a region if empty? [#2458921]

I am working with some responsive layout in nodes, say I want 2 col responsive layout with an image on the left and the rest on the right, but I want a full width content when no image is present.

hiding the sidebar and making the other region full-grid would be the way to good, is there any recommend way of doing this? I think it might be a good addition if not.

Comment	File	Size	Author
#5	row.png	18.7 KB	aegirone

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

shadcn CreditAttribution: shadcn commented 25 March 2015 at 13:14

Yes we can definitely do this.

We'll use radix-burr-flipped.tpl.php as example.

Radix Burr has two regions: contentmain and sidebar. We want the contentmain to be full width when sidebar is empty.

Step 1: Copy the layout template file, radix-burr-flipped.tpl.php, to your theme templates directory.
Step 2: Wrap the code for sidebar in an empty() check.

<?php if (!empty($content['sidebar'])): ?>
  <div class="col-md-4 radix-layouts-sidebar panel-panel">
    <div class="panel-panel-inner">
      <?php print $content['sidebar']; ?>
    </div>
  </div>
<?php endif; ?>

Step 3: We'll use a preprocess function to figure out what should the width of contentmain be.

/**
 * Implements template_preprocess_radix_burr_flipped().
 */
function demo_preprocess_radix_burr_flipped(&$variables) {
  // Content region is 8 col width by default.
  $variables['contentmain_class'] = 'col-md-8';

  // If sidebar is empty, content region takes full width.
  if (empty($variables['content']['sidebar'])) {
    $variables['contentmain_class'] = 'col-md-12';
  }
}

Step 4: Print the $contentmain_class variable in your template as follows:

...
<div class="<?php print $contentmain_class; ?> radix-layouts-content panel-panel">
  <div class="panel-panel-inner">
    <?php print $content['contentmain']; ?>
  </div>
</div>
...

Your final template file will look like this:

<?php
/**
 * @file
 * Template for Radix Burr Flipped.
 *
 * Variables:
 * - $css_id: An optional CSS id to use for the layout.
 * - $content: An array of content, each item in the array is keyed to one
 * panel of the layout. This layout supports the following sections:
 */
?>

<div class="panel-display burr-flipped clearfix <?php if (!empty($classes)) { print $classes; } ?><?php if (!empty($class)) { print $class; } ?>" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
  
  <div class="container-fluid">
    <div class="row">
      <div class="<?php print $contentmain_class; ?> radix-layouts-content panel-panel">
        <div class="panel-panel-inner">
          <?php print $content['contentmain']; ?>
        </div>
      </div>
      <?php if (!empty($content['sidebar'])): ?>
        <div class="col-md-4 radix-layouts-sidebar panel-panel">
          <div class="panel-panel-inner">
            <?php print $content['sidebar']; ?>
          </div>
        </div>
      <?php endif; ?>
    </div>
  
  </div>
</div><!-- /.burr-flipped -->

Step 5: Clear the cache.

Note: If you have Panels IPE enabled, you will still see the sidebar. Test as anonymous.