Navigate

Printer Friendly Page with SSI

Bookmark with

StumbleUpon

del.icio.us

Digg it

Furl

Spurl

ma.gnolia

Yahoo MyWeb

Windows Live

Introduction

This guide shows you one method to create a printer friendly version of your pages using SSI. I recommend that you have a page template set up using SSI but this method also works if you don't.

This method makes use of the query string. By passing a certain value in the page URL the browser can read the query string when parsed and display the required content based on that value.

To pass our value into the query string we can set up a link such as:

<a href="thispage.shtml?print">Print this page</a>

That link works for the document thispage.shtml so to set it up so that we can copy the same code into multiple pages we can do the following:

<a href="?print ">Print this page</a>

We then use the SSI flow control elements to read our keyword "print" to display or 'remove' the content:

This is a printer friendly page.

This is the 'normal' content.

You can insert the above code into many areas of your document to display specific content. If we take a basic HTML document with header footer and content section we may decide to remove the header and footer leaving only the content on the printer friendly page:

<html>
 <head>
 <title>Printer Friendly Document</title>
 </head>
<body>
 
 This guide was printed from SSI-Developer.net.
 
 
 

 Here is my printer friendly content !!

 
 For more guides visit SSI-Developer.net
 
 
 
</body>
</html>

If you already have your site built it can be a difficult task entering this code into every document. To get around this you can enter the code into the included files IF you are using includes to set up your page template, and IF the included files are set up to be parsed by the server.

To explain this further I will use my own site template as an example. The basic template I use for every page on this site is as follows (excluding Meta tags and DTD):

So when I decided to create a printer friendly version of my webguides I simply had to edit four include files; header.shtml, left_col.shtml, right_col.shtml and footer.shtml to enter the printer code.

header.shtml:

This guide was printed from SSI-Developer.net.

Logo, links and top navigation bar go here!

Editing those four include files and entering the printer code now allows me to remove the header, footer, left and right columns thus leaving only the content. Hey Presto, a printer friendly version of every (.shtml) page of the site.