How do I add an option/link to a printer-friendly version of the pages on our website through CM1?

CM1
2

Hi Cathy,

Do you already have a print-only stylesheet for your website? If not, you could explore a free third-party tool like Print Friendly, which provides code you can place into an HTML widget: http://www.printfriendly.com/

-Jon

3

I think the tool Jon linked to is great and would be my recommendation as well. The one caveat being that Print Friendly either includes light-weight adds in your print friendly pages, or costs a small fee.

An alternative might be to use JavaScript to open your main body content region in it’s own window with no CSS styling, which would appear similar to what you already have setup.

To do this, open your main content template, move over to the Content tab, and then navigate to Actions > Edit Meta-data. From there, in one of the Additional Code insertions points, add this JavaScript (this is a very basic example and can be re-purposed as needed):

function printPreview() { <br />
 var w = window.open('','','height=600,width=800'); <br />
 var html = $('.printContent').html(); <br />
$(w.document.body).html(html); <br />
} <br /><br />
$(function() { <br />
$("a#print").click(printPreview); <br />
}); <br /> }); <br /> </script>```   
 
Then, toggle over to the Style tab, edit the main content widget, and add a class of _printContent_ (as referenced in the JS code above). If the widget already has a class, you can just separate the new one with a single space.   
 
From here, in either a HTML widget or a Rich Text widget being edited in source view, add an anchor tag with an ID of _print_, such as:   
 
```Print Page```   
 
Now, when you click on this link, the content of your main content widget will pop-up in a 800x600 pixel window.