Perfect Preview With MarsEdit
September 6th, 2007One of the most time-saving features of MarsEdit is its Preview window, which uses the power of Safari’s WebKit to render a browser-perfect version of your post before you send it to the blog. This is fantastic because you can spot formatting errors and typos before publishing the item.
Unfortunately, the initial setup is a little bit daunting. Straight out of the box, MarsEdit’s preview looks pretty bland. It won’t have any of the fantastic stylings of your blog until you edit the “template” that MarsEdit uses to generate the preview.
To be sure, there’s a lot MarsEdit could do to make this template-editing process easier. For instance, Windows Live Writer uses a nifty trick where it posts a temporary entry and then immediately deletes it, so that it can get a “reference” page to build a template from.
I’m going to look at ways of streamlining this process in MarsEdit, but for the time being I thought it would help to post a sort of tutorial about how you can get your own blog set up with “perfect previews” in MarsEdit.
Step 1: Open A Reference Entry
We’re going to build your template by starting with a “typical” entry page from your blog. Go to your blog and click on the title (usually) of one of your posts, to get the “all on one page” view. For instance, here’s the single page view for this entry.
From your browser, select “View Source.” This varies from browser to browser but in Safari you can just control-click the page content and then select it from the menu.
Step 2: Copy HTML Into MarsEdit
With a post editor window open in MarsEdit, click the Preview icon in the toolbar to open the Preview window. Then click the “Edit Template” button in the lower-right corner of the window. You’ll probably see the default template that MarsEdit uses for all new blogs. Delete the default template text to make room for your custom template.
Copy the HTML source from the web browser’s “View Source” window and paste it right into the MarsEdit template window. You should immediately see the preview window become a lot more like your blog looks on the web!
Step 3: Fix Links
This won’t be necessary for all blogs, but if your HTML has relative links in it, you’ll need to replace those links with full links. For instance, if your HTML links to CSS style sheet like this:
href=”blog/wp-content/themes/rsbubbles/style.css”
You’ll need to change it to include your host name:
href=”http://www.red-sweater.com/blog/wp-content/themes/rsbubbles/style.css”
You’ll probably know that you need to find some more links to change because something is missing or just doesn’t look right in the preview. Try Cmd-F to search for “href” and “url(” in your template.
Step 4: Insert Placeholders
By now you should have a pretty good looking preview! The only problem is, it shows you the content of your reference post! You need to insert placeholders where all the “interesting things” are. So you squint your eyes and go scrubbing through the template, looking for the “content” and replacing it with a template placeholder. Try Cmd-F to search for the first word in your blog post, and then select the text and all its HTML until you get to the end of the blog post. Delete all of that, then select “Insert Placeholder -> Body” from the placeholder popup.
Do the same for your post’s Title, Categories, etc. You’ll see your template start to magically come to life as a perfect mirror of the post you’re currently editing.
Caveat: Because of the way MarsEdit’s “instant” updates work in the preview window, you can’t use placeholders in the <head> secton of your template. This usually isn’t a problem, because you can use hard-coded references to your blog’s CSS files, etc.
Final Touch: Font Size & Style
As a final touch to make the content match the way it looks in your favorite browser, make sure to change the default preview fonts in Preferences -> Preview. You can look in your browser’s preferences to find the default fonts you’re using there, and ensure that you get the same look in MarsEdit.
As I said, the process of setting up a perfect preview is a bit tedious, but the results are simply amazing. For instance. I’m about to publish this post, and before ever seeing it on the web, I know just what it’s going to look like:
I hope you’ll find MarsEdit even more enjoyable after learning how well it can preview your posts.
September 6th, 2007 at 12:09 pm
This post actually made me take the time to do this. Thanks!
September 6th, 2007 at 12:43 pm
Thanks for this, Daniel. Finally got this set up.
September 6th, 2007 at 1:59 pm
Thank you, Daniel! I was unaware of this hugely useful feature and the steps were very easy to follow. It was also easy to intuit additional steps not covered which is a testament to the quality of MarsEdit and this post. For me, MarsEdit 2.0 just got even better. I love that kind of surprise.
September 6th, 2007 at 2:54 pm
Does each blog have a separate template? If I’m going to do this, I’ll no doubt be tempted to do it for across the board.
September 6th, 2007 at 2:58 pm
Glad to hear some of you were inspired to set it up!
Gordon: Yeah each blog has its own template, so you just “edit template” from the preview window for each blog, or you can control-click a weblog and choose “edit template” from the contextual menu.
If you want to use the same one in multiple blogs just copy/paste from one to the other.
Oh – you can also switch between the blogs from the template editor window itself. From the popup up at the top…
Daniel
September 6th, 2007 at 3:00 pm
I would like to see placeholders for the time to match this blogger style.
September 6th, 2007 at 3:08 pm
Howard: I’ll consider that – but I wonder what it should put for the time if a date hasn’t been set. Now? Isn’t it almost as useful from a preview point of view to just see any old time in there?
September 6th, 2007 at 3:45 pm
I think now would be much nicer than a fixed date, particularly as it starts to be last month or year.
Also I find that #weblogURL#’ and #url# become the same URL for the weblog. That is #url# isn’t for the post itself. This is on blogger.
Is there a way to go back to the default template? I might keep editing down my blogger template but I find (particularly in the article pane of the main window) I don’t need to see the header of my blog (or for that matter blogspots nav bar) all the time. I’d rather see just the text of the post. It would be nice to easily go back to the default.
September 6th, 2007 at 6:48 pm
I’ve been doing this since 2006. It’s the best thing I could think of for getting rid of that widowed text on my fixed-width page.
@Howard, just create a new dummy blog, then copy the template from that one.
September 6th, 2007 at 8:11 pm
Yeah – what John describes is the best way to go “back to default” … it would be a good idea to add a “restore default” button, maybe.
As for the distinction between #weblogURL# and #url# … it’s probably because you haven’t posted the entry yet, so unfortunately it doesn’t know the URL. Or are you seeing this with already-posted entries as well?
September 6th, 2007 at 8:51 pm
Woo, that inspired me as well to get it set up.. thanks!
September 6th, 2007 at 8:56 pm
Could you just add <base href=”…”> instead of Step 3?
By the way, as of our May release, WLW will usually sniff out your style without a temporary post. ;)
September 6th, 2007 at 8:59 pm
Joe: I’m not familiar with that magic
And as for sniffing it out … is that thanks to new Writer-motivated metadata stuff that wordpress.com etc are supporting? Or is there another trick? You don’t have to share :)
September 7th, 2007 at 9:50 am
Thanks a lot for making me discover this feature which will be hugely useful for me, as the text area on our blog is rather narrow and I always had problems to get images to look right. I tried to solve this by keeping the compose window width the same as the blog area text, but I always ended up in screwing something up. Now it won’t happen anymore :)
September 7th, 2007 at 10:45 am
Thanks for writing out the steps. I’ve been evaluating MarsEdit for the last few days, and the perfect preview sold me. My $30 is yours. Keep up the good work!
September 8th, 2007 at 3:32 pm
As for the distinction between #weblogURL# and #url# … it”™s probably because you haven”™t posted the entry yet, so unfortunately it doesn”™t know the URL. Or are you seeing this with already-posted entries as well?
Yes I’m seeing it with already posted entries. #url# acts like #weblogURL#. I’m using blogger.
September 8th, 2007 at 3:34 pm
Howard, thanks for following up. I’ll look into it – it’s probably something I can fix for in an update.
September 9th, 2007 at 3:40 pm
Having recently upgraded to MarsEdit 2 (thanks, by the way–the new features are fantastic), I figured I’d give this a try. I’ve recently been going through Windows-based blogging software for a work project, and was quite impressed by the automatically-templated preview that Windows Live Writer does (I think Adobe Contribute does the same thing).
It would be nice if MarsEdit could do a test post (I’m guessing it would just have to post #body#, with a title of #title#, and so forth, and read it back to build the template itself), but the method you’ve posted here works well enough for me–until I replace all my templates, of course!
September 13th, 2007 at 12:54 am
The ability to use a template turns MarsEdit into a divine experience. I can write and see the fully-formatted version almost instantly. Thanks!
Two small glitches: when writing on my local development site, I code in any image links to the local site. But I have to change these for the remote production site. That’s a pain. Is there any magic formula to be able to write the root URL as a piece of code that doesn’t have to be changed? Is that the #weblogURL# referred to in this thread?
And, when I save to a blog and then do some editing, and save again, I’m getting two posts and not one corrected one. Am I doing something wrong?
September 13th, 2007 at 5:48 am
Stuart: there isn’t a built-in solution right now to reference “images relative to the final site URL”… something to think about.
The fact that your edited posts are showing up as new posts sounds like a bug, possibly affected by the particulars of what weblog system you’re using, how it’s configured in ME, etc. It would probably be better to raise that question in the forums with some more info about your particular settings:
http://www.red-sweater.com/forums/viewforum.php?id=6
September 13th, 2007 at 11:11 pm
OK, thanks, will do.
September 27th, 2007 at 11:04 am
This is another place where Blogger’s convert line breaks confuses things. I have it enabled in my blogger blog and change disable it because it breaks old posts. When creating a new post in MarsEdit I include some line breaks to make a simple list. When posted to Blogger it looks fine because of the inserted BR tags, however the MarsEdit preview isn’t “perfect” because the line breaks aren’t converted.
September 27th, 2007 at 11:07 am
Howard – as things evolve I’d like to expand the current list of “preview text filters” to add some specific ones that capture most of the nuances of particular blog systems. So for instance I’d like to see a “Blogger Simulator” and a “WordPress Simulator” instead of just “Convert Line Breaks” which is pretty brain-dead.
If anybody gets inspired to start this work and contribute it to me, that might help :)