Custom Print View for all single items

I’m trying to create a print view for all “single” pages. Essentially I just want a print button that I will add to “single.html” that will take all of the content from that single as input, and display that single in a printable format. Any ideas on how to accomplish this?

Could you clarify what you mean? PDF? Print-friendly CSS? Print-friendly CSS in a new page? Print-friendly CSS on the same page?

Print friendly css on a new page.

You can accomplish it by wrapping the print button code within a condition.

See: Conditionals

You can made this with CSS and @media selectors.

See it in my sample here

I use CSS tachyons and have the print stuff in CSS print.css
hope this helps

@ju52 is right. this should not be done via outputformats or any hack because there is already a simple <link rel="stylesheet" media="print" href="your-printstylesheet.css"/> existing and all you need to do is add your styles for print to such a file. Defining two pages, one for screen, one for print, makes the visitor load two pages. If they decide to print your page via “CTRL+P” or however their browser does it then the page get’s printed in it’s design anyway. Why not doing it proper right away and add a script to your print button that just calls the dom-windows internal printer. <a href="javascript:window.print()">Print</a>

Don’t like this

  • needs java
  • waste more paper


  • hidden gem in the printed page, QR code with page URL to go back online

Sorry, but people who disable Javascript (not Java) know how to print and this religious discussion is probably wrong in a generic discussion about a button and where please does a print stylesheet waste more paper?

I’m sorry, I’ve apparently worded this horribly. I want a new route (i.e. /print/single). This is for a recipe book so the print display will be radically different from the view page, so the actual layout will be different, no amount of css hacks will be sufficient.

I need a print button I can add to single.html, that will redirect to a new route, like print, and display that single in that new print.html format.

You would need to configure a Custom Output Format for a .print.html format.

Thank you! That took a lot of messing around to figure it out, but finally have the /print/ route setup and working.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.