The publishing software that I use to produce this site is called Movable Type. It has some nice features. I really like their template tags. I find with WordPress that I have to hack the php source or make significant changes to the templates to make it do what I want. I haven't had to do that with Movable Type. Another great feature (that WordPress did not have) is the ability to preview an entry before publishing it. It always bothered me though that the entry was not rendered in the style of my website. To really see what an entry would look like I would have to publish it. This was a pain if I were adding photos or had some tight formating constraints. This is an example of an entry I had to publish and tweak several times before I got the floating images in reasonable locations. I was always willing to go through this because I didn't see another other blog packages offering this capability. My wife did not even have a preview capability on her site. Well, I just upgraded her to WordPress 2.0.1. It not only has a preview capability, but it has an excellent one where you can view a preview at the bottom of the editing page exactly like it will look when it is published.
This was too much. I did the usual looking around for a plugin, but the best I could find was a WYSIWYG plugin called FCKeditor. I wasn't too interested in WYSIWYG (I need control!) and I was not too keen on installing something with that moniker (It's written by a guy by the name of Frederico Caldeira Knabben). I decided to see if I could figure out a simple hack to give me a decent preview. I wanted at least the same font style, font size, page size, and spacing so that I could check the formatting of entries. It did not need to render the sidebar, the banner, or anything like that. It turned out that this is amazingly easy and here is how you do it:
- Open up preview_entry.tmpl in an editor. It is located in the tmpl/cms directory in your Movable Type installation. You will see a template tag that looks like this near the end of the file:
<TMPL_VAR NAME=PREVIEW_BODY>. Put a div tag around this tag. It should look something like this now:
<div class="preview-entry">
<TMPL_VAR NAME=PREVIEW_BODY>
</div>
- Next open up your stylesheet. It will be located in your mt-static/themes/<theme name>. You want to record the values of the css elements responsible for the style of your blog. Here are some suggestions for finding the right css tags. If you are using the default templates (as of Movable Type 3.2), you want to look for #container to get the background color, #alpha to get the width and margins (also look at the various layout tags), the body probably has the font and font size, .entry-content has the line-height. That should be enough to get you started. You can test if these are the right ones by changing them and viewing your blog.
- Now that you have the basic css elements written down, you can add a definition for preview-entry (or whatever you called yours) into the stylesheet for the Movable Type publishing interface (styles.css). It's located in mt-static/. My entry looked like this:
.preview-entry {
width: 450px;
color: #333333;
background: #efe0b7;
border: 1px solid #333333;
padding: 25px 30px 5px 30px;
margin: 0;
font-family: georgia, times, serif;
text-align: justify;
font-size: 14px;
line-height: 150%;
}
- The last step is to open up an entry that has all the html elements you want the preview to work for and compare the preview to the published version. Tweak preview-entry and repeat. You'll probably also have to define some children of your div tag if want to make your preview look just like your blog style.
You can view a side-by-side comparison of my preview hack to the real thing by clicking on the image below.
Update: There is now a live preview plugin that is much better than the hack that I demonstrated here.
Comments
The theme that I used for locating the various css tags was Vicksburg from the Movable Type style library.
Posted by: CJ Costello on Sunday, February 12, 2006
Thanks!
Posted by: Miranda on Saturday, September 2, 2006