Patches allow themes to style previews

Ah, do I feel stupid or what. I wasn't really thinking about 4.6 when I worked on this; I needed something right away for my 4.5.2 site, and somehow didn't look to see if there was anything new in the 4.6 code.

It is interesting to compare the two approaches. Both the 4.6 code and my patch add the same <div class="preview"> tag, but they do it in different ways and in different places.

The 4.6 code seems better conceptually: It takes some hard coded HTML out of node_preview() and makes it a themable function, theme_node_preview().

But the default implementation of theme_node_preview() doesn't look quite right. I took my updated FriendsLight and ran it using that code instead of mine, and here was the result when previewing a node with a teaser:

http://mg.to/images/drupal-node-preview-46rc.png

The dashed red border and pale highlight surround the entire preview block including both the trimmed and untrimmed versions. That seems fairly confusing to me.

This happens because the code puts the <div class="preview"> around everything:

function theme_node_preview($node) {
  $output = '<div class="preview">';
  if ($node->teaser && $node->teaser != $node->body) {
    $output .= '<h3>'. t('Preview trimmed version') .'</h3>';
    $output .= node_view($node, 1, FALSE, 0);
    $output .= '<p><em>'. t('The trimmed version of your post shows what your post looks like when promoted to the main page or when exported for syndication. You can insert the delimiter "&lt;!--break--&gt;" (without the quotes) to fine-tune where your post gets split.') .'</em></p>';
    $output .= '<h3>'. t('Preview full version') .'</h3>';
    $output .= node_view($node, 0, FALSE, 0);
  }
  else {
    $output .= node_view($node, 0, FALSE, 0);
  }
  $output .= "</div>\n";

  return $output;
}

We can improve this by using two separate preview divs that surround only the node_view calls:

function theme_node_preview($node) {
  $output = '';

  if ($node->teaser && $node->teaser != $node->body) {
    $output .= '<h3>'. t('Preview trimmed version') .'</h3>';
    $output .= '<div class="preview">' . node_view($node, 1, FALSE, 0) . "</div>\n";
    $output .= '<p><em>'. t('The trimmed version of your post shows what your post looks like when promoted to the main page or when exported for syndication. You can insert the delimiter "&lt;!--break--&gt;" (without the quotes) to fine-tune where your post gets split.') .'</em></p>';
    $output .= '<h3>'. t('Preview full version') .'</h3>';
  }

  $output .= '<div class="preview">' . node_view($node, 0, FALSE, 0) . "</div>\n";

  return $output;
}

With that change, the preview comes out much better:

http://mg.to/images/drupal-node-preview-46rc-a.png

But, my version looks even better than that (to my eyes):

http://mg.to/images/drupal-node-preview-mg.png

What I did different was this: Instead of putting the <div class="preview"> outside the <div class="node"> as the 4.6 code does, I put it inside the node div.

Of course, a theme could customize all of this further, but I'm exploring what makes it easy for a theme to get nice looking results here without extra work.

Perhaps you should take a closer look at how [the 4.6 node preview] is done, and implement comment previews similarly.

That sounds like a good idea, and I followed up on it and took a look at the comment code. But the comment code is quite different and I didn't see an obvious place to put in a theme hook like the node code has.

I'd like to investigate further, but I'm afraid I can't spare the time right now--must get back to the day job and my family. :-) And in any case, the $comment->preview flag does the job perfectly already, so I'm a happy camper.