Drupal 6 Node Inside Another Node Using Word-Wrap Panel

Submitted by badzilla on Mon, 09/11/2009 - 23:04

Checklist

1. Ensure Contemplates module is installed
2. Create new Child NID field in Story content type
3. Modify node-story.tpl.php
4. Modify style.css

This page shows a Drupal node inside another node. The main node is the body text, whilst the child node is encapsulated in the right aligned panel which the main node's text wraps around. There are many ways in Drupal to display a node inside another node. The Views module can be used, as can the Insert_View module. Neither are a perfect fit - they both require quite a lot of work to arrive at what we want. Then there's InsertNode and of course Panels but neither give me the flexibility to be able to specify the child node when I create the content for the parent node.

The method I have chosen for this solution is programmatic, although the actual amount of code required isn't great and so even casual PHP coders shouldn't baulk at following this tutorial. For this tutorial to work you will need the Content Templates (Contemplate) module installed, and you should read my earlier tutorial Custom Content Type Template before commencing on this lesson.

Ok, lets get started. First we need to add a custom field to the content type Story. This will hold the node id of the child node. So go to /admin/content/types and you will see a list of all the content types on your website. Then click on Manage Fields next to the Story content type. Here you will add the values as shown below.
screenshot21 Create Child NID Field
Once saved you wil be presented with the second screen. You don't need to do much, but a little help text could be useful.
Add Help Text
The next step is to modify the template for the Story content type - as we are using Contemplates, it will be in the sites/all/contemplates directory and called node-story.tpl.php. Mine already exists because of the earlier tutorial mentioned previously. If you don't have one, read my earlier tutorial and create a template specifically for the Story content type.

The Story content type will look something like the code below, although your ids could be different.

<div id="thmr_3" class="thmr_call">
  <span class="field field-type-text field-field-body">
  <span class="field-items">
      <span class="field-item"><?php print $node->content['body']['#value'] ?></span>
  </span>
</span>
</div>

This needs to be replaced with the following code.

<div id="thmr_3" class="thmr_call">
  <span class="field field-type-text field-field-body">
  <span class="field-items">
      <span class="field-item">
        <?php 
            if ($node->field_child_nid[0]['value'] 
              and $node->field_child_nid[0]['value'] != $node->nid) {
                $child = node_load($node->field_child_nid[0]['value']);
                print "<div id='child-right'>";
                $output = node_view($child, FALSE, FALSE, FALSE);
                print preg_replace('#<span class=\"submitted\".*[0-9]</span>#ms', "", $output);
                print "</div>";
            }
       ?>
     <?php print $node->content['body']['#value'] ?>
    </span>
  </span>
</span>
</div>

The code first has a conditional statement to check whether the child node has been set - this is held in the reference $node->field_child_nid[0]['value'], and if so we should also check it isn't the same as the current node id. Once this condition has been satisfied we need to print the float container to the right of the content area (more on that in the css file). We then load the child node using the Drupal API function node_load(). This returns an object reference which we could pass directly to node_view(). The API function node_view() generates the output for a node but that will obviously mean our panel will contain the links and the 'submitted by' text.

They need to be removed first. Thankfully, the links can be removed with the third FALSE parameter to node_view(). Unfortunately the 'submitted by' text cannot. So I run the output through a simple preg_replace() to filter out that text.

Finally we need to include the css to float the container to the right of the screen. Add the following markup to your theme's style.css file. You may need to change some of the settings to suit your own theme.

#child-right .node {
  background-color: #eee; 
  margin: 0 0 10px 10px;
  padding: 10px 10px 0px 10px;
  width: 250px;
  float:right;
}

To use this, you need to first create the content that will live in the panel the normal way using Create Content. You will need to obtain the node id for this content - go to admin/build/path and all the content is listed; the node id is the integer listed under the system column to the right of the node/ path. Once you have this number, create the main article, and providing you are creating a story then input this number in the appropriate place. You can of course repeat this entire process for any content type - I just happened to use content type Story as my example.