Learning Movable Type: Printer-Friendly Pages


mtbadge-small.gif Updated December 23, 2005.

Providing printer-friendly versions of your weblog entries can be useful to your weblog readers. Learning Movable Type links to printer-friendly versions at the end of each entry.

There are several ways to create printer-friendly versions. I've outlined two methods in this tutorial. The first method is a simple header tag for your templates and some some CSS that automatically generates printer-friendly pages whenever someone goes to print a page from your blog. The second method is a bit more involved, creating a printer-friendly archive template with associated stylesheet. If you select "print" from the browser menu while looking at an LMT tutorial, and then "print preview", you'll see the result of the first method. If you click on the "printer-friendly" link at the bottom of each tutorial, you'll see the result of the second method.

Method One: CSS and Header tag

1. Create a new stylesheet. Create a new stylesheet in your index templates menu. In the stylesheet template, put the following directive:

For MT 3.2 default template

#banner, #banner-inner, #beta, #beta-inner, .content-nav { display: none; }

#container-inner { border: 0px solid #FFF; }

Add whatever elements you want to NOT display on your print friendly pages. If you don't want to display any comments or trackbacks, add the #comments id and the .trackbacks class to the stylesheet as above, with display set to "none". This example is based on the Vicksburg default with the sidebar on the right. By setting the display to "none" you are telling the browser to not show any of the content that falls within those divs.

This is a print.css stylesheet for MT 3.1 and earlier default templates

#banner, #nav, #right  {
    display: none;
}

Save the stylesheet as print.css.

2. Add a link rel tag to your header. In the header section of the template for which you wish to print in a print-friendly manner (in most cases this would be your individual entry archive template) put the following tag:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Add the tag underneath your existing stylesheet link rel tag in the header section.

Save and rebuild your site. To test, go to one of your entries (if you had made adjustments to the individual entry archive template) and select "print" and then "print preview" from your browser. If you don't notice a change, empty your browser cache and try again.

Method Two: Printer-friendly Archive Template

The following method is based on an approach first put forth by Kristine Beeson. In this method you create a new individual archive just for your printer-friendly pages and also a new print-friendly stylesheet. This method will dynamically generate files for the print-friendly versions of your entries using MT's dynamic publishing feature. If you are not able to use dynamic publishing on your web server, do not check "Enable dynamic building for this template" in step 1. If you use regular publishing (versus dynamic) this method will create a separate print file for every entry that will be stored on your server. In this case, and if web server storage is an issue for you, you may consider using the CSS only method outlined above.

1. Create a printer-friendly archive template. In your Templates menu, select the list of archive templates and select Create New Archive Template.

create-new-template.gif

In the window that comes up, write "Printer Friendly Individual Archive Template" in the name field. Do select the checkbox "Enable dynamic building for this template".

PF-template-name.gif

Copy and paste the template for your Individual Archive Template into the Template Body field of your new printer-friendly template. Remove all extraneous tags. This might take some trial and error.

Here is a basic structure for a printer-friendly individual entry archive template for MT3.2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html&#59; charset=<$MTPublishCharset$>" />
   <title><$MTBlogName encode_html="1"$>&#58; <$MTEntryTitle remove_html="1"$>&#58; Print This</title>
   <link rel="stylesheet" href="<$MTBlogURL$>PF-stylesheet.css" type="text/css" />
</head>
<body>
   <div id="container">
               <h1 id="banner-header"><$MTBlogName encode_html="1"$></h1>
               <h2 id="banner-description"><$MTBlogDescription$></h2>
                     <div class="entry">
                        <h3 class="entry-header"><$MTEntryTitle$></h3>
                        <div class="entry-content">
                              <$MTEntryBody$>
                              <$MTEntryMore$>
                        </div>
                        <p class="entry-footer">
                          Posted by <$MTEntryAuthorDisplayName$> on <$MTEntryDate$>
                        </p>
                     </div>
   </div>
</body>
</html>

Here are the basics of the printer-friendly archive template I use for Learning Movable Type (note that this uses MT2.661 tags):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html&#59; charset=<$MTPublishCharset$>" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title><$MTBlogName$>&#58; Print This</title>
<link rel="stylesheet" href="<$MTBlogURL$>PF-stylesheet.css" type="text/css" />
</head>
<body>
<div id="content">
<div id="container">
<div class="blog">
<div class="blogbody">
<h3 class="title"><$MTBlogName$>&#58;  <$MTEntryTitle$></h3><br />
<$MTEntryBody$>
<$MTEntryMore$><br/>
<span class="posted">Posted by <$MTEntryAuthor$> on <$MTEntryDate$> to <$MTBlogName$>   
<br /></span>
</div>
</div>
</div>
</body>
</html>

Save, but do not rebuild yet.

Note that for my LMT printer-friendly template I've included a

<code><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"></code>

tag in the header. This tag keeps search engines from indexing your printer friendly pages.

Also note that both templates includes a stylesheet link to a printer-friendly style sheet that I've named PF-stylesheet.css.

2. Create a printer-friendly stylesheet template. In your Templates menu, select Create New Index Template. Name your new index template something that distinguishes it as your printer-friendly stylesheet. In the output file create the file name of the .css file to which you will be linking from your printer friendly archive template. In this case, I've named the file PF-stylesheet.css.

Edit-Template-PF-Stylesheet.gif

Copy and paste your existing weblog stylesheet into the Template Body window for your new stylesheet. Trim the stylesheet down to the CSS that you will need for your print-friendly pages. Adjust the CSS so that it fits the print dimensions you want. Save, and now rebuild your index and archive pages.

Here is a printer-friendly stylesheet that will work with the printer-friendly archive template outlined above for MT 3.2: Download file

Here is the printer-friendly stylesheet I use for Learning Movable Type (note that this stylesheet works with MT 2.661 tags NOT MT3): Download file

3. Add the new archive method, MT version 3.2. Open the settings window for your weblog. Click on the Publishing menu link. Scroll down to Archive Mapping and click "Create New Archive Mapping". Select the Individual Archive Type and the Printer-Friendly Individual Archive Template and click "Add". A new archive template will be added to your list of Individual Archives. Click "Save Changes".

Click for larger view.

3a. Add the new archive method, earlier versions of MT. Open the weblog config window for your weblog. Click on the archiving menu link. Click the add new button. Select Individual for archive type, and Printer Friendly Individual Archive Template for template type. Click add. You will see the new archiving template added to the table.

select_archive_type.gif

4. Configure file name for printer-friendly URLs, MT version 3.2.
How you configure your printer-friendly page URLs depends on the URL naming convention that you are using for your entry pages. For MT 3.2, the default naming convention for weblogs looks something like this:

http://www.website.com/2005/11/entry_basename.html

What I do is just add -print after the entry basename to distinguish the print-friendly files from the entry files. So a print URL would look like this:

http://www.website.com/2005/11/entry_basename-print.html

To do this, find the following section in Archive Mapping:

archive-mapping-default-nam.gif

Scroll the menu Archive File Path bar to "Custom" for the Printer Friendly Individual Archive Template.

Type in %y/%m/-print.html

Like so:

archive-mapping-name.gif

Click "Save Changes". Rebuild your site.

See http://www.sixapart.com/movabletype/docs/3.2/earchivefilepathspecifiers/ for the Archive File Path Specifiers if you have a different set up than the default.

4a. Configure file name for printer-friendly URLs, earlier MT versions.
How you configure your printer-friendly page URLs depends on the URL naming convention that you are using for your entry pages. For earlier versions of MT, the default naming convention for weblogs looks something like this: http://www.website.com/archives/000123.html. What I do is just add "print" after the number to distinguish the print-friendly files from the entry files. So a print URL would look like this: http://www.website.com/archives/000123print.html. To do this, insert the following:

<$MTEntryID pad="1"$>print.html

into the Archive File Template window for the printer-friendly archive template.

archive_type.gif

Keep selected the radio button next to the original Individual Entry Archive Template. This tells the archive links that your Individual archive, not the printer-friendly archive, is the default archive.

Save and rebuild your site.

5. Link to printer-friendly pages. The last step is to place a link to your printer-friendly pages on your main index and individual entry archive templates. I've placed this link on the "posted to" line at the bottom of the entry. Use the following code to create a link. You can place the code between the container on the Main Index Template and anywhere on the Individual Entry Archive Template.

Code for MT 3.2

<a href="<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m">/<$MTEntryBasename$>-print.php">Printer-friendly version</a>

See Movable Type Date Formats if you have a different archive file path specifier than the default.

Code for MT 3.1 and earlier

<a href="<$MTBlogArchiveURL$><$MTEntryID pad="1"$>print.html">Printer-friendly version</a>

Save and rebuild your site.

Links: CSS Print Stylesheet - Eric Meyer's instructions on how to make a print-friendly page with CSS. Custom Dynamic Pages - a hack to mt-view.cgi by Stepan Riha that can be used to dynamically generate print pages.


Posted by Elise Bauer on December 23, 2005 12:03 PM to Learning Movable Type http://www.learningmovabletype.com/