Preview templates

Drafts for Mac
1

Where can I find a guide for creating additional custom preview templates? Also, is there a place where users can share these or have shared them?

1 Like
2

The templates are in effect just HTML and CSS with at least one drafts template tag. Any tutorials on HTML and CSS should suffice.

I’ve not seen any, but it sounds to me like a good idea, and this forum would seem like the logical place.

3

I’m also interested in the format of templates to add different visual preview options in the Mac version. Can anyone post an example of the html/css, or is there maybe something available (or could be made available) on GitHub?

Tony

4

Here an example I just made up based on a CSS sample on GitHub:

Essentially, to make a preview template, you want to make a valid HTML file, with the CSS (either in <style> tags or loaded from a remote source), and replace the place you want the draft content in inserted with appropriate drafts template tags. In most cases, if you are building Markdown previews, you want to use:

%%[[draft]]%%

The [[draft]] tag gets replaced by the content of the draft. The %% %% around it tells the template engine to run that content through the Markdown engine to convert it to HTML.

If you are not familiar with HTML/CSS, this is a bit daunting. The most common case for this is building a preview that will match your personal blog theme. In a lot of cases this can be accomplished by viewing source on one of your blog posts, copy and pasting that content into template file - and the tricky part is just figuring out what part of that HTML to remove and replace with the %%[[draft]]%%.

1 Like
5

Thanks very much for that - it’s just what I need to get started with a templates or two. With any luck, people will start sharing on the forum soon.

6

A slightly delayed reply here. Thanks for posting this example and these details. I will give it a try.