Archive of the Meta Category

Previewing Movable Type Entries

Saturday, February 11, 2006

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.
Screen shot

Update: There is now a live preview plugin that is much better than the hack that I demonstrated here.

Posted in February 2006 | Comments (2)

Photos of Seville

Friday, December 30, 2005

I put ten photos from our trip to Seville, Spain here (sort of a late notice). It should give you a glimpse of what the city was like. As I have time and inclination, I'll be posting more photos to my main photo page.

Posted in December 2005 | Comments (0)

Photo Site Update

Friday, September 23, 2005

Back in April when I was putting this site together, I also started a photo site. I managed to code up the main page, but I never got around to integrating the rest of the photo gallery code. Unfinished projects... Well, I have been working on completing this for the past two weeks, and I am happy to say it is done.

New features include slide shows, an rss feed, and a family photos area (also with a separate rss feed). I also worked on making the interface more consistent. (That should please some people.)

The main photo gallery is where I will post what I consider to be my best photos. I am trying to post at least one new photo a week there. Now you're not likely to see embarrassing pictures of Shannon in the main gallery. For that, you need to go to the family photo site.

Posted in September 2005 | Comments (2)

No Internet Access

Wednesday, June 15, 2005

I will be in the desert of Nevada for the next week so no Internet access for me. I am pretty sure I will be somewhere near here if anyone wants to visit.

Posted in June 2005 | Comments (3)

RSS Feeds

Friday, May 13, 2005

I think I have finally finished tweaking my RSS feeds. In the process I changed how I was calculating the GUIDs, which probably created double entries on many aggregators. I have added a comments feed and feeds for each category.

Posted in May 2005 | Comments (0)

Lessons Learned

Friday, April 29, 2005

Four weeks ago, I didn't know CSS. Four weeks ago, I didn't know PHP. Four weeks ago, I knew some basic HTML, but I certainly didn't know what a <div> tag was. Four weeks ago, I had a vague idea of what a content management system was. Four weeks ago, this website did not exist. A lot has happened in four weeks. Here is some of the what I learned in the past four weeks:

  • People still use Internet Explorer.
    I knew that web surveys say around 80% of people use IE. I just didn't expect it to make up to such a large percentage of the browsers hitting this site. It is an old, broken browser in many ways. A modern, more secure browser can be downloaded from here or here.
  • Designing and coding a site for many different browsers is a pain.
    A lot of time in the past few weeks was spent trying to find the combination of HTML and CSS that worked in IE, Firefox and Opera. I was surprised that even the default template for WordPress is broken under IE. I was more surprised at the number of Safari users coming to this site. In fact, the intro page to our site looked like a Picasso painting for the first few days under Safari as can be seen here.

I am considering writing up a comparison of my experiences configuring WordPress and Movable Type at a later date.

Posted in April 2005 | Comments (4)