Content tagged with: region

How to conditionally show regions based on client browser using jQuery

Submitted by Eric on Tue, 09/01/2009 - 22:19

I recently signed up for Google AdSense and I thought it would be fun to show ads for Internet Explorer users. Of course, you could use this tutorial for more productive purposes. Here is how I integrated this functionality into my theme.

I added 2 regions to THEME.info file:

regions[ad_left] = Ad Left
regions[ad_right] = Ad Right

I then included the regions in my theme by adding some code to my theme's page.tpl.php file:

<?php if ($ad_left): ?>
  <div id='ad_left' class='google_ads'>
    <?php print $ad_left; ?>
  </div>
<?php endif; ?>

<?php if ($ad_right): ?>
  <div id='ad_right' class='google_ads'>
    <?php print $ad_right; ?>
  </div>
<?php endif; ?>

Next, I added some CSS in my style.css theme file to absolutely position the regions in a fixed position:

.google_ads {
  position: absolute;
  bottom: 10px;
  width: 120px;
  height: 600px;
  display: none;	
}

.google_ads .block {
  padding: 0;
  margin: 0;
}

body > .google_ads {
  position: fixed;
}

#ad_left {
  left: 10px;  
}

#ad_right {
  right: 10px; 
}

Now that my regions were setup, I added 2 blocks containing the Google AdSense code and assigned the blocks to my new regions. You'll need to make sure the input filter you choose allows for javascript to be included.

At this point, the ads are included for every browser, but they will not be shown due to the "display: none" property I added to the "google_ads" CSS class. I added a few lines of jQuery in my theme's script.js file to show the regions for IE users:

$(document).ready(function(){
  // per IE ads
  if ($.browser.msie) {
    $('.google_ads').show();	  
  }
});

If you view this page in IE, you'll see my code in action ^_^

My additional thoughts... this code executes the Google AdSense javascript regardless of your browser, but it is only shown to IE users. A more efficient method would be to use AJAX to include the javascript ONLY if the browser is IE, or of course, by implementing a server side browser detection library.

Add new comment

Inserting a menu anywhere (block, page, module, etc)

Submitted by Eric on Wed, 08/27/2008 - 07:56

When you create a menu, a block is automatically generated for you. Blocks can only be assigned to one region at a time. In some cases, you might want to have the same menu appear in your site in different places. This can be accomplished using the menu_tree function. This function accepts one argument, the parent ID of the menu. This ID can be found at admin/build/menu. If you mouseover the edit link of the menu you'd like to insert, you'll see the following URL structure: admin/build/menu/menu/edit/### (where ### represents the parent menu ID). You can now generate a menu using the following code:

<?php
print menu_tree('YOURMENUID');
?>

If you're having a hard time finding a menu ID, you could query the menu table [see below]. You'll be interested in the "pid" column (not the "mid" column, which is the unique identifier).

select * from {menu}

If you'd like to also show the menu's title, you could use menu_get_item to look it up:

<?php
$menuID = 77;
$menuItem = menu_get_item($menuID);
if ($menuItem) {
  print "<h3>" . $menuItem['title'] . "</h3>";
  print menu_tree($menuID);
}                                                                                                                                                            
?>

Add new comment

Creating dynamic theme layouts based on the contents of your regions

Submitted by Eric on Thu, 06/19/2008 - 13:23

When creating a theme, it's important to keep your layout flexible in order to avoid wasted space. Here's a quick tutorial to show you how to vary theme layouts based on the contents of a region. Consider a common layout that contains 3 columns: sidebar_left, content, and sidebar_right. If the sidebar_right region did not have any blocks assigned to it, you could conserve valuable space by revising your theme layout using CSS and theme variables.

The first thing to do is add a variable to the page.php.tpl scope of your theme. In your template.php file, add a function called _phptemplate_variables. The following code checks the currently assigned variables to see if html has been assigned to the regions. If the region is empty, a variable will be passed to the theme containing CSS class selectors.

<?php
function _phptemplate_variables($hook, $vars=array()) {
  switch($hook) {
    case 'page':
      $layoutClasses = array();
      if (!$vars['sidebar_right']) $layoutClasses[] = 'noSidebarRight';
      if (!$vars['sidebar_left']) $layoutClasses[] = 'noSidebarLeft';
      $vars['layoutClasses'] = implode(' ', $layoutClasses);
      break;
  }
  return $vars;
}
?>

Next, in your page.tpl.php, locate the div in your layout that your like to conditionally change. Add the following code to add the CSS class selectors as necessary.

<?php
<div id='layoutContent' class='<?php print $layoutClasses; ? >' >
  BLAH BLAH BLAH
</div>
?>

Last, you can add CSS to revise your layout. In this case, I'll change the width of my divs.

#layoutContent {
  width: 500px;
}

#layoutContent.noSidebarRight {
  width: 750px;
}

#layoutContent.noSidebarLeft {
  width: 750px;
}

#layoutContent.noSidebarLeft.noSidebarRight {
  width: 1000px;
}

Add new comment