Drupal 6 Node Wraps Around Customized Region Sidebar Blocks
In this exercise I am going to show you how to to create a customized block region inside the node area, with the node text wrapping around the customized block. A mock-up of what we are after, using the default Garland theme, is shown below. To complete this exercise, you will need to have already created a basic Drupal installation (which obviously includes its respective MySQL database) and be able to navigate around the filesystem and edit a few files. You will also need the Views module installed since we are going to test our solution against our own 'blog' view. Nothing too difficult in other words. Ok - so this is what we are after, although this image is a Photoshop mock-up:
I just said we are going to use the Garland theme. That's partially true - in fact it's never a good idea to edit the default theme, so we'll create a copy of it, call it Judy if you'll forgive the movie reference, and edit that instead. I use Linux so I'm going to be using the command line to copy the themes, but you could use a File Manager under cPanel or Windows dependent upon our circumstances. Note how I check whether the themes directory for additional themes is already in existence or not. If you are starting from a clean install, it won't be
laptop4:~> cd /srv/www/htdocs/base/sites/all
laptop4:/srv/www/htdocs/base/sites/all> ls
README.txt
laptop4:/srv/www/htdocs/base/sites/all> mkdir themes
laptop4:/srv/www/htdocs/base/sites/all> mkdir themes/judy
laptop4:/srv/www/htdocs/base/sites/all> cp -R ../../themes/garland/* themes/judy/.
laptop4:/srv/www/htdocs/base/sites/all> cd themes/judy
laptop4:/srv/www/htdocs/base/sites/all/themes/judy> ls
block.tpl.php fix-ie.css images minnelli print.css style-rtl.css
color fix-ie-rtl.css logo.png node.tpl.php screenshot.png template.php
comment.tpl.php garland.info maintenance-page.tpl.php page.tpl.php style.css
laptop4:/srv/www/htdocs/base/sites/all/themes/judy>Drupal gets the information it needs regarding the theme from the .info. We need to rename and edit the garland.info to add the customized region and to change the details so Drupal knows our theme is called Judy. I'm using Linux command line again to rename using mv and the editor vi to change its contents.
laptop4:/srv/www/htdocs/base/sites/all/themes/judy> mv garland.info judy.info
laptop4:/srv/www/htdocs/base/sites/all/themes/judy> vi judy.infoThe judy.info needs the auto-created Drupal references commented out, the name changing and the customized region adding.
; $Id: judy.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Judy
description = Tableless, recolorable, multi-column, fluid width theme (default).
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
; Information added by drupal.org packaging script on 2010-03-04
;version = "6.16"
;project = "drupal"
;datestamp = "1267662008"
regions[user1] = Content Sidebar
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[footer] = Footer
Now if you go to admin/build/themes you will see the Judy theme. Change the radio button and the checked box to Judy as I have, and save configuration.
Now point your browser at admin/build/block and set the blocks to what you want. Refer to the image to see what I have set. Note I have not put anything in our new content-sidebar region just yet.We are now going to add some css code to style.css in the theme directory to define the mark-up for the new customized region. Specific parameters will obviously need to be fine tuned to match your own requirements. You will see we are creating a right floating region which will float as far as its parent container will allow. We also need to create some css to close the float. It's not too critical where to insert the code, but for the sake of good management, I've put the new code just before the definition of .block-region
style.css
.sidebar-content {
clear:both;
}
.sidebar-content-right {
float:right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
clear:none;
width: 300px;
background: #eee;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}We now need to edit the cornerstone file of the PHPTemplate Engine, the page.tpl.php file. This is responsible for positioning the elements on the screen. In particular, we need to insert the code to print the content of our new customized region. To do this, we need three new chunks of very basic PHP code added to the area of the file where the main content is normally printed. I have elected not to print the entire file here for the sake of brevity. I have commented the code that needs to be added below. The first few lines are after the if ($tabs), the second few lines are after the printing of any help text, whilst the third few lines to close the float are after the printing of the content.
page.tpl.php
<div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">
<?php print $breadcrumb; ?>
<?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<!-- Added new customised region here -->
<div class="sidebar-content">
<?php if ($user1 and !$tabs): ?>
<div class="sidebar-content-right" style="display: inline">
<?php print $user1; ?>
</div>
<?php endif; ?>
<!-- End of conditional new customised region -->
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
<!-- Added new customised region here -->
<?php if ($user1 and $tabs): ?>
<div class="sidebar-content-right" style="display: inline">
<?php print $user1; ?>
</div>
<?php endif; ?>
<?php print $content; ?>
<!-- End of conditional new customised region -->
</div>
<!-- End of conditional new customised region -->
<?php print $feed_icons ?>
<div id="footer"><?php print $footer_message . $footer ?></div>
</div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->IE6 and IE7 bug: If you have users using IE6 or IE7 (you will if your site is Internet-facing), then a further change is required. The problem with both IE6 and IE7 is they handle floats poorly, and there are many web pages dedicated to documenting these bugs. The manifestation with this exercise is you will not see the node wrap around the sidebar. The output will look like two separate columns. This is caused by div class="content clear-block" entries in the node.tpl.php file which seem to undo the float we are setting for the wrap-around - but only in IE6 and IE7. All other browsers are ok. The solution is easy - comment out the markup and its corresponding closing /div markup. There are two sets you need to look out for.
node.tpl.php
<?php
// $Id: node.tpl.php,v 1.5 2007/10/11 09:51:29 goba Exp $
?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>
<!--<div class="content clear-block">-->
<?php print $content ?>
<!--</div>-->
<!--<div class="clear-block">-->
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
<!--</div>-->
</div>
That should do it, but we need to run some tests. First, create a new block as I have done on the left. Rather uninspiringly I have called it 'Content Sidebar' and filled it with Lorem Ipsum placeholder text obtained from http://www.lipsum.com/. Note that I have been extremely specific about when this particular block should be displayed. I am saying I only want it visible for node/1 which will be a test story we will create in a minute, and blog which will be a sample view containing a some sample blog entries. Your usage will be different, but it is unlikely you'll want this block on every page.
I have then saved the block under the Content Sidebar region. You will also see where it will appear on the screen.Now create a test story; this should become node 1 providing this is a freshly created system Pad it out with some lorem placeholder text.
Point your browser at node/1 and you should see the result to the left. Everything working ok for nodes. However, there is a potential problem. When the owner of the node is logged in, that person has permissions to view or edit the node. These options are provided in the form of tabs across the top of the node, and this interferes with our new custom region.
This is neatly circumvented by dropping the block down out of the way of the edit tabs only under the circumstances there are tabs to display.
Now we have to test our solution against a simple view. Probably the easiest simple view, and the most frequently created with Drupal, will be a blog. Create a new content type called 'Blog', type 'blog' by pointing your browser at admin/content/types/add. Then create two or three new nodes of the type 'blog', and pad them out with lorem text. This is relatively trivial so I won't provide screen images.
Now create a simple blog view. Rather than show endless screen images, I have exported my blog view which can be pasted into your system at admin/build/views/import, and call it 'blog'.
$view = new view;
$view->name = 'blog';
$view->description = 'blog';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
'title' => array(
'label' => '',
'alter' => array(
'alter_text' => 1,
'text' => '<h2>[title]</h2>',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => '',
'prefix' => '',
'suffix' => '',
'target' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 1,
'ellipsis' => 1,
'html' => 0,
'strip_tags' => 0,
),
'empty' => '',
'hide_empty' => 0,
'empty_zero' => 0,
'link_to_node' => 0,
'exclude' => 0,
'id' => 'title',
'table' => 'node',
'field' => 'title',
'relationship' => 'none',
),
'body' => array(
'label' => '',
'alter' => array(
'alter_text' => 0,
'text' => '',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => '',
'prefix' => '',
'suffix' => '',
'target' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 1,
'ellipsis' => 1,
'html' => 0,
'strip_tags' => 0,
),
'empty' => '',
'hide_empty' => 0,
'empty_zero' => 0,
'exclude' => 0,
'id' => 'body',
'table' => 'node_revisions',
'field' => 'body',
'relationship' => 'none',
),
));
$handler->override_option('sorts', array(
'timestamp' => array(
'order' => 'ASC',
'granularity' => 'second',
'id' => 'timestamp',
'table' => 'comments',
'field' => 'timestamp',
'relationship' => 'none',
),
));
$handler->override_option('filters', array(
'type' => array(
'operator' => 'in',
'value' => array(
'blog' => 'blog',
),
'group' => '0',
'exposed' => FALSE,
'expose' => array(
'operator' => FALSE,
'label' => '',
),
'id' => 'type',
'table' => 'node',
'field' => 'type',
'relationship' => 'none',
),
));
$handler->override_option('access', array(
'type' => 'none',
));
$handler->override_option('cache', array(
'type' => 'none',
));
$handler = $view->new_display('page', 'Page', 'page_1');
$handler->override_option('path', 'blog');
$handler->override_option('menu', array(
'type' => 'none',
'title' => '',
'description' => '',
'weight' => 0,
'name' => 'navigation',
));
$handler->override_option('tab_options', array(
'type' => 'none',
'title' => '',
'description' => '',
'weight' => 0,
'name' => 'navigation',
));
Now if you point your web browser at blog you should be able to see a result similar to that to the left.