FriendsLight theme with styled preview

Michael Geary | Sun, 2005-03-13 00:05
category

If you’re like me, you’ve lost your work in Drupal a few times when you’ve previewed an edit and then forgotten to save it. Drupal’s preview page hardly looks any different from a normal display page.

When my boss lost his work because of this preview page confusion, I figured I’d better do something about it, so I updated the FriendsLight theme to highlight preview pages visually. I posted some screen shots on my blog. Or, you can try the new theme out by entering a comment to this post and previewing it.

Unfortunately, Drupal does not provide any information to its themes to tell them they are rendering a preview and not a fully saved message. Fixing this requires changing the Drupal core modules node.module and comment.module, but it’s a straightforward one-line change in each. The code simply adds $node->preview and $comment->preview flags which can be tested in a theme or theme engine.

For Drupal 4.5.2, here is the patch to node.module:

--- c:node.module       2004-12-23 22:44:01.000000000 -0800
+++ m:node.module       2005-03-12 17:52:19.000000000 -0800
@@ -1299,6 +1299,7 @@
 function node_preview($node) {
   // Convert the array to an object:
   $node = array2object($node);
+  $node->preview = TRUE;

   if (node_access('create', $node) || node_access('update', $node)) {
     // Load the user's name when needed:

And here’s the patch to comment.module:

--- c:comment.module    2005-01-12 08:01:55.000000000 -0800
+++ m:comment.module    2005-03-12 17:51:11.000000000 -0800
@@ -494,6 +494,8 @@
   $output = '';

   $comment = new StdClass();
+  $comment->preview = TRUE;
+
   foreach ($edit as $key => $value) {
     $comment->$key = $value;
   }

This code has not changed at all in the CVS Drupal 4.6.0, only the line numbers are different for the patches.

It was simple to update FriendsLight to use the new flags. Just inside the outermost <div> in both node.tpl.php and comment.tpl.php, I added this at the beginning:

<?php if( $node->preview ) print '<div class="preview">'; ?>

and this at the end:

<?php if( $node->preview ) print '</div>'; ?>

And I added these new styles to style.css:

/* Preview */
.preview {
  background: rgb(255,240,230);
  border: 2px dashed rgb(204,82,0);
  padding: 8px;
}
.node .preview {
  padding-top: 0px;
  margin-top: 8px;
}
.comment .preview {
}

Other themes would need to do this in their own way.

Also new in this version of FriendsLight: For message excerpts, I moved the read more links up above the other links so that they are more prominent. I also fixed a bug in the way categories are displayed.

The new version of FriendsLight is attached to this message. Enjoy!

AttachmentSize
friendslight-2005-03-13.tgz28.84 KB
Submitted by Visitor (not verified) on Fri, 2005-05-06 10:04.

Are you aware of theme_node_preview()? It wraps the previewed nodes with a class “preview”.

Submitted by Michael Geary on Thu, 2005-05-12 08:17.

theme_node_preview() is new in Drupal 4.6, and I originally wrote this code for 4.5.2.

I don’t like the way theme_node_preview() works, though. It wraps the entire preview area, both the excerpt and the full post, inside a single div with the preview class. If we apply my theme style to Drupal 4.6 using theme_node_preview(), this is the result:

Preview using theme_node_preview()

By comparsion, the same preview using my code looks like this:

Preview using $node->preview

I think the latter looks better and is more clear.

Also, theme_node_preview() doesn’t help with comment previews, while my code with $comment->preview does.

There’s some more discussion of the two preview approaches here.