Printer Friendly Pages
Are you envious? Have you seen those cool little "Get a Printer-Friendly Version of this Page!" lines on some of those high-end content managed sites? Ever wish that you could add those to your pages, without having to make duplicates of your entire site? Wouldn't it be nice if you could just tell your site to make these Printer Friendly versions happen automagically? If you've followed the concepts that I laid out in in my Page Templates article, you're well on your way.

The basic concept is two-fold: Tell the page to remove the unnecessary parts of the page, and then let the page decide when to show those elements.

PART A: Telling the page to remove the unnecessary parts of the page means setting a variable that the SSI IF/ELSE commands can detect. The easiest way to do this is with the QUERY string, by having a link on that page that sets a QUERY string to some 'codeword':

<P>A <A HREF="sample_page.shtml?forprint">printer friendly
version of this article</A> is available.</P>

This is similar to the code that I use in the #included file at the bottom of all of the pages on this site. When a visitor clicks that link, the page is reloaded and the "$QUERY_STRING" variable is set to 'forprint'. This is part one. But before we get to the second part, let's refine this code. Let's make it able to be used on every page without the need for being hand-coded for each new page.

<P>A <A HREF="<!--#echo var="REQUEST_URI"-->?forprint">printer
friendly version of this article</A> is available.</P>

Ooo, lookie there. By throwing in another SSI command, I've made this piece of code much more 'portable' to other pages. Now, as long as this code gets parsed and activated correctly, the name and location of the file will be added in automatically.

PART B: The page then uses IF/ELSE statements to show the proper parts whether that means showing the navigation or showing pieces that will make sense when the page is printed out. Here's the other part of the #included file at the bottom of this page:

 1:         </TD>
 2:     </TR>
 3: 
 4: <!--#if expr="$QUERY_STRING = 'forprint'" -->
 5: 
 6:     <TR>
 7:         <TD><P>XSSI Library:<BR>
 8:         http://www.powertalk.com/rosso/xssi/</P></TD>
 9:     </TR>
10: 
11: <!--#else -->
12: 
13:     <TR>
14:         <TD>&nbsp;</TD>
15:         <TD>&nbsp;</TD>
16:         <TD>Page footer menu here.</TD>
17:     </TR>
18: </TABLE>
19: <!--#endif -->

This is pretty simple once you break it down. Let's go through it line by line. Lines 1 and 2 simply finish off the <TABLE> structure from my Page Layout Template.

Line 4 is the actual kick off for the whole print version process. Once a visitor has clicked on a link as established in Part A, the environment variable '$QUERY_STRING' is set to the string of letters 'forprint'. The #if command simply looks at that '$QUERY_STRING' and if it is that 'forprint' string, it shows the piece of code directly below that, until the #else command (on line 11). If the '$QUERY_STRING' does not have that 'forprint' string, then the HTML between #else and #endif commands.

Lines 6 through 9 are the HTML that will be shown when the page is printed. Be sure to have a message as to where the web page or the site can be found. Remember you're trying to help the person that prints out this page remember where they got this information from in the first place.

Line 11 is the #else statement. It separates the printer-only part from the regular HTML part.

Lines 13 through 18 are the lines of HTML that will be shown when the page is viewed normally. As you can see, it finishes off the the very last part of the <TABLE> structure from my Page Layout Template.

Keep in mind that these IF/ELSE commands can be just as easily wrapped around the other pieces of the page, including the left hand navigation, the header of the page, and any other pieces of the page that would be useless if the page is solidified into a printed form.

Putting it all together is the final version of the footer that's #included in this site. I've combined the pieces from Part A with the code from Part B. So now in it's full glory is the basic parts of the included file:

 1:         </TD>
 2:     </TR>
 3: 
 4: <!--#if expr="$QUERY_STRING = 'forprint'" -->
 5: 
 6:     <TR>
 7:         <TD><P>XSSI Library:<BR>
 8:         http://www.powertalk.com/rosso/xssi/</P></TD>
 9:     </TR>
10: 
11: <!--#else -->
12: 
13:     <TR>
14:         <TD>&nbsp;</TD>
15:         <TD>&nbsp;</TD>
16:         <TD>
17:             <P>A <A HREF="<!--#echo var="REQUEST_URI"-->?forprint">printer
18:             friendly version of this article</A> is available.</P>
19:         </TD>
20:     </TR>
21: </TABLE>
22: <!--#endif -->

Pretty cool, huh? One of the keys to making this work correctly is to make sure that the files that are #included get interpreted just like the main page. This usually involved naming your included files something that ends in '.shtml' like: nav_bottom.shtml. It's best to try this printer-friendly version technique out line by line, making sure that the code for Step A works, then implement the code from Step B and confirming that it works as well. By taking small steps you'll have a better understanding of the pieces that are being used.

A printer-friendly version of this article is available.
This site hand-coded for your protection.